├── .github
    ├── FUNDING.yml
    └── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   ├── custom.md
    │   └── feature_request.md
├── LICENSE
├── README.md
└── index.html


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | custom: https://www.paypal.me/liyascthomas
2 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/custom.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Custom issue template
 3 | about: Describe this issue template's purpose here.
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | 
11 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Liyas Thomas
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # stack
2 | 💫 Keep on stackin'
3 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 | 	<meta charset="UTF-8">
  6 | 	<title>CSS Stack</title>
  7 | 	<style>
  8 | 		/* Layout */
  9 | body {
 10 | margin: 0;
 11 | background-color: black;
 12 | counter-reset: points;
 13 | }
 14 | 
 15 | .screen {
 16 | position: relative;
 17 | margin: 0 auto;
 18 | max-width: 100vw;
 19 | width: 75vh;
 20 | height: 100vh;
 21 | overflow: hidden;
 22 | }
 23 | 
 24 | /* Sky */
 25 | .sky {
 26 | position: absolute;
 27 | left: 0;
 28 | right: 0;
 29 | top: 0;
 30 | bottom: 0;
 31 | pointer-events: none;
 32 | }
 33 | 
 34 | .sky > div {
 35 | position: absolute;
 36 | left: 0;
 37 | right: 0;
 38 | top: 0;
 39 | bottom: 0;
 40 | }
 41 | 
 42 | .sky > div::before {
 43 | content: "";
 44 | position: absolute;
 45 | left: 0;
 46 | right: 0;
 47 | top: 0;
 48 | display: block;
 49 | height: 1000vh;
 50 | }
 51 | 
 52 | .sky > div + div {
 53 | animation: opacity 30s linear infinite forwards paused;
 54 | }
 55 | 
 56 | /* All gradients except last are from https://uigradients.com/ */
 57 | .sky > div::before {
 58 | background: linear-gradient(
 59 | #f12711,
 60 | #f5af19 10%,
 61 | #91eae4 11%,
 62 | #86a8e7,
 63 | #7f7fd5 21%,
 64 | #f64f59 22%,
 65 | #c471ed,
 66 | #12c2e9 32%,
 67 | #f7797d 33%,
 68 | #fbd786,
 69 | #c6ffdd 43%,
 70 | #8a2387 44%,
 71 | #e94057,
 72 | #f27121 54%,
 73 | #3a1c71 55%,
 74 | #d76d77,
 75 | #fdbb2d 65%,
 76 | #22c1c3 66%,
 77 | #fdbb2d 76%,
 78 | #1a2a6c 77%,
 79 | #b21f1f,
 80 | #fdbb2d 87%
 81 | );
 82 | animation: sky 240s steps(8, end) infinite forwards paused;
 83 | }
 84 | 
 85 | .sky > div + div::before {
 86 | background: linear-gradient(
 87 | #ff0080,
 88 | #ff8c00,
 89 | #40e0d0 10%,
 90 | #1d2671 11%,
 91 | #c33764 21%,
 92 | #78ffd6 22%,
 93 | #a8ff78 32%,
 94 | #4b1248 33%,
 95 | #f0c27b 43%,
 96 | #2980b9 44%,
 97 | #6dd5fa,
 98 | #fff 54%,
 99 | #03001e 55%,
100 | #7303c0,
101 | #ec38bc,
102 | #fdeff9 65%,
103 | #56ccf2 66%,
104 | #2f80ed 76%,
105 | #0c0510 77%,
106 | #160b3e,
107 | #5f4282,
108 | #cecc99 87%
109 | );
110 | animation: sky 240s steps(8, end) -15s infinite forwards paused;
111 | }
112 | 
113 | /* Inputs and Last Label */
114 | input,
115 | .last {
116 | z-index: 1;
117 | position: absolute;
118 | display: none;
119 | width: 300vh;
120 | height: 300vh;
121 | opacity: 0;
122 | cursor: pointer;
123 | pointer-events: auto;
124 | transform: translate(-150vh, -150vh);
125 | -webkit-touch-callout: none;
126 | -webkit-tap-highlight-color: transparent;
127 | }
128 | 
129 | #last {
130 | display: initial;
131 | pointer-events: none;
132 | }
133 | 
134 | input:checked,
135 | #last:checked {
136 | display: none !important;
137 | }
138 | 
139 | /* Base */
140 | .base {
141 | position: relative;
142 | left: calc(50% - 15vh);
143 | top: 50vh;
144 | width: 30vh;
145 | height: 30vh;
146 | background-color: red;
147 | pointer-events: none;
148 | transform: rotateX(45deg) rotateZ(45deg);
149 | transform-style: preserve-3d;
150 | transition: transform 0.5s ease-in-out;
151 | }
152 | 
153 | /* Base Sides */
154 | .base::before,
155 | .base::after {
156 | content: "";
157 | z-index: -1;
158 | position: absolute;
159 | display: block;
160 | }
161 | 
162 | .base::before {
163 | right: 0;
164 | width: 50vh;
165 | height: 100%;
166 | background: linear-gradient(to left, #d00, rgba(221, 0, 0, 0));
167 | transform: rotateY(-90deg);
168 | transform-origin: right;
169 | }
170 | 
171 | .base::after {
172 | bottom: 0;
173 | width: 100%;
174 | height: 50vh;
175 | background: linear-gradient(to top, #e00, rgba(238, 0, 0, 0));
176 | transform: rotateX(90deg);
177 | transform-origin: bottom;
178 | }
179 | 
180 | /* Containers */
181 | .container {
182 | position: absolute;
183 | display: flex;
184 | transform-style: preserve-3d;
185 | }
186 | 
187 | .container.horizontal {
188 | left: -45vh;
189 | flex-direction: row;
190 | width: calc(90vh + 100%);
191 | height: 100%;
192 | }
193 | 
194 | .container.vertical {
195 | top: -45vh;
196 | flex-direction: column;
197 | width: 100%;
198 | height: calc(90vh + 100%);
199 | }
200 | 
201 | /* Spacers */
202 | .container::before,
203 | .container::after {
204 | content: "";
205 | }
206 | 
207 | .container.horizontal::before,
208 | .container.horizontal::after {
209 | max-width: calc(100% - 45vh);
210 | min-width: 45vh;
211 | height: 100%;
212 | }
213 | 
214 | .container.vertical::before,
215 | .container.vertical::after {
216 | width: 100%;
217 | max-height: calc(100% - 45vh);
218 | min-height: 45vh;
219 | }
220 | 
221 | /* Blocks */
222 | .block {
223 | position: relative;
224 | visibility: hidden;
225 | flex-grow: 1;
226 | background-color: currentColor;
227 | transform: translateZ(6vh);
228 | transform-style: preserve-3d;
229 | }
230 | 
231 | .block.horizontal {
232 | height: 100%;
233 | }
234 | 
235 | .block.vertical {
236 | width: 100%;
237 | }
238 | 
239 | .block.floating {
240 | position: absolute;
241 | display: none;
242 | visibility: visible;
243 | }
244 | 
245 | .block.floating.horizontal {
246 | width: calc(100% - 90vh);
247 | animation: left 2s linear alternate infinite both;
248 | }
249 | 
250 | .block.floating.vertical {
251 | height: calc(100% - 90vh);
252 | animation: top 2s linear alternate infinite both;
253 | }
254 | 
255 | /* Block Sides */
256 | .block::before,
257 | .block::after {
258 | content: "";
259 | z-index: -1;
260 | position: absolute;
261 | display: block;
262 | background-color: currentColor;
263 | }
264 | 
265 | .block::before {
266 | right: 0;
267 | width: 6vh;
268 | height: 100%;
269 | box-shadow: inset -6vh 0 rgba(0, 0, 0, 0.2);
270 | transform: rotateY(-90deg);
271 | transform-origin: right;
272 | }
273 | 
274 | .block::after {
275 | bottom: 0;
276 | width: 100%;
277 | height: 6vh;
278 | box-shadow: inset 0 -6vh rgba(0, 0, 0, 0.1);
279 | transform: rotateX(90deg);
280 | transform-origin: bottom;
281 | }
282 | 
283 | /* End Labels */
284 | .end {
285 | position: absolute;
286 | left: -200vh;
287 | top: -300vh;
288 | visibility: visible;
289 | max-width: 400vh;
290 | max-height: 600vh;
291 | pointer-events: auto;
292 | cursor: pointer;
293 | transform: rotateZ(-45deg) rotateX(-45deg) translateZ(100vh);
294 | -webkit-touch-callout: none;
295 | -webkit-tap-highlight-color: transparent;
296 | }
297 | 
298 | .end.horizontal {
299 | width: calc(400vh - 100000%);
300 | height: 600vh;
301 | }
302 | 
303 | .end.vertical {
304 | width: 400vh;
305 | height: calc(600vh - 100000%);
306 | }
307 | 
308 | /* Points */
309 | .points {
310 | position: absolute;
311 | left: 0;
312 | right: 0;
313 | top: 0;
314 | display: none;
315 | text-align: center;
316 | color: white;
317 | font-family: "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif;
318 | font-size: 9vh;
319 | font-weight: lighter;
320 | pointer-events: none;
321 | }
322 | 
323 | .points::before {
324 | content: "YOU'VE REACHED THE TOP!";
325 | display: block;
326 | margin: 4vh auto;
327 | font-size: 4vh;
328 | opacity: 0;
329 | transition: opacity 0.25s;
330 | }
331 | 
332 | .points::after {
333 | content: counter(points);
334 | display: block;
335 | }
336 | 
337 | /* Start Label */
338 | .start {
339 | position: absolute;
340 | left: 0;
341 | right: 0;
342 | top: 0;
343 | bottom: 0;
344 | padding: 15vh 0;
345 | text-align: center;
346 | color: transparent;
347 | text-shadow: 0 0 0 white;
348 | font-family: "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif;
349 | font-size: 9vh;
350 | font-weight: lighter;
351 | cursor: pointer;
352 | transition: opacity 0.25s;
353 | animation: start 0.75s linear;
354 | -webkit-user-select: none;
355 | -moz-user-select: none;
356 | user-select: none;
357 | -webkit-touch-callout: none;
358 | -webkit-tap-highlight-color: transparent;
359 | }
360 | 
361 | .start::before {
362 | content: "";
363 | position: absolute;
364 | left: calc(50% - 3vh);
365 | top: 59.5vh;
366 | display: block;
367 | border-top: 5vh solid transparent;
368 | border-bottom: 5vh solid transparent;
369 | border-left: 8.5vh solid white;
370 | }
371 | 
372 | .start::after {
373 | content: "";
374 | position: absolute;
375 | left: calc(50% - 10vh);
376 | top: 54.5vh;
377 | display: block;
378 | box-sizing: border-box;
379 | border: solid 2vh white;
380 | border-radius: 50%;
381 | width: 20vh;
382 | height: 20vh;
383 | }
384 | 
385 | /* Restart Button */
386 | button {
387 | position: absolute;
388 | left: 0;
389 | right: 0;
390 | top: 0;
391 | bottom: 0;
392 | border: none;
393 | padding-top: 80vh;
394 | width: 100%;
395 | color: white;
396 | background: transparent;
397 | opacity: 0;
398 | pointer-events: none;
399 | font-family: "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif;
400 | font-size: 4vh;
401 | font-weight: lighter;
402 | cursor: pointer;
403 | transition: opacity 0.25s;
404 | -webkit-touch-callout: none;
405 | -webkit-tap-highlight-color: transparent;
406 | }
407 | 
408 | /* Keyframes */
409 | @keyframes opacity {
410 | 0% {
411 | opacity: 1;
412 | }
413 | 25% {
414 | opacity: 1;
415 | }
416 | 50% {
417 | opacity: 0;
418 | }
419 | 75% {
420 | opacity: 0;
421 | }
422 | 100% {
423 | opacity: 1;
424 | }
425 | }
426 | @keyframes sky {
427 | from {
428 | transform: none;
429 | }
430 | to {
431 | transform: translateY(-880vh);
432 | }
433 | }
434 | 
435 | @keyframes width {
436 | from {
437 | width: 0;
438 | }
439 | to {
440 | width: 90vh;
441 | }
442 | }
443 | 
444 | @keyframes height {
445 | from {
446 | height: 0;
447 | }
448 | to {
449 | height: 90vh;
450 | }
451 | }
452 | 
453 | @keyframes left {
454 | from {
455 | left: 0;
456 | }
457 | to {
458 | left: 90vh;
459 | }
460 | }
461 | 
462 | @keyframes top {
463 | from {
464 | top: 0;
465 | }
466 | to {
467 | top: 90vh;
468 | }
469 | }
470 | 
471 | @keyframes color {
472 | 0% {
473 | color: #f00;
474 | }
475 | 19% {
476 | color: #ff0;
477 | }
478 | 31% {
479 | color: #0f0;
480 | }
481 | 43% {
482 | color: #0ff;
483 | }
484 | 62% {
485 | color: #00f;
486 | }
487 | 81% {
488 | color: #f0f;
489 | }
490 | 100% {
491 | color: #f00;
492 | }
493 | }
494 | 
495 | @keyframes start {
496 | from {
497 | text-shadow: 0 0 1vh white, 2vh -2vh 1vh white, 2vh 2vh 1vh white,
498 | -2vh 2vh 1vh white, -2vh -2vh 1vh white;
499 | opacity: 0;
500 | }
501 | to {
502 | text-shadow: 0 0 0 white;
503 | opacity: 1;
504 | }
505 | }
506 | 
507 | /* Sky: start changing */
508 | #start:checked ~ .sky > div + div,
509 | #start:checked ~ .sky > div::before {
510 | animation-play-state: running;
511 | }
512 | 
513 | /* Sky: stop changing */
514 | #end:checked ~ .sky > div + div,
515 | #end:checked ~ .sky > div::before,
516 | #last:checked ~ .sky > div + div,
517 | #last:checked ~ .sky > div::before {
518 | animation-play-state: paused;
519 | }
520 | 
521 | /* Base: start movement */
522 | #start:checked ~ .base {
523 | transform: translateY(200vh) rotateX(45deg) rotateZ(45deg);
524 | transition-duration: 60s;
525 | transition-timing-function: linear;
526 | }
527 | 
528 | /* Base: stop movement */
529 | #end:checked ~ .base,
530 | #last:checked ~ .base {
531 | transform: translateY(25vh) rotateX(45deg) rotateZ(45deg)
532 | scale3d(0.3, 0.3, 0.3);
533 | transition-duration: 1s;
534 | transition-timing-function: ease-in-out;
535 | }
536 | 
537 | /* Inputs and Last Label: display current */
538 | #start:checked ~ .base > input,
539 | input:checked + .container > .block > input,
540 | input:checked + .container > .block > .last {
541 | display: block;
542 | }
543 | 
544 | /* Containers: start color rotation */
545 | #start:checked ~ .base .container {
546 | animation: color 60s linear alternate infinite both;
547 | }
548 | 
549 | /* Containers: stop color rotation of current */
550 | #start:checked ~ .base > .container,
551 | input:checked + .container > .block > .container {
552 | animation-play-state: paused !important;
553 | }
554 | 
555 | /* Spacers: start sizing of current */
556 | #start:checked ~ .base > .container.horizontal::before,
557 | input:checked + .container > .block > .container.horizontal::before {
558 | animation: width 2s linear infinite alternate both running;
559 | }
560 | 
561 | #start:checked ~ .base > .container.horizontal::after,
562 | input:checked + .container > .block > .container.horizontal::after {
563 | animation: width 2s linear infinite alternate-reverse both running;
564 | }
565 | 
566 | #start:checked ~ .base > .container.vertical::before,
567 | input:checked + .container > .block > .container.vertical::before {
568 | animation: height 2s linear infinite alternate both running;
569 | }
570 | 
571 | #start:checked ~ .base > .container.vertical::after,
572 | input:checked + .container > .block > .container.vertical::after {
573 | animation: height 2s linear infinite alternate-reverse both running;
574 | }
575 | 
576 | /* Spacers: stop sizing of current */
577 | #end:active ~ .base .container::before,
578 | #end:active ~ .base .container::after,
579 | #end:checked ~ .base .container::before,
580 | #end:checked ~ .base .container::after,
581 | #last:active ~ .base .container::before,
582 | #last:active ~ .base .container::after,
583 | #last:checked ~ .base .container::before,
584 | #last:checked ~ .base .container::after,
585 | input:active + .container::before,
586 | input:active + .container::after,
587 | input:checked + .container::before,
588 | input:checked + .container::after {
589 | animation-play-state: paused !important;
590 | }
591 | 
592 | /* Floating Blocks: display current */
593 | #start:checked ~ .base > .container > .floating,
594 | input:checked + .container > .block > .container > .floating {
595 | display: block;
596 | }
597 | 
598 | /* Floating Blocks: stop movement of current */
599 | #end:active ~ .base .floating,
600 | #last:active ~ .base .floating,
601 | input:active + .container > .floating {
602 | animation-play-state: paused;
603 | }
604 | 
605 | /* Floating Blocks: stop movement of current then fadeout */
606 | #end:checked ~ .base .floating,
607 | #last:checked ~ .base .floating,
608 | input:checked + .container > .floating {
609 | visibility: hidden;
610 | color: transparent;
611 | transition: color 0.5s, background-color 0.5s, visibility 0s 0.5s;
612 | animation-play-state: paused;
613 | }
614 | 
615 | /* Increment Points */
616 | #last:checked ~ .base .floating,
617 | input:checked + .container > .floating {
618 | counter-increment: points 1;
619 | }
620 | 
621 | /* Floating Block Sides: stop sizing of current then fadeout */
622 | #end:checked ~ .base .floating::before,
623 | #end:checked ~ .base .floating::after,
624 | #last:checked ~ .base .floating::before,
625 | #last:checked ~ .base .floating::after,
626 | input:checked + .container > .floating::before,
627 | input:checked + .container > .floating::after {
628 | visibility: hidden;
629 | opacity: 0;
630 | transition: opacity 0.5s, visibility 0s 0.5s;
631 | animation-play-state: paused;
632 | }
633 | 
634 | /* Blocks: show current  */
635 | input:checked + .container > .floating + .block,
636 | #last:checked ~ .base .last + .container > .floating + .block {
637 | visibility: visible;
638 | }
639 | 
640 | /* Points: show only positive */
641 | .screen:valid .points {
642 | display: block;
643 | }
644 | 
645 | /* Points: top reached */
646 | #last:checked ~ .points::before {
647 | opacity: 1;
648 | }
649 | 
650 | /* Start Label: hide after started */
651 | #start:checked ~ .start {
652 | pointer-events: none;
653 | opacity: 0;
654 | animation: none;
655 | }
656 | 
657 | /* Restart Button: show on end */
658 | #end:checked ~ button,
659 | #last:checked ~ button {
660 | pointer-events: auto;
661 | opacity: 1;
662 | }
663 | 
664 | </style>
665 | </head>
666 | 
667 | <body>
668 | 	<form class="screen" novalidate>
669 | 		<input id="start" type="checkbox" tabindex="-1">
670 | 		<input id="end" type="checkbox" tabindex="-1">
671 | 		<input id="last" type="checkbox" tabindex="-1">
672 | 		<div class="sky">
673 | 			<div></div>
674 | 			<div></div>
675 | 		</div>
676 | 		<div class="base">
677 | 			<input type="checkbox" tabindex="-1" required>
678 | 			<div class="container horizontal">
679 | 				<div class="block floating horizontal"></div>
680 | 				<div class="block horizontal">
681 | 					<input type="checkbox" tabindex="-1">
682 | 					<div class="container vertical">
683 | 						<div class="block floating vertical"></div>
684 | 						<div class="block vertical">
685 | 							<input type="checkbox" tabindex="-1">
686 | 							<div class="container horizontal">
687 | 								<div class="block floating horizontal"></div>
688 | 								<div class="block horizontal">
689 | 									<input type="checkbox" tabindex="-1">
690 | 									<div class="container vertical">
691 | 										<div class="block floating vertical"></div>
692 | 										<div class="block vertical">
693 | 											<input type="checkbox" tabindex="-1">
694 | 											<div class="container horizontal">
695 | 												<div class="block floating horizontal"></div>
696 | 												<div class="block horizontal">
697 | 													<input type="checkbox" tabindex="-1">
698 | 													<div class="container vertical">
699 | 														<div class="block floating vertical"></div>
700 | 														<div class="block vertical">
701 | 															<input type="checkbox" tabindex="-1">
702 | 															<div class="container horizontal">
703 | 																<div class="block floating horizontal"></div>
704 | 																<div class="block horizontal">
705 | 																	<input type="checkbox" tabindex="-1">
706 | 																	<div class="container vertical">
707 | 																		<div class="block floating vertical"></div>
708 | 																		<div class="block vertical">
709 | 																			<input type="checkbox" tabindex="-1">
710 | 																			<div class="container horizontal">
711 | 																				<div class="block floating horizontal"></div>
712 | 																				<div class="block horizontal">
713 | 																					<input type="checkbox" tabindex="-1">
714 | 																					<div class="container vertical">
715 | 																						<div class="block floating vertical"></div>
716 | 																						<div class="block vertical">
717 | 																							<input type="checkbox" tabindex="-1">
718 | 																							<div class="container horizontal">
719 | 																								<div class="block floating horizontal"></div>
720 | 																								<div class="block horizontal">
721 | 																									<input type="checkbox" tabindex="-1">
722 | 																									<div class="container vertical">
723 | 																										<div class="block floating vertical"></div>
724 | 																										<div class="block vertical">
725 | 																											<input type="checkbox" tabindex="-1">
726 | 																											<div class="container horizontal">
727 | 																												<div class="block floating horizontal"></div>
728 | 																												<div class="block horizontal">
729 | 																													<input type="checkbox" tabindex="-1">
730 | 																													<div class="container vertical">
731 | 																														<div class="block floating vertical"></div>
732 | 																														<div class="block vertical">
733 | 																															<input type="checkbox" tabindex="-1">
734 | 																															<div class="container horizontal">
735 | 																																<div class="block floating horizontal"></div>
736 | 																																<div class="block horizontal">
737 | 																																	<input type="checkbox" tabindex="-1">
738 | 																																	<div class="container vertical">
739 | 																																		<div class="block floating vertical"></div>
740 | 																																		<div class="block vertical">
741 | 																																			<input type="checkbox" tabindex="-1">
742 | 																																			<div class="container horizontal">
743 | 																																				<div class="block floating horizontal"></div>
744 | 																																				<div class="block horizontal">
745 | 																																					<input type="checkbox" tabindex="-1">
746 | 																																					<div class="container vertical">
747 | 																																						<div class="block floating vertical"></div>
748 | 																																						<div class="block vertical">
749 | 																																							<input type="checkbox" tabindex="-1">
750 | 																																							<div class="container horizontal">
751 | 																																								<div class="block floating horizontal"></div>
752 | 																																								<div class="block horizontal">
753 | 																																									<input type="checkbox" tabindex="-1">
754 | 																																									<div class="container vertical">
755 | 																																										<div class="block floating vertical"></div>
756 | 																																										<div class="block vertical">
757 | 																																											<input type="checkbox" tabindex="-1">
758 | 																																											<div class="container horizontal">
759 | 																																												<div class="block floating horizontal"></div>
760 | 																																												<div class="block horizontal">
761 | 																																													<input type="checkbox" tabindex="-1">
762 | 																																													<div class="container vertical">
763 | 																																														<div class="block floating vertical"></div>
764 | 																																														<div class="block vertical">
765 | 																																															<input type="checkbox" tabindex="-1">
766 | 																																															<div class="container horizontal">
767 | 																																																<div class="block floating horizontal"></div>
768 | 																																																<div class="block horizontal">
769 | 																																																	<input type="checkbox" tabindex="-1">
770 | 																																																	<div class="container vertical">
771 | 																																																		<div class="block floating vertical"></div>
772 | 																																																		<div class="block vertical">
773 | 																																																			<input type="checkbox" tabindex="-1">
774 | 																																																			<div class="container horizontal">
775 | 																																																				<div class="block floating horizontal"></div>
776 | 																																																				<div class="block horizontal">
777 | 																																																					<input type="checkbox" tabindex="-1">
778 | 																																																					<div class="container vertical">
779 | 																																																						<div class="block floating vertical"></div>
780 | 																																																						<div class="block vertical">
781 | 																																																							<input type="checkbox" tabindex="-1">
782 | 																																																							<div class="container horizontal">
783 | 																																																								<div class="block floating horizontal"></div>
784 | 																																																								<div class="block horizontal">
785 | 																																																									<input type="checkbox" tabindex="-1">
786 | 																																																									<div class="container vertical">
787 | 																																																										<div class="block floating vertical"></div>
788 | 																																																										<div class="block vertical">
789 | 																																																											<input type="checkbox" tabindex="-1">
790 | 																																																											<div class="container horizontal">
791 | 																																																												<div class="block floating horizontal"></div>
792 | 																																																												<div class="block horizontal">
793 | 																																																													<input type="checkbox" tabindex="-1">
794 | 																																																													<div class="container vertical">
795 | 																																																														<div class="block floating vertical"></div>
796 | 																																																														<div class="block vertical">
797 | 																																																															<input type="checkbox" tabindex="-1">
798 | 																																																															<div class="container horizontal">
799 | 																																																																<div class="block floating horizontal"></div>
800 | 																																																																<div class="block horizontal">
801 | 																																																																	<input type="checkbox" tabindex="-1">
802 | 																																																																	<div class="container vertical">
803 | 																																																																		<div class="block floating vertical"></div>
804 | 																																																																		<div class="block vertical">
805 | 																																																																			<input type="checkbox" tabindex="-1">
806 | 																																																																			<div class="container horizontal">
807 | 																																																																				<div class="block floating horizontal"></div>
808 | 																																																																				<div class="block horizontal">
809 | 																																																																					<input type="checkbox" tabindex="-1">
810 | 																																																																					<div class="container vertical">
811 | 																																																																						<div class="block floating vertical"></div>
812 | 																																																																						<div class="block vertical">
813 | 																																																																							<input type="checkbox" tabindex="-1">
814 | 																																																																							<div class="container horizontal">
815 | 																																																																								<div class="block floating horizontal"></div>
816 | 																																																																								<div class="block horizontal">
817 | 																																																																									<input type="checkbox" tabindex="-1">
818 | 																																																																									<div class="container vertical">
819 | 																																																																										<div class="block floating vertical"></div>
820 | 																																																																										<div class="block vertical">
821 | 																																																																											<input type="checkbox" tabindex="-1">
822 | 																																																																											<div class="container horizontal">
823 | 																																																																												<div class="block floating horizontal"></div>
824 | 																																																																												<div class="block horizontal">
825 | 																																																																													<input type="checkbox" tabindex="-1">
826 | 																																																																													<div class="container vertical">
827 | 																																																																														<div class="block floating vertical"></div>
828 | 																																																																														<div class="block vertical">
829 | 																																																																															<input type="checkbox" tabindex="-1">
830 | 																																																																															<div class="container horizontal">
831 | 																																																																																<div class="block floating horizontal"></div>
832 | 																																																																																<div class="block horizontal">
833 | 																																																																																	<input type="checkbox" tabindex="-1">
834 | 																																																																																	<div class="container vertical">
835 | 																																																																																		<div class="block floating vertical"></div>
836 | 																																																																																		<div class="block vertical">
837 | 																																																																																			<input type="checkbox" tabindex="-1">
838 | 																																																																																			<div class="container horizontal">
839 | 																																																																																				<div class="block floating horizontal"></div>
840 | 																																																																																				<div class="block horizontal">
841 | 																																																																																					<input type="checkbox" tabindex="-1">
842 | 																																																																																					<div class="container vertical">
843 | 																																																																																						<div class="block floating vertical"></div>
844 | 																																																																																						<div class="block vertical">
845 | 																																																																																							<input type="checkbox" tabindex="-1">
846 | 																																																																																							<div class="container horizontal">
847 | 																																																																																								<div class="block floating horizontal"></div>
848 | 																																																																																								<div class="block horizontal">
849 | 																																																																																									<input type="checkbox" tabindex="-1">
850 | 																																																																																									<div class="container vertical">
851 | 																																																																																										<div class="block floating vertical"></div>
852 | 																																																																																										<div class="block vertical">
853 | 																																																																																											<input type="checkbox" tabindex="-1">
854 | 																																																																																											<div class="container horizontal">
855 | 																																																																																												<div class="block floating horizontal"></div>
856 | 																																																																																												<div class="block horizontal">
857 | 																																																																																													<input type="checkbox" tabindex="-1">
858 | 																																																																																													<div class="container vertical">
859 | 																																																																																														<div class="block floating vertical"></div>
860 | 																																																																																														<div class="block vertical">
861 | 																																																																																															<input type="checkbox" tabindex="-1">
862 | 																																																																																															<div class="container horizontal">
863 | 																																																																																																<div class="block floating horizontal"></div>
864 | 																																																																																																<div class="block horizontal">
865 | 																																																																																																	<input type="checkbox" tabindex="-1">
866 | 																																																																																																	<div class="container vertical">
867 | 																																																																																																		<div class="block floating vertical"></div>
868 | 																																																																																																		<div class="block vertical">
869 | 																																																																																																			<input type="checkbox" tabindex="-1">
870 | 																																																																																																			<div class="container horizontal">
871 | 																																																																																																				<div class="block floating horizontal"></div>
872 | 																																																																																																				<div class="block horizontal">
873 | 																																																																																																					<label class="last" for="last" tabindex="-1"></label>
874 | 																																																																																																					<div class="container vertical">
875 | 																																																																																																						<div class="block floating vertical"></div>
876 | 																																																																																																						<div class="block vertical">
877 | 																																																																																																							<label class="end horizontal" for="end"></label>
878 | 																																																																																																							<label class="end vertical" for="end"></label>
879 | 																																																																																																						</div>
880 | 																																																																																																					</div>
881 | 																																																																																																				</div>
882 | 																																																																																																			</div>
883 | 																																																																																																		</div>
884 | 																																																																																																	</div>
885 | 																																																																																																</div>
886 | 																																																																																															</div>
887 | 																																																																																														</div>
888 | 																																																																																													</div>
889 | 																																																																																												</div>
890 | 																																																																																											</div>
891 | 																																																																																										</div>
892 | 																																																																																									</div>
893 | 																																																																																								</div>
894 | 																																																																																							</div>
895 | 																																																																																						</div>
896 | 																																																																																					</div>
897 | 																																																																																				</div>
898 | 																																																																																			</div>
899 | 																																																																																		</div>
900 | 																																																																																	</div>
901 | 																																																																																</div>
902 | 																																																																															</div>
903 | 																																																																														</div>
904 | 																																																																													</div>
905 | 																																																																												</div>
906 | 																																																																											</div>
907 | 																																																																										</div>
908 | 																																																																									</div>
909 | 																																																																								</div>
910 | 																																																																							</div>
911 | 																																																																						</div>
912 | 																																																																					</div>
913 | 																																																																				</div>
914 | 																																																																			</div>
915 | 																																																																		</div>
916 | 																																																																	</div>
917 | 																																																																</div>
918 | 																																																															</div>
919 | 																																																														</div>
920 | 																																																													</div>
921 | 																																																												</div>
922 | 																																																											</div>
923 | 																																																										</div>
924 | 																																																									</div>
925 | 																																																								</div>
926 | 																																																							</div>
927 | 																																																						</div>
928 | 																																																					</div>
929 | 																																																				</div>
930 | 																																																			</div>
931 | 																																																		</div>
932 | 																																																	</div>
933 | 																																																</div>
934 | 																																															</div>
935 | 																																														</div>
936 | 																																													</div>
937 | 																																												</div>
938 | 																																											</div>
939 | 																																										</div>
940 | 																																									</div>
941 | 																																								</div>
942 | 																																							</div>
943 | 																																						</div>
944 | 																																					</div>
945 | 																																				</div>
946 | 																																			</div>
947 | 																																		</div>
948 | 																																	</div>
949 | 																																</div>
950 | 																															</div>
951 | 																														</div>
952 | 																													</div>
953 | 																												</div>
954 | 																											</div>
955 | 																										</div>
956 | 																									</div>
957 | 																								</div>
958 | 																							</div>
959 | 																						</div>
960 | 																					</div>
961 | 																				</div>
962 | 																			</div>
963 | 																		</div>
964 | 																	</div>
965 | 																</div>
966 | 															</div>
967 | 														</div>
968 | 													</div>
969 | 												</div>
970 | 											</div>
971 | 										</div>
972 | 									</div>
973 | 								</div>
974 | 							</div>
975 | 						</div>
976 | 					</div>
977 | 				</div>
978 | 			</div>
979 | 		</div>
980 | 		<div class="points"></div>
981 | 		<label class="start" for="start" tabindex="-1">
982 | 			PURE CSS<br>STACK
983 | 		</label>
984 | 		<button type="reset" tabindex="-1">
985 | 			CLICK OR TAP<br>
986 | 			TO RESTART
987 | 		</button>
988 | 	</form>
989 | </body>
990 | 
991 | </html>
992 | 


--------------------------------------------------------------------------------