-
Notifications
You must be signed in to change notification settings - Fork 3
/
ninjutsu.css
1371 lines (1269 loc) · 77.4 KB
/
ninjutsu.css
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
/******************
ninjutsu.css is best coupled with kunoichi.css or shinobi.css
See https://emitanaka.github.io/ninja-theme for an example.
******************/
:root {
--color-red: #f44336;
--color-pink: #E91E63;
--color-purple: #9C27B0;
--color-deep-purple: #673AB7;
--color-indigo: #3F51B5;
--color-blue: #2196F3;
--color-light-blue: #03A9F4;
--color-cyan: #00BCD4;
--color-teal: #009688;
--color-green: #4CAF50;
--color-light-green: #8BC34A;
--color-lime: #CDDC39;
--color-yellow: #FFEB3B;
--color-amber: #FFC107;
--color-orange: #FF9800;
--color-deep-orange: #FF5722;
--color-brown: #795548;
--color-gray: #9E9E9E;
--color-blue-gray: #607D8B;
--color-white: #fff;
--color-black: #000;
}
/*********** figures ***********/
.figb img {
width: 99%;
padding: 0;
margin: 0;
margin-left: -2%;
}
.figb90 img {
width: 90% !important;
padding: 5%;
margin: -2.5%;
}
.fig img {
width: 104%;
padding: 0;
margin: 0;
margin-left: -2%;
}
.fig90 img {
width: 90% !important;
padding: 5%;
margin: 0;
}
.figh img {
height: 100%;
padding: 0;
margin: 0;
margin-left: -2%;
}
.img-fill img { object-fit: fill; height:100%; width:100%; overflow: hidden;}
.img-contain img { object-fit: contain; height:100%; width:100%; overflow: hidden}
.img-cover img { object-fit: cover; height:100%; width:100%; overflow: hidden}
.img-none img { object-fit: none; height:100%; width:100%; }
/*********** background-color ***********/
.bg-red { background-color: var(--color-red); }
.bg-pink { background-color: var(--color-pink); }
.bg-purple { background-color: var(--color-purple); }
.bg-deep-purple { background-color: var(--color-deep-purple); }
.bg-indigo { background-color: var(--color-indigo); }
.bg-blue { background-color: var(--color-blue); }
.bg-light-blue { background-color: var(--color-light-blue); }
.bg-cyan { background-color: var(--color-cyan); }
.bg-teal { background-color: var(--color-teal); }
.bg-green { background-color: var(--color-green); }
.bg-light-green { background-color: var(--color-light-green); }
.bg-lime { background-color: var(--color-lime); }
.bg-yellow { background-color: var(--color-yellow); }
.bg-amber { background-color: var(--color-amber); }
.bg-orange { background-color: var(--color-orange); }
.bg-deep-orange { background-color: var(--color-deep-orange); }
.bg-brown { background-color: var(--color-brown); }
.bg-gray { background-color: var(--color-gray); }
.bg-blue-gray { background-color: var(--color-blue-gray); }
.bg-white { background-color: var(--color-white); }
.bg-black { background-color: var(--color-black); }
/*********** color ***********/
.red { color: var(--color-red); }
.pink { color: var(--color-pink); }
.purple { color: var(--color-purple); }
.deep-purple { color: var(--color-deep-purple); }
.indigo { color: var(--color-indigo); }
.blue { color: var(--color-blue); }
.light-blue { color: var(--color-light-blue); }
.cyan { color: var(--color-cyan); }
.teal { color: var(--color-teal); }
.green { color: var(--color-green); }
.light-green { color: var(--color-light-green); }
.lime { color: var(--color-lime); }
.yellow { color: var(--color-yellow); }
.amber { color: var(--color-amber); }
.orange { color: var(--color-orange); }
.deep-orange { color: var(--color-deep-orange); }
.brown { color: var(--color-brown); }
.gray { color: var(--color-gray); }
.blue-gray { color: var(--color-blue-gray); }
.white { color: var(--color-white); }
.black { color: var(--color-black); }
/*********** border-color ***********/
.border-red>.column:nth-of-type(n+2){ border-left-color: var(--color-red); }
.border-pink>.column:nth-of-type(n+2){ border-left-color: var(--color-pink); }
.border-purple>.column:nth-of-type(n+2){ border-left-color: var(--color-purple); }
.border-deep-purple>.column:nth-of-type(n+2){ border-left-color: var(--color-deep-purple); }
.border-indigo>.column:nth-of-type(n+2){ border-left-color: var(--color-indigo); }
.border-blue>.column:nth-of-type(n+2){ border-left-color: var(--color-blue); }
.border-light-blue>.column:nth-of-type(n+2){ border-left-color: var(--color-light-blue); }
.border-cyan>.column:nth-of-type(n+2){ border-left-color: var(--color-cyan); }
.border-teal>.column:nth-of-type(n+2){ border-left-color: var(--color-teal); }
.border-green>.column:nth-of-type(n+2){ border-left-color: var(--color-green); }
.border-light-green>.column:nth-of-type(n+2){ border-left-color: var(--color-light-green); }
.border-lime>.column:nth-of-type(n+2){ border-left-color: var(--color-lime); }
.border-yellow>.column:nth-of-type(n+2){ border-left-color: var(--color-yellow); }
.border-amber>.column:nth-of-type(n+2){ border-left-color: var(--color-amber); }
.border-orange>.column:nth-of-type(n+2){ border-left-color: var(--color-orange); }
.border-deep-orange>.column:nth-of-type(n+2){ border-left-color: var(--color-deep-orange); }
.border-brown>.column:nth-of-type(n+2){ border-left-color: var(--color-brown); }
.border-gray>.column:nth-of-type(n+2){ border-left-color: var(--color-gray); }
.border-blue-gray>.column:nth-of-type(n+2){ border-left-color: var(--color-blue-gray); }
.border-white >.column:nth-of-type(n+2){ border-left-color: var(--color-white); }
.border-black>.column:nth-of-type(n+2){ border-left-color: var(--color-black); }
.border-red * >.column:nth-of-type(n+2){ border-left-color: var(--color-red); }
.border-pink * >.column:nth-of-type(n+2){ border-left-color: var(--color-pink); }
.border-purple * >.column:nth-of-type(n+2){ border-left-color: var(--color-purple); }
.border-deep-purple * >.column:nth-of-type(n+2){ border-left-color: var(--color-deep-purple); }
.border-indigo * >.column:nth-of-type(n+2){ border-left-color: var(--color-indigo); }
.border-blue * >.column:nth-of-type(n+2){ border-left-color: var(--color-blue); }
.border-light-blue * >.column:nth-of-type(n+2){ border-left-color: var(--color-light-blue); }
.border-cyan * >.column:nth-of-type(n+2){ border-left-color: var(--color-cyan); }
.border-teal * >.column:nth-of-type(n+2){ border-left-color: var(--color-teal); }
.border-green * >.column:nth-of-type(n+2){ border-left-color: var(--color-green); }
.border-light-green * >.column:nth-of-type(n+2){ border-left-color: var(--color-light-green); }
.border-lime * >.column:nth-of-type(n+2){ border-left-color: var(--color-lime); }
.border-yellow * >.column:nth-of-type(n+2){ border-left-color: var(--color-yellow); }
.border-amber * >.column:nth-of-type(n+2){ border-left-color: var(--color-amber); }
.border-orange * >.column:nth-of-type(n+2){ border-left-color: var(--color-orange); }
.border-deep-orange * >.column:nth-of-type(n+2){ border-left-color: var(--color-deep-orange); }
.border-brown * >.column:nth-of-type(n+2){ border-left-color: var(--color-brown); }
.border-gray * >.column:nth-of-type(n+2){ border-left-color: var(--color-gray); }
.border-blue-gray * >.column:nth-of-type(n+2){ border-left-color: var(--color-blue-gray); }
.border-white * >.column:nth-of-type(n+2){ border-left-color: var(--color-white); }
.border-black * >.column:nth-of-type(n+2){ border-left-color: var(--color-black); }
.border-red>.row:nth-of-type(n+2){ border-top-color: var(--color-red); }
.border-pink>.row:nth-of-type(n+2){ border-top-color: var(--color-pink); }
.border-purple>.row:nth-of-type(n+2){ border-top-color: var(--color-purple); }
.border-deep-purple>.row:nth-of-type(n+2){ border-top-color: var(--color-deep-purple); }
.border-indigo>.row:nth-of-type(n+2){ border-top-color: var(--color-indigo); }
.border-blue>.row:nth-of-type(n+2){ border-top-color: var(--color-blue); }
.border-light-blue>.row:nth-of-type(n+2){ border-top-color: var(--color-light-blue); }
.border-cyan>.row:nth-of-type(n+2){ border-top-color: var(--color-cyan); }
.border-teal>.row:nth-of-type(n+2){ border-top-color: var(--color-teal); }
.border-green >.row:nth-of-type(n+2){ border-top-color: var(--color-green)!important; }
.border-light-green>.row:nth-of-type(n+2){ border-top-color: var(--color-light-green); }
.border-lime>.row:nth-of-type(n+2){ border-top-color: var(--color-lime); }
.border-yellow>.row:nth-of-type(n+2){ border-top-color: var(--color-yellow); }
.border-amber>.row:nth-of-type(n+2){ border-top-color: var(--color-amber); }
.border-orange>.row:nth-of-type(n+2){ border-top-color: var(--color-orange); }
.border-deep-orange>.row:nth-of-type(n+2){ border-top-color: var(--color-deep-orange); }
.border-brown>.row:nth-of-type(n+2){ border-top-color: var(--color-brown); }
.border-gray>.row:nth-of-type(n+2){ border-top-color: var(--color-gray); }
.border-blue-gray>.row:nth-of-type(n+2){ border-top-color: var(--color-blue-gray); }
.border-white>.row:nth-of-type(n+2){ border-top-color: var(--color-white); }
.border-black>.row:nth-of-type(n+2){ border-top-color: var(--color-black); }
.border-red * >.row:nth-of-type(n+2){ border-top-color: var(--color-red); }
.border-pink * >.row:nth-of-type(n+2){ border-top-color: var(--color-pink); }
.border-purple * >.row:nth-of-type(n+2){ border-top-color: var(--color-purple); }
.border-deep-purple * >.row:nth-of-type(n+2){ border-top-color: var(--color-deep-purple); }
.border-indigo * >.row:nth-of-type(n+2){ border-top-color: var(--color-indigo); }
.border-blue * >.row:nth-of-type(n+2){ border-top-color: var(--color-blue); }
.border-light-blue * >.row:nth-of-type(n+2){ border-top-color: var(--color-light-blue); }
.border-cyan * >.row:nth-of-type(n+2){ border-top-color: var(--color-cyan); }
.border-teal * >.row:nth-of-type(n+2){ border-top-color: var(--color-teal); }
.border-green >.row:nth-of-type(n+2){ border-top-color: var(--color-green); }
.border-light-green * >.row:nth-of-type(n+2){ border-top-color: var(--color-light-green); }
.border-lime * >.row:nth-of-type(n+2){ border-top-color: var(--color-lime); }
.border-yellow * >.row:nth-of-type(n+2){ border-top-color: var(--color-yellow); }
.border-amber * >.row:nth-of-type(n+2){ border-top-color: var(--color-amber); }
.border-orange * >.row:nth-of-type(n+2){ border-top-color: var(--color-orange); }
.border-deep-orange * >.row:nth-of-type(n+2){ border-top-color: var(--color-deep-orange); }
.border-brown * >.row:nth-of-type(n+2){ border-top-color: var(--color-brown); }
.border-gray * >.row:nth-of-type(n+2){ border-top-color: var(--color-gray); }
.border-blue-gray * >.row:nth-of-type(n+2){ border-top-color: var(--color-blue-gray); }
.border-white * >.row:nth-of-type(n+2){ border-top-color: var(--color-white); }
.border-black * >.row:nth-of-type(n+2){ border-top-color: var(--color-black); }
.border-red>.blade1:before{ border-bottom-color: var(--color-red); }
.border-pink>.blade1:before{ border-bottom-color: var(--color-pink); }
.border-purple>.blade1:before{ border-bottom-color: var(--color-purple); }
.border-deep-purple>.blade1:before{ border-bottom-color: var(--color-deep-purple); }
.border-indigo>.blade1:before{ border-bottom-color: var(--color-indigo); }
.border-blue>.blade1:before{ border-bottom-color: var(--color-blue); }
.border-light-blue>.blade1:before{ border-bottom-color: var(--color-light-blue); }
.border-cyan>.blade1:before{ border-bottom-color: var(--color-cyan); }
.border-teal>.blade1:before{ border-bottom-color: var(--color-teal); }
.border-green >.blade1:before{ border-bottom-color: var(--color-green); }
.border-light-green>.blade1:before{ border-bottom-color: var(--color-light-green); }
.border-lime>.blade1:before{ border-bottom-color: var(--color-lime); }
.border-yellow>.blade1:before{ border-bottom-color: var(--color-yellow); }
.border-amber>.blade1:before{ border-bottom-color: var(--color-amber); }
.border-orange>.blade1:before{ border-bottom-color: var(--color-orange); }
.border-deep-orange>.blade1:before{ border-bottom-color: var(--color-deep-orange); }
.border-brown>.blade1:before{ border-bottom-color: var(--color-brown); }
.border-gray>.blade1:before{ border-bottom-color: var(--color-gray); }
.border-blue-gray>.blade1:before{ border-bottom-color: var(--color-blue-gray); }
.border-white>.blade1:before{ border-bottom-color: var(--color-white); }
.border-black>.blade1:before{ border-bottom-color: var(--color-black); }
.border-red * >.blade1:before{ border-bottom-color: var(--color-red); }
.border-pink * >.blade1:before{ border-bottom-color: var(--color-pink); }
.border-purple * >.blade1:before{ border-bottom-color: var(--color-purple); }
.border-deep-purple * >.blade1:before{ border-bottom-color: var(--color-deep-purple); }
.border-indigo * >.blade1:before{ border-bottom-color: var(--color-indigo); }
.border-blue * >.blade1:before{ border-bottom-color: var(--color-blue); }
.border-light-blue * >.blade1:before{ border-bottom-color: var(--color-light-blue); }
.border-cyan * >.blade1:before{ border-bottom-color: var(--color-cyan); }
.border-teal * >.blade1:before{ border-bottom-color: var(--color-teal); }
.border-green >.blade1:before{ border-bottom-color: var(--color-green); }
.border-light-green * >.blade1:before{ border-bottom-color: var(--color-light-green); }
.border-lime * >.blade1:before{ border-bottom-color: var(--color-lime); }
.border-yellow * >.blade1:before{ border-bottom-color: var(--color-yellow); }
.border-amber * >.blade1:before{ border-bottom-color: var(--color-amber); }
.border-orange * >.blade1:before{ border-bottom-color: var(--color-orange); }
.border-deep-orange * >.blade1:before{ border-bottom-color: var(--color-deep-orange); }
.border-brown * >.blade1:before{ border-bottom-color: var(--color-brown); }
.border-gray * >.blade1:before{ border-bottom-color: var(--color-gray); }
.border-blue-gray * >.blade1:before{ border-bottom-color: var(--color-blue-gray); }
.border-white * >.blade1:before{ border-bottom-color: var(--color-white); }
.border-black * >.blade1:before{ border-bottom-color: var(--color-black); }
.border-red>.blade2:before{ border-left-color: var(--color-red); }
.border-pink>.blade2:before{ border-left-color: var(--color-pink); }
.border-purple>.blade2:before{ border-left-color: var(--color-purple); }
.border-deep-purple>.blade2:before{ border-left-color: var(--color-deep-purple); }
.border-indigo>.blade2:before{ border-left-color: var(--color-indigo); }
.border-blue>.blade2:before{ border-left-color: var(--color-blue); }
.border-light-blue>.blade2:before{ border-left-color: var(--color-light-blue); }
.border-cyan>.blade2:before{ border-left-color: var(--color-cyan); }
.border-teal>.blade2:before{ border-left-color: var(--color-teal); }
.border-green >.blade2:before{ border-left-color: var(--color-green); }
.border-light-green>.blade2:before{ border-left-color: var(--color-light-green); }
.border-lime>.blade2:before{ border-left-color: var(--color-lime); }
.border-yellow>.blade2:before{ border-left-color: var(--color-yellow); }
.border-amber>.blade2:before{ border-left-color: var(--color-amber); }
.border-orange>.blade2:before{ border-left-color: var(--color-orange); }
.border-deep-orange>.blade2:before{ border-left-color: var(--color-deep-orange); }
.border-brown>.blade2:before{ border-left-color: var(--color-brown); }
.border-gray>.blade2:before{ border-left-color: var(--color-gray); }
.border-blue-gray>.blade2:before{ border-left-color: var(--color-blue-gray); }
.border-white>.blade2:before{ border-left-color: var(--color-white); }
.border-black>.blade2:before{ border-left-color: var(--color-black); }
.border-red * >.blade2:before{ border-left-color: var(--color-red); }
.border-pink * >.blade2:before{ border-left-color: var(--color-pink); }
.border-purple * >.blade2:before{ border-left-color: var(--color-purple); }
.border-deep-purple * >.blade2:before{ border-left-color: var(--color-deep-purple); }
.border-indigo * >.blade2:before{ border-left-color: var(--color-indigo); }
.border-blue * >.blade2:before{ border-left-color: var(--color-blue); }
.border-light-blue * >.blade2:before{ border-left-color: var(--color-light-blue); }
.border-cyan * >.blade2:before{ border-left-color: var(--color-cyan); }
.border-teal * >.blade2:before{ border-left-color: var(--color-teal); }
.border-green >.blade2:before{ border-left-color: var(--color-green); }
.border-light-green * >.blade2:before{ border-left-color: var(--color-light-green); }
.border-lime * >.blade2:before{ border-left-color: var(--color-lime); }
.border-yellow * >.blade2:before{ border-left-color: var(--color-yellow); }
.border-amber * >.blade2:before{ border-left-color: var(--color-amber); }
.border-orange * >.blade2:before{ border-left-color: var(--color-orange); }
.border-deep-orange * >.blade2:before{ border-left-color: var(--color-deep-orange); }
.border-brown * >.blade2:before{ border-left-color: var(--color-brown); }
.border-gray * >.blade2:before{ border-left-color: var(--color-gray); }
.border-blue-gray * >.blade2:before{ border-left-color: var(--color-blue-gray); }
.border-white * >.blade2:before{ border-left-color: var(--color-white); }
.border-black * >.blade2:before{ border-left-color: var(--color-black); }
.border-red>.blade3:before{ border-top-color: var(--color-red); }
.border-pink>.blade3:before{ border-top-color: var(--color-pink); }
.border-purple>.blade3:before{ border-top-color: var(--color-purple); }
.border-deep-purple>.blade3:before{ border-top-color: var(--color-deep-purple); }
.border-indigo>.blade3:before{ border-top-color: var(--color-indigo); }
.border-blue>.blade3:before{ border-top-color: var(--color-blue); }
.border-light-blue>.blade3:before{ border-top-color: var(--color-light-blue); }
.border-cyan>.blade3:before{ border-top-color: var(--color-cyan); }
.border-teal>.blade3:before{ border-top-color: var(--color-teal); }
.border-green >.blade3:before{ border-top-color: var(--color-green); }
.border-light-green>.blade3:before{ border-top-color: var(--color-light-green); }
.border-lime>.blade3:before{ border-top-color: var(--color-lime); }
.border-yellow>.blade3:before{ border-top-color: var(--color-yellow); }
.border-amber>.blade3:before{ border-top-color: var(--color-amber); }
.border-orange>.blade3:before{ border-top-color: var(--color-orange); }
.border-deep-orange>.blade3:before{ border-top-color: var(--color-deep-orange); }
.border-brown>.blade3:before{ border-top-color: var(--color-brown); }
.border-gray>.blade3:before{ border-top-color: var(--color-gray); }
.border-blue-gray>.blade3:before{ border-top-color: var(--color-blue-gray); }
.border-white>.blade3:before{ border-top-color: var(--color-white); }
.border-black>.blade3:before{ border-top-color: var(--color-black); }
.border-red * >.blade3:before{ border-top-color: var(--color-red); }
.border-pink * >.blade3:before{ border-top-color: var(--color-pink); }
.border-purple * >.blade3:before{ border-top-color: var(--color-purple); }
.border-deep-purple * >.blade3:before{ border-top-color: var(--color-deep-purple); }
.border-indigo * >.blade3:before{ border-top-color: var(--color-indigo); }
.border-blue * >.blade3:before{ border-top-color: var(--color-blue); }
.border-light-blue * >.blade3:before{ border-top-color: var(--color-light-blue); }
.border-cyan * >.blade3:before{ border-top-color: var(--color-cyan); }
.border-teal * >.blade3:before{ border-top-color: var(--color-teal); }
.border-green >.blade3:before{ border-top-color: var(--color-green); }
.border-light-green * >.blade3:before{ border-top-color: var(--color-light-green); }
.border-lime * >.blade3:before{ border-top-color: var(--color-lime); }
.border-yellow * >.blade3:before{ border-top-color: var(--color-yellow); }
.border-amber * >.blade3:before{ border-top-color: var(--color-amber); }
.border-orange * >.blade3:before{ border-top-color: var(--color-orange); }
.border-deep-orange * >.blade3:before{ border-top-color: var(--color-deep-orange); }
.border-brown * >.blade3:before{ border-top-color: var(--color-brown); }
.border-gray * >.blade3:before{ border-top-color: var(--color-gray); }
.border-blue-gray * >.blade3:before{ border-top-color: var(--color-blue-gray); }
.border-white * >.blade3:before{ border-top-color: var(--color-white); }
.border-black * >.blade3:before{ border-top-color: var(--color-black); }
.border-red>.blade4:before{ border-right-color: var(--color-red); }
.border-pink>.blade4:before{ border-right-color: var(--color-pink); }
.border-purple>.blade4:before{ border-right-color: var(--color-purple); }
.border-deep-purple>.blade4:before{ border-right-color: var(--color-deep-purple); }
.border-indigo>.blade4:before{ border-right-color: var(--color-indigo); }
.border-blue>.blade4:before{ border-right-color: var(--color-blue); }
.border-light-blue>.blade4:before{ border-right-color: var(--color-light-blue); }
.border-cyan>.blade4:before{ border-right-color: var(--color-cyan); }
.border-teal>.blade4:before{ border-right-color: var(--color-teal); }
.border-green >.blade4:before{ border-right-color: var(--color-green); }
.border-light-green>.blade4:before{ border-right-color: var(--color-light-green); }
.border-lime>.blade4:before{ border-right-color: var(--color-lime); }
.border-yellow>.blade4:before{ border-right-color: var(--color-yellow); }
.border-amber>.blade4:before{ border-right-color: var(--color-amber); }
.border-orange>.blade4:before{ border-right-color: var(--color-orange); }
.border-deep-orange>.blade4:before{ border-right-color: var(--color-deep-orange); }
.border-brown>.blade4:before{ border-right-color: var(--color-brown); }
.border-gray>.blade4:before{ border-right-color: var(--color-gray); }
.border-blue-gray>.blade4:before{ border-right-color: var(--color-blue-gray); }
.border-white>.blade4:before{ border-right-color: var(--color-white); }
.border-black>.blade4:before{ border-right-color: var(--color-black); }
.border-red * >.blade4:before{ border-right-color: var(--color-red); }
.border-pink * >.blade4:before{ border-right-color: var(--color-pink); }
.border-purple * >.blade4:before{ border-right-color: var(--color-purple); }
.border-deep-purple * >.blade4:before{ border-right-color: var(--color-deep-purple); }
.border-indigo * >.blade4:before{ border-right-color: var(--color-indigo); }
.border-blue * >.blade4:before{ border-right-color: var(--color-blue); }
.border-light-blue * >.blade4:before{ border-right-color: var(--color-light-blue); }
.border-cyan * >.blade4:before{ border-right-color: var(--color-cyan); }
.border-teal * >.blade4:before{ border-right-color: var(--color-teal); }
.border-green >.blade4:before{ border-right-color: var(--color-green); }
.border-light-green * >.blade4:before{ border-right-color: var(--color-light-green); }
.border-lime * >.blade4:before{ border-right-color: var(--color-lime); }
.border-yellow * >.blade4:before{ border-right-color: var(--color-yellow); }
.border-amber * >.blade4:before{ border-right-color: var(--color-amber); }
.border-orange * >.blade4:before{ border-right-color: var(--color-orange); }
.border-deep-orange * >.blade4:before{ border-right-color: var(--color-deep-orange); }
.border-brown * >.blade4:before{ border-right-color: var(--color-brown); }
.border-gray * >.blade4:before{ border-right-color: var(--color-gray); }
.border-blue-gray * >.blade4:before{ border-right-color: var(--color-blue-gray); }
.border-white * >.blade4:before{ border-right-color: var(--color-white); }
.border-black * >.blade4:before{ border-right-color: var(--color-black); }
/*********** border-style ***********/
.border-dotted * >.column:nth-of-type(n+2){ border-left-style: dotted;}
.border-dashed * >.column:nth-of-type(n+2){ border-left-style: dashed;}
.border-solid * >.column:nth-of-type(n+2){ border-left-style: solid;}
.border-double * >.column:nth-of-type(n+2){ border-left-style: double;}
.border-dotted * >.row:nth-of-type(n+2){ border-top-style: dotted;}
.border-dashed * >.row:nth-of-type(n+2){ border-top-style: dashed;}
.border-solid * >.row:nth-of-type(n+2){ border-top-style: solid;}
.border-double * >.row:nth-of-type(n+2){ border-top-style: double;}
.border-dotted >.blade1:before{ border-bottom-style: dotted!important;}
.border-dotted >.blade2:before{ border-left-style: dotted!important;}
.border-dotted >.blade3:before{ border-top-style: dotted!important;}
.border-dotted >.blade4:before{ border-right-style: dotted!important;}
.border-dashed >.blade1:before{ border-bottom-style: dashed!important;}
.border-dashed >.blade2:before{ border-left-style: dashed!important;}
.border-dashed >.blade3:before{ border-top-style: dashed!important;}
.border-dashed >.blade4:before{ border-right-style: dashed!important;}
.border-solid >.blade1:before{ border-bottom-style: solid!important;}
.border-solid >.blade2:before{ border-left-style: solid!important;}
.border-solid >.blade3:before{ border-top-style: solid!important;}
.border-solid >.blade4:before{ border-right-style: solid!important;}
.border-double >.blade1:before{ border-bottom-style: double!important;}
.border-double >.blade2:before{ border-left-style: double!important;}
.border-double >.blade3:before{ border-top-style: double!important;}
.border-double >.blade4:before{ border-right-style: double!important;}
/*********** misc ***********/
.font_small {font-size: 0.5em;}
.font_medium {font-size: 1.25em;}
.font_large {font-size: 1.5em;}
.font1 {font-size: 1em;}
.font2 {font-size: 2em;}
.font3 {font-size: 3em;}
.font4 {font-size: 4em;}
.font5 {font-size: 5em;}
.hide-slide-number .remark-slide-number { display: none; }
.boxshadow
{
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
}
.vmiddle {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.pad10px{ padding: 10px; }
.pad1{ padding: 1em; }
.remark-slide-content .vmiddle h1 {margin-top: 0;}
/************* code ****************/
.nopadding {
padding: 0!important;
}
.nopadding > p {
padding: 0!important;
-webkit-margin-before:0;
-webkit-margin-after:0;
}
.fullcode pre code {
overflow-y: scroll;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 20px 20px !important;
}
.pushdown { margin-top: 12em; }
.pushfront { z-index: 2; }
.opacity5 { opacity: .5; }
.opacity7 { opacity: .7; }
.opacity10 { opacity: 1!important; }
.top_40 { top: 40% !important;}
.top_60 { top: 60% !important;}
.top_70 { top: 70% !important;}
.top_80 { top: 80% !important;}
.bottom_abs { position: absolute; bottom: 0; z-index:1;}
.top_abs { position: absolute; top: 0; z-index:1;}
.width100 {width: 100%!important;}
/************* splits ****************/
.nosplit>.column:first-of-type {width: 100%; height:100%; position: absolute; top: 0; left: 0; }
.split-33>.column:first-of-type {width: 33.33333333333%; height:100%; position: absolute; top: 0; left: 0; }
.split-33>.column:nth-of-type(2) {width: 66.66666666667%;height:100%;position: absolute;top: 0;right: 0;}
.split-66>.column:first-of-type {width: 66.66666666667%; height:100%; position: absolute; top: 0; left: 0; }
.split-66>.column:nth-of-type(2) {width: 33.33333333333%;height:100%;position: absolute;top: 0;right: 0;}
.split-25>.column:first-of-type {width: 25%; height:100%; position: absolute; top: 0; left: 0; }
.split-25>.column:nth-of-type(2) {width: 75%;height:100%;position: absolute;top: 0;right: 0;}
.split-75>.column:first-of-type {width: 75%; height:100%; position: absolute; top: 0; left: 0; }
.split-75>.column:nth-of-type(2) {width: 25%;height:100%;position: absolute;top: 0;right: 0;}
.split-10>.column:first-of-type {width: 10%; height:100%; position: absolute; top: 0; left: 0; }
.split-10>.column:nth-of-type(2) {width: 90%;height:100%;position: absolute;top: 0;right: 0;}
.split-20>.column:first-of-type {width: 20%; height:100%; position: absolute; top: 0; left: 0; }
.split-20>.column:nth-of-type(2) {width: 80%;height:100%;position: absolute;top: 0;right: 0;}
.split-30>.column:first-of-type {width: 30%; height:100%; position: absolute; top: 0; left: 0; }
.split-30>.column:nth-of-type(2) {width: 70%;height:100%;position: absolute;top: 0;right: 0;}
.split-40>.column:first-of-type {width: 40%; height:100%; position: absolute; top: 0; left: 0; }
.split-40>.column:nth-of-type(2) {width: 60%; height:100%; position: absolute; top: 0; right: 0;}
.split-50>.column:first-of-type {width: 50%; height:100%; position: absolute; top: 0; left: 0; }
.split-50>.column:nth-of-type(2) {width: 50%; height:100%; position: absolute; top: 0; right: 0;}
.split-60>.column:first-of-type {width: 60%; height:100%; position: absolute; top: 0; left: 0;}
.split-60>.column:nth-of-type(2) {width: 40%; height:100%; position: absolute; top: 0; right: 0;}
.split-70>.column:first-of-type {width: 70%; height:100%; position: absolute; top: 0; left: 0; }
.split-70>.column:nth-of-type(2) {width: 30%; height:100%; position: absolute; top: 0; right: 0;}
.split-two>.column:first-of-type {width: 50%; height:100%; position: absolute; top: 0; left: 0; }
.split-two>.column:nth-of-type(2) {width: 50%; height:100%; position: absolute; top: 0; right: 0;}
.split-three>.column:first-of-type {width: 33.33333333333%; height:100%; position: absolute; top: 0; left: 0; }
.split-three>.column:nth-of-type(2) {width: 33.33333333333%; height:100%; position: absolute; top: 0; left: 33.33333333333%;}
.split-three>.column:nth-of-type(3) {width: 33.33333333333%; height:100%; position: absolute; top: 0; right: 0;}
.split-four>.column:first-of-type {width: 25%; height:100%; position: absolute; top: 0; left: 0; }
.split-four>.column:nth-of-type(2) {width: 25%; height:100%; position: absolute; top: 0; left: 25%;}
.split-four>.column:nth-of-type(3) {width: 25%; height:100%; position: absolute; top: 0; right: 25%;}
.split-four>.column:nth-of-type(4) {width: 25%; height:100%; position: absolute; top: 0; right: 0;}
.split-five>.column:first-of-type {width: 20%; height:100%; position: absolute; top: 0; left: 0; }
.split-five>.column:nth-of-type(2) {width: 20%; height:100%; position: absolute; top: 0; left: 20%;}
.split-five>.column:nth-of-type(3) {width: 20%; height:100%; position: absolute; top: 0; left: 40%;}
.split-five>.column:nth-of-type(4) {width: 20%; height:100%; position: absolute; top: 0; right: 20%;}
.split-five>.column:nth-of-type(5) {width: 20%; height:100%; position: absolute; top: 0; right: 0;}
.split-2-1-1>.column:first-of-type {width: 50%; height:100%; position: absolute; top: 0; left: 0; }
.split-2-1-1>.column:nth-of-type(2) {width: 25%; height:100%; position: absolute; top: 0; right: 25%;}
.split-2-1-1>.column:nth-of-type(3) {width: 25%; height:100%; position: absolute; top: 0; right: 0;}
.split-1-1-2>.column:first-of-type {width: 25%; height:100%; position: absolute; top: 0; left: 0; }
.split-1-1-2>.column:nth-of-type(2) {width: 25%; height:100%; position: absolute; top: 0; left: 25%;}
.split-1-1-2>.column:nth-of-type(3) {width: 50%; height:100%; position: absolute; top: 0; right: 0;}
.split-1-2-1>.column:first-of-type {width: 25%; height:100%; position: absolute; top: 0; left: 0; }
.split-1-2-1>.column:nth-of-type(2) {width: 50%; height:100%; position: absolute; top: 0; left: 25%;}
.split-1-2-1>.column:nth-of-type(3) {width: 25%; height:100%; position: absolute; top: 0; right: 0;}
.with-border * >.column:nth-of-type(n+2) {
border-left-width: 2px;
border-left-style: solid;
}
.with-thick-border * >.column:nth-of-type(n+2) {
border-left-width: 0.5em;
border-left-style: solid;
}
.with-border * >.row:nth-of-type(n+2) {
border-top-width: 2px;
border-top-style: solid;
}
.with-thick-border * >.row:nth-of-type(n+2) {
border-top-width: 0.5em;
border-top-style: solid;
}
.with-border >.column:nth-of-type(n+2) {
border-left-width: 2px;
border-left-style: solid;
}
.with-thick-border >.column:nth-of-type(n+2) {
border-left-width: 0.5em;
border-left-style: solid;
}
.with-border >.row:nth-of-type(n+2) {
border-top-width: 2px;
border-top-style: solid;
}
.with-thick-border >.row:nth-of-type(n+2) {
border-top-width: 0.5em;
border-top-style: solid;
}
.with-border > .blade1:before {
border-bottom-width: 2px;
border-bottom-style: solid;
width: 100%;
height: calc(100% - 2px);
}
.with-border > .blade2:before {
border-left-width: 2px;
border-left-style: solid;
width: calc(100% - 2px);
height:100%;
}
.with-border > .blade3:before {
border-top-width: 2px;
border-top-style: solid;
height: calc(100% - 2px);
width: 100%;
}
.with-border > .blade4:before {
border-right-width: 2px;
border-right-style: solid;
width: calc(100% - 2px);
height: 100%;
}
.with-thick-border > .blade1:before {
border-bottom-width: 0.5em;
border-bottom-style: solid;
width: 100%;
height: calc(100% - 0.5em);
}
.with-thick-border > .blade2:before {
border-left-width: 0.5em;
border-left-style: solid;
width: calc(100% - 0.5em);
height:100%;
}
.with-thick-border > .blade3:before {
border-top-width: 0.5em;
border-top-style: solid;
height: calc(100% - 0.5em);
width: 100%;
}
.with-thick-border > .blade4:before {
border-right-width: 0.5em;
border-right-style: solid;
width: calc(100% - 0.5em);
height: 100%;
}
.hide-col1 > .column:first-of-type>.content {visibility: hidden;}
.hide-col2 > .column:nth-of-type(2)>.content {visibility: hidden;}
.hide-col3 > .column:nth-of-type(3)>.content {visibility: hidden;}
.hide-col4 > .column:nth-of-type(4)>.content {visibility: hidden;}
.hide-col5 > .column:nth-of-type(5)>.content {visibility: hidden;}
.hide-col1 * > .column:first-of-type>.content {visibility: hidden;}
.hide-col2 * > .column:nth-of-type(2)>.content {visibility: hidden;}
.hide-col3 * > .column:nth-of-type(3)>.content {visibility: hidden;}
.hide-col4 * > .column:nth-of-type(4)>.content {visibility: hidden;}
.hide-col5 * > .column:nth-of-type(5)>.content {visibility: hidden;}
.fade-col1 > .column:first-of-type>.content{opacity: 0.3;}
.fade-col2 > .column:nth-of-type(2)>.content{opacity: 0.3;}
.fade-col3 > .column:nth-of-type(3)>.content{opacity: 0.3;}
.fade-col4 > .column:nth-of-type(4)>.content{opacity: 0.3;}
.fade-col5 > .column:nth-of-type(5)>.content{opacity: 0.3;}
.fade-col1 * > .column:first-of-type>.content{opacity: 0.3;}
.fade-col2 * > .column:nth-of-type(2)>.content{opacity: 0.3;}
.fade-col3 * > .column:nth-of-type(3)>.content{opacity: 0.3;}
.fade-col4 * > .column:nth-of-type(4)>.content{opacity: 0.3;}
.fade-col5 * > .column:nth-of-type(5)>.content{opacity: 0.3;}
.gray-col1 * > .column:first-of-type>.content,
.gray-col2 * > .column:nth-of-type(2)>.content,
.gray-col3 * > .column:nth-of-type(3)>.content,
.gray-col4 * > .column:nth-of-type(4)>.content,
.gray-col5 * > .column:nth-of-type(5)>.content,
.gray-col1 > .column:first-of-type>.content,
.gray-col2 > .column:nth-of-type(2)>.content,
.gray-col3 > .column:nth-of-type(3)>.content,
.gray-col3 > .column:nth-of-type(4)>.content,
.gray-col3 > .column:nth-of-type(5)>.content
{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
.gray-col1 * > .column:first-of-type,
.gray-col2 * > .column:nth-of-type(2),
.gray-col3 * > .column:nth-of-type(3),
.gray-col4 * > .column:nth-of-type(4),
.gray-col5 * > .column:nth-of-type(5),
.gray-col1 > .column:first-of-type,
.gray-col2 > .column:nth-of-type(2),
.gray-col3 > .column:nth-of-type(3),
.gray-col3 > .column:nth-of-type(4),
.gray-col3 > .column:nth-of-type(5)
{
background-color: rgba(197, 197, 197, 1)
}
.nosplit>.row:first-of-type {height: 100%; width:100%; position: absolute; top: 0; left: 0; }
.split-33>.row:first-of-type {height: 33.33333333333%; width:100%; position: absolute; top: 0; left: 0; }
.split-33>.row:nth-of-type(2) {height: 66.66666666667%;width:100%;position: absolute;bottom: 0;left: 0;}
.split-66>.row:first-of-type {height: 66.66666666667%; width:100%; position: absolute; top: 0; left: 0; }
.split-66>.row:nth-of-type(2) {height: 33.33333333333%;width:100%;position: absolute; bottom: 0;left: 0;}
.split-25>.row:first-of-type {height: 25%; width:100%; position: absolute; top: 0; left: 0; }
.split-25>.row:nth-of-type(2) {height: 75%;width:100%;position: absolute; bottom: 0;left: 0;}
.split-75>.row:first-of-type {height: 75%; width:100%; position: absolute; top: 0; left: 0; }
.split-75>.row:nth-of-type(2) {height: 25%;width:100%;position: absolute; bottom: 0;left: 0;}
.split-10>.row:first-of-type {height: 10%; width:100%; position: absolute; top: 0; left: 0; }
.split-10>.row:nth-of-type(2) {height: 90%;width:100%;position: absolute; bottom: 0;left: 0;}
.split-20>.row:first-of-type {height: 20%; width:100%; position: absolute; top: 0; left: 0; }
.split-20>.row:nth-of-type(2) {height: 80%;width:100%;position: absolute; bottom: 0;left: 0;}
.split-30>.row:first-of-type {height: 30%; width:100%; position: absolute; top: 0; left: 0; }
.split-30>.row:nth-of-type(2) {height: 70%;width:100%;position: absolute; bottom: 0;left: 0;}
.split-40>.row:first-of-type {height: 40%; width:100%; position: absolute; top: 0; left: 0; }
.split-40>.row:nth-of-type(2) {height: 60%; width:100%; position: absolute; bottom: 0; left: 0;}
.split-50>.row:first-of-type {height: 50%; width:100%; position: absolute; top: 0; left: 0; }
.split-50>.row:nth-of-type(2) {height: 50%; width:100%; position: absolute; bottom: 0; left: 0;}
.split-60>.row:first-of-type {height: 60%; width:100%; position: absolute; top: 0; left: 0;}
.split-60>.row:nth-of-type(2) {height: 40%; width:100%; position: absolute; bottom: 0; left: 0;}
.split-70>.row:first-of-type {height: 70%; width:100%; position: absolute; top: 0; left: 0; }
.split-70>.row:nth-of-type(2) {height: 30%; width:100%; position: absolute; bottom: 0; left: 0;}
.split-two>.row:first-of-type {height: 50%; width:100%; position: absolute; top: 0; left: 0; }
.split-two>.row:nth-of-type(2) {height: 50%; width:100%; position: absolute; bottom: 0; left: 0;}
.split-three>.row:first-of-type {height: 33.33333333333%; width:100%; position: absolute; top: 0; left: 0; }
.split-three>.row:nth-of-type(2) {height: 33.33333333333%; width:100%; position: absolute; left: 0; top: 33.33333333333%;}
.split-three>.row:nth-of-type(3) {height: 33.33333333333%; width:100%; position: absolute; bottom: 0; left: 0;}
.split-four>.row:first-of-type {height: 25%; width:100%; position: absolute; left: 0; top: 0; }
.split-four>.row:nth-of-type(2) {height: 25%; width:100%; position: absolute; left: 0; top: 25%;}
.split-four>.row:nth-of-type(3) {height: 25%; width:100%; position: absolute; left: 0; bottom: 25%;}
.split-four>.row:nth-of-type(4) {height: 25%; width:100%; position: absolute; left: 0; bottom: 0;}
.split-five>.row:first-of-type {height: 20%; width:100%; position: absolute; left: 0; top: 0; }
.split-five>.row:nth-of-type(2) {height: 20%; width:100%; position: absolute; left: 0; top: 20%;}
.split-five>.row:nth-of-type(3) {height: 20%; width:100%; position: absolute; left: 0; top: 40%;}
.split-five>.row:nth-of-type(4) {height: 20%; width:100%; position: absolute; left: 0; bottom: 20%;}
.split-five>.row:nth-of-type(5) {height: 20%; width:100%; position: absolute; left: 0; bottom: 0;}
.split-2-1-1>.row:first-of-type {height: 50%; width:100%; position: absolute; top: 0; left: 0; }
.split-2-1-1>.row:nth-of-type(2) {height: 25%; width:100%; position: absolute; left: 0; bottom: 25%;}
.split-2-1-1>.row:nth-of-type(3) {height: 25%; width:100%; position: absolute; bottom: 0; left: 0;}
.split-1-1-2>.row:first-of-type {height: 25%; width:100%; position: absolute; top: 0; left: 0; }
.split-1-1-2>.row:nth-of-type(2) {height: 25%; width:100%; position: absolute; left: 0; top: 25%;}
.split-1-1-2>.row:nth-of-type(3) {height: 50%; width:100%; position: absolute; bottom: 0; left: 0;}
.split-1-2-1>.row:first-of-type {height: 25%; width:100%; position: absolute; top: 0; left: 0; }
.split-1-2-1>.row:nth-of-type(2) {height: 50%; width:100%; position: absolute; left: 0; top: 25%;}
.split-1-2-1>.row:nth-of-type(3) {height: 25%; width:100%; position: absolute; bottom: 0; left: 0;}
.blade1:before, .blade2:before, .blade3:before, .blade4:before, .hole:before {
content: "";
top: 0;
left: 0;
position: absolute;
}
.shuriken-100>.blade1 {height: 100px; width:calc(100% - 100px); position: absolute; top: 0; left: 0;}
.shuriken-100>.blade2 {height: calc(100% - 100px); width:100px; position: absolute; top: 0; right: 0;}
.shuriken-100>.blade3 {height: 100px; width:calc(100% - 100px); position: absolute; bottom: 0; right: 0;}
.shuriken-100>.blade4 {height: calc(100% - 100px); width:100px; position: absolute; bottom: 0; left: 0;}
.shuriken-100>.hole {height: calc(100% - 200px); width:calc(100% - 200px); position: absolute; top: 100px; left: 100px;}
.shuriken-200>.blade1 {height: 200px; width:calc(100% - 200px); position: absolute; top: 0; left: 0;}
.shuriken-200>.blade2 {height: calc(100% - 200px); width:200px; position: absolute; top: 0; right: 0;}
.shuriken-200>.blade3 {height: 200px; width:calc(100% - 200px); position: absolute; bottom: 0; right: 0;}
.shuriken-200>.blade4 {height: calc(100% - 200px); width:200px; position: absolute; bottom: 0; left: 0;}
.shuriken-200>.hole {height: calc(100% - 400px); width:calc(100% - 400px); position: absolute; top: 200px; left: 200px;}
.shuriken-300>.blade1 {height: 300px; width:calc(100% - 300px); position: absolute; top: 0; left: 0;}
.shuriken-300>.blade2 {height: calc(100% - 300px); width:300px; position: absolute; top: 0; right: 0;}
.shuriken-300>.blade3 {height: 300px; width:calc(100% - 300px); position: absolute; bottom: 0; right: 0;}
.shuriken-300>.blade4 {height: calc(100% - 300px); width:300px; position: absolute; bottom: 0; left: 0;}
.shuriken-300>.hole {height: calc(100% - 600px); width:calc(100% - 600px); position: absolute; top: 300px; left: 300px;}
.shuriken-reverse-100>.blade1 {height: 100px; width:calc(100% - 100px); position: absolute; top: 0; left: 100px;}
.shuriken-reverse-100>.blade2 {height: calc(100% - 100px); width:100px; position: absolute; top: 100px; right: 0;}
.shuriken-reverse-100>.blade3 {height: 100px; width:calc(100% - 100px); position: absolute; bottom: 0; right: 100px;}
.shuriken-reverse-100>.blade4 {height: calc(100% - 100px); width:100px; position: absolute; bottom: 100px; left: 0;}
.shuriken-reverse-100>.hole {height: calc(100% - 200px); width:calc(100% - 200px); position: absolute; top: 100px; left: 100px;}
.shuriken-reverse-200>.blade1 {height: 200px; width:calc(100% - 200px); position: absolute; top: 0; left: 200px;}
.shuriken-reverse-200>.blade2 {height: calc(100% - 200px); width:200px; position: absolute; top: 200px; right: 0;}
.shuriken-reverse-200>.blade3 {height: 200px; width:calc(100% - 200px); position: absolute; bottom: 0; right: 200px;}
.shuriken-reverse-200>.blade4 {height: calc(100% - 200px); width:200px; position: absolute; bottom: 200px; left: 0;}
.shuriken-reverse-200>.hole {height: calc(100% - 400px); width:calc(100% - 400px); position: absolute; top: 200px; left: 200px;}
.shuriken-reverse-300>.blade1 {height: 300px; width:calc(100% - 300px); position: absolute; top: 0; left: 300px;}
.shuriken-reverse-300>.blade2 {height: calc(100% - 300px); width:300px; position: absolute; top: 300px; right: 0;}
.shuriken-reverse-300>.blade3 {height: 300px; width:calc(100% - 300px); position: absolute; bottom: 0; right: 300px;}
.shuriken-reverse-300>.blade4 {height: calc(100% - 300px); width:300px; position: absolute; bottom: 300px; left: 0;}
.shuriken-reverse-300>.hole {height: calc(100% - 600px); width:calc(100% - 600px); position: absolute; top: 300px; left: 300px;}
.hide-blade1 > .blade1 > .content {visibility: hidden;}
.hide-blade2 > .blade2 > .content {visibility: hidden;}
.hide-blade3 > .blade3 > .content {visibility: hidden;}
.hide-blade4 > .blade4 > .content {visibility: hidden;}
.hide-hole > .hole > .content {visibility: hidden;}
.fade-blade1 > .blade1 > .content {opacity: 0.3;}
.fade-blade2 > .blade2 > .content {opacity: 0.3;}
.fade-blade3 > .blade3 > .content {opacity: 0.3;}
.fade-blade4 > .blade4 > .content {opacity: 0.3;}
.fade-hole > .hole > .content {opacity: 0.3;}
.gray-blade1 > .blade1 > .content,
.gray-blade2 > .blade2 > .content,
.gray-blade3 > .blade3 > .content,
.gray-blade4 > .blade4 > .content,
.gray-hole > .hole > .content
{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
.gray-blade1 > .blade1,
.gray-blade2 > .blade2,
.gray-blade3 > .blade3,
.gray-blade4 > .blade4,
.gray-hole > .hole
{
background-colour: rgba(197, 197, 197, 1)
}
.hide-row1 > .row:first-of-type>.content {visibility: hidden;}
.hide-row2 > .row:nth-of-type(2)>.content {visibility: hidden;}
.hide-row3 > .row:nth-of-type(3)>.content {visibility: hidden;}
.hide-row4 > .row:nth-of-type(4)>.content {visibility: hidden;}
.hide-row5 > .row:nth-of-type(5)>.content {visibility: hidden;}
.hide-row1 * > .row:first-of-type>.content {visibility: hidden;}
.hide-row2 * > .row:nth-of-type(2)>.content {visibility: hidden;}
.hide-row3 * > .row:nth-of-type(3)>.content {visibility: hidden;}
.hide-row4 * > .row:nth-of-type(4)>.content {visibility: hidden;}
.hide-row5 * > .row:nth-of-type(5)>.content {visibility: hidden;}
.fade-row1 > .row:first-of-type>.content {opacity: 0.3;}
.fade-row2 > .row:nth-of-type(2)>.content {opacity: 0.3;}
.fade-row3 > .row:nth-of-type(3)>.content {opacity: 0.3;}
.fade-row4 > .row:nth-of-type(4)>.content {opacity: 0.3;}
.fade-row5 > .row:nth-of-type(5)>.content {opacity: 0.3;}
.fade-row1 * > .row:first-of-type>.content {opacity: 0.3;}
.fade-row2 * > .row:nth-of-type(2)>.content {opacity: 0.3;}
.fade-row3 * > .row:nth-of-type(3)>.content {opacity: 0.3;}
.fade-row4 * > .row:nth-of-type(4)>.content {opacity: 0.3;}
.fade-row5 * > .row:nth-of-type(5)>.content {opacity: 0.3;}
.gray-row1 > .row:first-of-type>.content,
.gray-row2 > .row:nth-of-type(2)>.content,
.gray-row3 > .row:nth-of-type(3)>.content,
.gray-row4 > .row:nth-of-type(4)>.content,
.gray-row5 > .row:nth-of-type(5)>.content,
.gray-row1 * > .row:first-of-type>.content,
.gray-row2 * > .row:nth-of-type(2)>.content,
.gray-row3 * > .row:nth-of-type(3)>.content,
.gray-row4 * > .row:nth-of-type(4)>.content,
.gray-row5 * > .row:nth-of-type(5)>.content
{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
.gray-row1 > .row:first-of-type,
.gray-row2 > .row:nth-of-type(2),
.gray-row3 > .row:nth-of-type(3),
.gray-row4 > .row:nth-of-type(4),
.gray-row5 > .row:nth-of-type(5),
.gray-row1 * > .row:first-of-type,
.gray-row2 * > .row:nth-of-type(2),
.gray-row3 * > .row:nth-of-type(3),
.gray-row4 * > .row:nth-of-type(4),
.gray-row5 * > .row:nth-of-type(5)
{
background-color: rgba(197, 197, 197,1)
}
.fade-row1-col1 > .column:first-of-type .row:first-of-type>.content {opacity: 0.3;}
.fade-row1-col1 > .row:first-of-type .column:first-of-type>.content {opacity: 0.3;}
.fade-row1-col2 > .column:nth-of-type(2) .row:first-of-type>.content {opacity: 0.3;}
.fade-row1-col2 > .row:first-of-type .column:nth-of-type(2)>.content {opacity: 0.3;}
.fade-row1-col3 > .column:nth-of-type(3) .row:first-of-type>.content {opacity: 0.3;}
.fade-row1-col3 > .row:first-of-type .column:nth-of-type(3)>.content {opacity: 0.3;}
.fade-row1-col4 > .column:nth-of-type(4) .row:first-of-type>.content {opacity: 0.3;}
.fade-row1-col4 > .row:first-of-type .column:nth-of-type(4)>.content {opacity: 0.3;}
.fade-row1-col5 > .column:nth-of-type(5) .row:first-of-type>.content {opacity: 0.3;}
.fade-row1-col5 > .row:first-of-type .column:nth-of-type(5)>.content {opacity: 0.3;}
.fade-row2-col1 > .column:first-of-type .row:nth-of-type(2)>.content {opacity: 0.3;}
.fade-row2-col1 > .row:nth-of-type(2) .column:first-of-type>.content {opacity: 0.3;}
.fade-row2-col2 > .column:nth-of-type(2) .row:nth-of-type(2)>.content {opacity: 0.3;}
.fade-row2-col2 > .row:nth-of-type(2) .column:nth-of-type(2)>.content {opacity: 0.3;}
.fade-row2-col3 > .column:nth-of-type(3) .row:nth-of-type(2)>.content {opacity: 0.3;}
.fade-row2-col3 > .row:nth-of-type(2) .column:nth-of-type(3)>.content {opacity: 0.3;}
.fade-row2-col4 > .column:nth-of-type(4) .row:nth-of-type(2)>.content {opacity: 0.3;}
.fade-row2-col4 > .row:nth-of-type(2) .column:nth-of-type(4)>.content {opacity: 0.3;}
.fade-row2-col5 > .column:nth-of-type(5) .row:nth-of-type(2)>.content {opacity: 0.3;}
.fade-row2-col5 > .row:nth-of-type(2) .column:nth-of-type(5)>.content {opacity: 0.3;}
.fade-row3-col1 > .column:first-of-type .row:nth-of-type(3) >.content {opacity: 0.3;}
.fade-row3-col1 > .row:nth-of-type(3) .column:first-of-type >.content {opacity: 0.3;}
.fade-row3-col2 > .column:nth-of-type(2) .row:nth-of-type(3)>.content {opacity: 0.3;}
.fade-row3-col2 > .row:nth-of-type(3) .column:nth-of-type(2)>.content {opacity: 0.3;}
.fade-row3-col3 > .column:nth-of-type(3) .row:nth-of-type(3)>.content {opacity: 0.3;}
.fade-row3-col3 > .row:nth-of-type(3) .column:nth-of-type(3)>.content {opacity: 0.3;}
.fade-row3-col4 > .column:nth-of-type(4) .row:nth-of-type(3)>.content {opacity: 0.3;}
.fade-row3-col4 > .row:nth-of-type(3) .column:nth-of-type(4)>.content {opacity: 0.3;}
.fade-row3-col5 > .column:nth-of-type(5) .row:nth-of-type(3)>.content {opacity: 0.3;}
.fade-row3-col5 > .row:nth-of-type(3) .column:nth-of-type(5)>.content {opacity: 0.3;}
.fade-row4-col1 > .column:first-of-type .row:nth-of-type(4) >.content {opacity: 0.3;}
.fade-row4-col1 > .row:nth-of-type(4) .column:first-of-type >.content {opacity: 0.3;}
.fade-row4-col2 > .column:nth-of-type(2) .row:nth-of-type(4)>.content {opacity: 0.3;}
.fade-row4-col2 > .row:nth-of-type(4) .column:nth-of-type(2)>.content {opacity: 0.3;}
.fade-row4-col3 > .column:nth-of-type(4) .row:nth-of-type(4)>.content {opacity: 0.3;}
.fade-row4-col3 > .row:nth-of-type(4) .column:nth-of-type(4)>.content {opacity: 0.3;}
.fade-row4-col4 > .column:nth-of-type(4) .row:nth-of-type(4)>.content {opacity: 0.3;}
.fade-row4-col4 > .row:nth-of-type(4) .column:nth-of-type(4)>.content {opacity: 0.3;}
.fade-row4-col5 > .column:nth-of-type(5) .row:nth-of-type(4)>.content {opacity: 0.3;}
.fade-row4-col5 > .row:nth-of-type(4) .column:nth-of-type(5)>.content {opacity: 0.3;}
.fade-row5-col1 > .column:first-of-type .row:nth-of-type(5) >.content {opacity: 0.3;}
.fade-row5-col1 > .row:nth-of-type(5) .column:first-of-type >.content {opacity: 0.3;}
.fade-row5-col2 > .column:nth-of-type(2) .row:nth-of-type(5)>.content {opacity: 0.3;}
.fade-row5-col2 > .row:nth-of-type(5) .column:nth-of-type(2)>.content {opacity: 0.3;}
.fade-row5-col3 > .column:nth-of-type(4) .row:nth-of-type(5)>.content {opacity: 0.3;}
.fade-row5-col3 > .row:nth-of-type(5) .column:nth-of-type(4)>.content {opacity: 0.3;}
.fade-row5-col4 > .column:nth-of-type(4) .row:nth-of-type(5)>.content {opacity: 0.3;}
.fade-row5-col4 > .row:nth-of-type(5) .column:nth-of-type(4)>.content {opacity: 0.3;}
.fade-row5-col5 > .column:nth-of-type(5) .row:nth-of-type(5)>.content {opacity: 0.3;}
.fade-row5-col5 > .row:nth-of-type(5) .column:nth-of-type(5)>.content {opacity: 0.3;}
.hide-row1-col1 > .column:first-of-type .row:first-of-type >.content {visibility: hidden;}
.hide-row1-col1 > .row:first-of-type .column:first-of-type >.content {visibility: hidden;}
.hide-row1-col2 > .column:nth-of-type(2) .row:first-of-type>.content {visibility: hidden;}
.hide-row1-col2 > .row:first-of-type .column:nth-of-type(2)>.content {visibility: hidden;}
.hide-row1-col3 > .column:nth-of-type(3) .row:first-of-type>.content {visibility: hidden;}
.hide-row1-col3 > .row:first-of-type .column:nth-of-type(3)>.content {visibility: hidden;}
.hide-row1-col4 > .column:nth-of-type(4) .row:first-of-type>.content {visibility: hidden;}
.hide-row1-col4 > .row:first-of-type .column:nth-of-type(4)>.content {visibility: hidden;}
.hide-row1-col5 > .column:nth-of-type(5) .row:first-of-type>.content {visibility: hidden;}
.hide-row1-col5 > .row:first-of-type .column:nth-of-type(5)>.content {visibility: hidden;}
.hide-row2-col1 > .column:first-of-type .row:nth-of-type(2) >.content {visibility: hidden;}
.hide-row2-col1 > .row:nth-of-type(2) .column:first-of-type >.content {visibility: hidden;}
.hide-row2-col2 > .column:nth-of-type(2) .row:nth-of-type(2)>.content {visibility: hidden;}
.hide-row2-col2 > .row:nth-of-type(2) .column:nth-of-type(2)>.content {visibility: hidden;}
.hide-row2-col3 > .column:nth-of-type(3) .row:nth-of-type(2)>.content {visibility: hidden;}
.hide-row2-col3 > .row:nth-of-type(2) .column:nth-of-type(3)>.content {visibility: hidden;}
.hide-row2-col4 > .column:nth-of-type(4) .row:nth-of-type(2)>.content {visibility: hidden;}
.hide-row2-col4 > .row:nth-of-type(2) .column:nth-of-type(4)>.content {visibility: hidden;}
.hide-row2-col5 > .column:nth-of-type(5) .row:nth-of-type(2)>.content {visibility: hidden;}
.hide-row2-col5 > .row:nth-of-type(2) .column:nth-of-type(5)>.content {visibility: hidden;}
.hide-row3-col1 > .column:first-of-type .row:nth-of-type(3) >.content {visibility: hidden;}
.hide-row3-col1 > .row:nth-of-type(3) .column:first-of-type >.content {visibility: hidden;}
.hide-row3-col2 > .column:nth-of-type(2) .row:nth-of-type(3)>.content {visibility: hidden;}
.hide-row3-col2 > .row:nth-of-type(3) .column:nth-of-type(2)>.content {visibility: hidden;}
.hide-row3-col3 > .column:nth-of-type(3) .row:nth-of-type(3)>.content {visibility: hidden;}
.hide-row3-col3 > .row:nth-of-type(3) .column:nth-of-type(3)>.content {visibility: hidden;}
.hide-row3-col4 > .column:nth-of-type(4) .row:nth-of-type(3)>.content {visibility: hidden;}
.hide-row3-col4 > .row:nth-of-type(3) .column:nth-of-type(4)>.content {visibility: hidden;}
.hide-row3-col5 > .column:nth-of-type(5) .row:nth-of-type(3)>.content {visibility: hidden;}
.hide-row3-col5 > .row:nth-of-type(3) .column:nth-of-type(5)>.content {visibility: hidden;}
.hide-row4-col1 > .column:first-of-type .row:nth-of-type(4) >.content {visibility: hidden;}
.hide-row4-col1 > .row:nth-of-type(4) .column:first-of-type >.content {visibility: hidden;}
.hide-row4-col2 > .column:nth-of-type(2) .row:nth-of-type(4)>.content {visibility: hidden;}
.hide-row4-col2 > .row:nth-of-type(4) .column:nth-of-type(2)>.content {visibility: hidden;}
.hide-row4-col3 > .column:nth-of-type(4) .row:nth-of-type(4)>.content {visibility: hidden;}
.hide-row4-col3 > .row:nth-of-type(4) .column:nth-of-type(4)>.content {visibility: hidden;}
.hide-row4-col4 > .column:nth-of-type(4) .row:nth-of-type(4)>.content {visibility: hidden;}
.hide-row4-col4 > .row:nth-of-type(4) .column:nth-of-type(4)>.content {visibility: hidden;}
.hide-row4-col5 > .column:nth-of-type(5) .row:nth-of-type(4)>.content {visibility: hidden;}
.hide-row4-col5 > .row:nth-of-type(4) .column:nth-of-type(5)>.content {visibility: hidden;}
.hide-row5-col1 > .column:first-of-type .row:nth-of-type(5) >.content {visibility: hidden;}
.hide-row5-col1 > .row:nth-of-type(5) .column:first-of-type >.content {visibility: hidden;}
.hide-row5-col2 > .column:nth-of-type(2) .row:nth-of-type(5)>.content {visibility: hidden;}
.hide-row5-col2 > .row:nth-of-type(5) .column:nth-of-type(2)>.content {visibility: hidden;}
.hide-row5-col3 > .column:nth-of-type(4) .row:nth-of-type(5)>.content {visibility: hidden;}
.hide-row5-col3 > .row:nth-of-type(5) .column:nth-of-type(4)>.content {visibility: hidden;}
.hide-row5-col4 > .column:nth-of-type(4) .row:nth-of-type(5)>.content {visibility: hidden;}
.hide-row5-col4 > .row:nth-of-type(5) .column:nth-of-type(4)>.content {visibility: hidden;}
.hide-row5-col5 > .column:nth-of-type(5) .row:nth-of-type(5)>.content {visibility: hidden;}
.hide-row5-col5 > .row:nth-of-type(5) .column:nth-of-type(5)>.content {visibility: hidden;}
.gray-row1-col1 > .column:first-of-type .row:first-of-type>.content,
.gray-row1-col1 > .row:first-of-type .column:first-of-type>.content,
.gray-row1-col2 > .column:nth-of-type(2) .row:first-of-type>.content,
.gray-row1-col2 > .row:first-of-type .column:nth-of-type(2)>.content,
.gray-row1-col3 > .column:nth-of-type(3) .row:first-of-type>.content,
.gray-row1-col3 > .row:first-of-type .column:nth-of-type(3)>.content,
.gray-row1-col4 > .column:nth-of-type(4) .row:first-of-type>.content,
.gray-row1-col4 > .row:first-of-type .column:nth-of-type(4)>.content,
.gray-row1-col5 > .column:nth-of-type(5) .row:first-of-type>.content,
.gray-row1-col5 > .row:first-of-type .column:nth-of-type(5)>.content,
.gray-row2-col1 > .column:first-of-type .row:nth-of-type(2)>.content,
.gray-row2-col1 > .row:nth-of-type(2) .column:first-of-type>.content,
.gray-row2-col2 > .column:nth-of-type(2) .row:nth-of-type(2)>.content,
.gray-row2-col2 > .row:nth-of-type(2) .column:nth-of-type(2)>.content,
.gray-row2-col3 > .column:nth-of-type(3) .row:nth-of-type(2)>.content,
.gray-row2-col3 > .row:nth-of-type(2) .column:nth-of-type(3)>.content,
.gray-row2-col4 > .column:nth-of-type(4) .row:nth-of-type(2)>.content,
.gray-row2-col4 > .row:nth-of-type(2) .column:nth-of-type(4)>.content,
.gray-row2-col5 > .column:nth-of-type(5) .row:nth-of-type(2)>.content,
.gray-row2-col5 > .row:nth-of-type(2) .column:nth-of-type(5)>.content,
.gray-row3-col1 > .column:first-of-type .row:nth-of-type(3)>.content,
.gray-row3-col1 > .row:nth-of-type(3) .column:first-of-type>.content,
.gray-row3-col2 > .column:nth-of-type(2) .row:nth-of-type(3)>.content,
.gray-row3-col2 > .row:nth-of-type(3) .column:nth-of-type(2)>.content,
.gray-row3-col3 > .column:nth-of-type(3) .row:nth-of-type(3)>.content,
.gray-row3-col3 > .row:nth-of-type(3) .column:nth-of-type(3)>.content,
.gray-row3-col4 > .column:nth-of-type(4) .row:nth-of-type(3)>.content,
.gray-row3-col4 > .row:nth-of-type(3) .column:nth-of-type(4)>.content,
.gray-row3-col5 > .column:nth-of-type(5) .row:nth-of-type(3)>.content,
.gray-row3-col5 > .row:nth-of-type(3) .column:nth-of-type(5)>.content,
.gray-row4-col1 > .column:first-of-type .row:nth-of-type(4)>.content,
.gray-row4-col1 > .row:nth-of-type(4) .column:first-of-type>.content,
.gray-row4-col2 > .column:nth-of-type(2) .row:nth-of-type(4)>.content,
.gray-row4-col2 > .row:nth-of-type(4) .column:nth-of-type(2)>.content,
.gray-row4-col3 > .column:nth-of-type(3) .row:nth-of-type(4)>.content,