console
<main>
<div style='animation-duration: calc(720s/1); animation-delay: calc(180s/1); font-size: calc(1em / 90); transform: translate(50%, -50%) scale(1) rotate(2deg)'>
<span>
1
</span>
</div>
<div style='animation-duration: calc(720s/2); animation-delay: calc(180s/2); font-size: calc(2em / 90); transform: translate(50%, -50%) scale(1) rotate(4deg)'>
<span>
2
</span>
</div>
<div style='animation-duration: calc(720s/3); animation-delay: calc(180s/3); font-size: calc(3em / 90); transform: translate(50%, -50%) scale(1) rotate(6deg)'>
<span>
3
</span>
</div>
<div style='animation-duration: calc(720s/4); animation-delay: calc(180s/4); font-size: calc(4em / 90); transform: translate(50%, -50%) scale(1) rotate(8deg)'>
<span>
4
</span>
</div>
<div style='animation-duration: calc(720s/5); animation-delay: calc(180s/5); font-size: calc(5em / 90); transform: translate(50%, -50%) scale(1) rotate(10deg)'>
<span>
5
</span>
</div>
<div style='animation-duration: calc(720s/6); animation-delay: calc(180s/6); font-size: calc(6em / 90); transform: translate(50%, -50%) scale(1) rotate(12deg)'>
<span>
6
</span>
</div>
<div style='animation-duration: calc(720s/7); animation-delay: calc(180s/7); font-size: calc(7em / 90); transform: translate(50%, -50%) scale(1) rotate(14deg)'>
<span>
7
</span>
</div>
<div style='animation-duration: calc(720s/8); animation-delay: calc(180s/8); font-size: calc(8em / 90); transform: translate(50%, -50%) scale(1) rotate(16deg)'>
<span>
8
</span>
</div>
<div style='animation-duration: calc(720s/9); animation-delay: calc(180s/9); font-size: calc(9em / 90); transform: translate(50%, -50%) scale(1) rotate(18deg)'>
<span>
9
</span>
</div>
<div style='animation-duration: calc(720s/10); animation-delay: calc(180s/10); font-size: calc(10em / 90); transform: translate(50%, -50%) scale(1) rotate(20deg)'>
<span>
10
</span>
</div>
<div style='animation-duration: calc(720s/11); animation-delay: calc(180s/11); font-size: calc(11em / 90); transform: translate(50%, -50%) scale(1) rotate(22deg)'>
<span>
11
</span>
</div>
<div style='animation-duration: calc(720s/12); animation-delay: calc(180s/12); font-size: calc(12em / 90); transform: translate(50%, -50%) scale(1) rotate(24deg)'>
<span>
12
</span>
</div>
<div style='animation-duration: calc(720s/13); animation-delay: calc(180s/13); font-size: calc(13em / 90); transform: translate(50%, -50%) scale(1) rotate(26deg)'>
<span>
13
</span>
</div>
<div style='animation-duration: calc(720s/14); animation-delay: calc(180s/14); font-size: calc(14em / 90); transform: translate(50%, -50%) scale(1) rotate(28deg)'>
<span>
14
</span>
</div>
<div style='animation-duration: calc(720s/15); animation-delay: calc(180s/15); font-size: calc(15em / 90); transform: translate(50%, -50%) scale(1) rotate(30deg)'>
<span>
15
</span>
</div>
<div style='animation-duration: calc(720s/16); animation-delay: calc(180s/16); font-size: calc(16em / 90); transform: translate(50%, -50%) scale(1) rotate(32deg)'>
<span>
16
</span>
</div>
<div style='animation-duration: calc(720s/17); animation-delay: calc(180s/17); font-size: calc(17em / 90); transform: translate(50%, -50%) scale(1) rotate(34deg)'>
<span>
17
</span>
</div>
<div style='animation-duration: calc(720s/18); animation-delay: calc(180s/18); font-size: calc(18em / 90); transform: translate(50%, -50%) scale(1) rotate(36deg)'>
<span>
18
</span>
</div>
<div style='animation-duration: calc(720s/19); animation-delay: calc(180s/19); font-size: calc(19em / 90); transform: translate(50%, -50%) scale(1) rotate(38deg)'>
<span>
19
</span>
</div>
<div style='animation-duration: calc(720s/20); animation-delay: calc(180s/20); font-size: calc(20em / 90); transform: translate(50%, -50%) scale(1) rotate(40deg)'>
<span>
20
</span>
</div>
<div style='animation-duration: calc(720s/21); animation-delay: calc(180s/21); font-size: calc(21em / 90); transform: translate(50%, -50%) scale(1) rotate(42deg)'>
<span>
21
</span>
</div>
<div style='animation-duration: calc(720s/22); animation-delay: calc(180s/22); font-size: calc(22em / 90); transform: translate(50%, -50%) scale(1) rotate(44deg)'>
<span>
22
</span>
</div>
<div style='animation-duration: calc(720s/23); animation-delay: calc(180s/23); font-size: calc(23em / 90); transform: translate(50%, -50%) scale(1) rotate(46deg)'>
<span>
23
</span>
</div>
<div style='animation-duration: calc(720s/24); animation-delay: calc(180s/24); font-size: calc(24em / 90); transform: translate(50%, -50%) scale(1) rotate(48deg)'>
<span>
24
</span>
</div>
<div style='animation-duration: calc(720s/25); animation-delay: calc(180s/25); font-size: calc(25em / 90); transform: translate(50%, -50%) scale(1) rotate(50deg)'>
<span>
25
</span>
</div>
<div style='animation-duration: calc(720s/26); animation-delay: calc(180s/26); font-size: calc(26em / 90); transform: translate(50%, -50%) scale(1) rotate(52deg)'>
<span>
26
</span>
</div>
<div style='animation-duration: calc(720s/27); animation-delay: calc(180s/27); font-size: calc(27em / 90); transform: translate(50%, -50%) scale(1) rotate(54deg)'>
<span>
27
</span>
</div>
<div style='animation-duration: calc(720s/28); animation-delay: calc(180s/28); font-size: calc(28em / 90); transform: translate(50%, -50%) scale(1) rotate(56deg)'>
<span>
28
</span>
</div>
<div style='animation-duration: calc(720s/29); animation-delay: calc(180s/29); font-size: calc(29em / 90); transform: translate(50%, -50%) scale(1) rotate(58deg)'>
<span>
29
</span>
</div>
<div style='animation-duration: calc(720s/30); animation-delay: calc(180s/30); font-size: calc(30em / 90); transform: translate(50%, -50%) scale(1) rotate(60deg)'>
<span>
30
</span>
</div>
<div style='animation-duration: calc(720s/31); animation-delay: calc(180s/31); font-size: calc(31em / 90); transform: translate(50%, -50%) scale(1) rotate(62deg)'>
<span>
31
</span>
</div>
<div style='animation-duration: calc(720s/32); animation-delay: calc(180s/32); font-size: calc(32em / 90); transform: translate(50%, -50%) scale(1) rotate(64deg)'>
<span>
32
</span>
</div>
<div style='animation-duration: calc(720s/33); animation-delay: calc(180s/33); font-size: calc(33em / 90); transform: translate(50%, -50%) scale(1) rotate(66deg)'>
<span>
33
</span>
</div>
<div style='animation-duration: calc(720s/34); animation-delay: calc(180s/34); font-size: calc(34em / 90); transform: translate(50%, -50%) scale(1) rotate(68deg)'>
<span>
34
</span>
</div>
<div style='animation-duration: calc(720s/35); animation-delay: calc(180s/35); font-size: calc(35em / 90); transform: translate(50%, -50%) scale(1) rotate(70deg)'>
<span>
35
</span>
</div>
<div style='animation-duration: calc(720s/36); animation-delay: calc(180s/36); font-size: calc(36em / 90); transform: translate(50%, -50%) scale(1) rotate(72deg)'>
<span>
36
</span>
</div>
<div style='animation-duration: calc(720s/37); animation-delay: calc(180s/37); font-size: calc(37em / 90); transform: translate(50%, -50%) scale(1) rotate(74deg)'>
<span>
37
</span>
</div>
<div style='animation-duration: calc(720s/38); animation-delay: calc(180s/38); font-size: calc(38em / 90); transform: translate(50%, -50%) scale(1) rotate(76deg)'>
<span>
38
</span>
</div>
<div style='animation-duration: calc(720s/39); animation-delay: calc(180s/39); font-size: calc(39em / 90); transform: translate(50%, -50%) scale(1) rotate(78deg)'>
<span>
39
</span>
</div>
<div style='animation-duration: calc(720s/40); animation-delay: calc(180s/40); font-size: calc(40em / 90); transform: translate(50%, -50%) scale(1) rotate(80deg)'>
<span>
40
</span>
</div>
<div style='animation-duration: calc(720s/41); animation-delay: calc(180s/41); font-size: calc(41em / 90); transform: translate(50%, -50%) scale(1) rotate(82deg)'>
<span>
41
</span>
</div>
<div style='animation-duration: calc(720s/42); animation-delay: calc(180s/42); font-size: calc(42em / 90); transform: translate(50%, -50%) scale(1) rotate(84deg)'>
<span>
42
</span>
</div>
<div style='animation-duration: calc(720s/43); animation-delay: calc(180s/43); font-size: calc(43em / 90); transform: translate(50%, -50%) scale(1) rotate(86deg)'>
<span>
43
</span>
</div>
<div style='animation-duration: calc(720s/44); animation-delay: calc(180s/44); font-size: calc(44em / 90); transform: translate(50%, -50%) scale(1) rotate(88deg)'>
<span>
44
</span>
</div>
<div style='animation-duration: calc(720s/45); animation-delay: calc(180s/45); font-size: calc(45em / 90); transform: translate(50%, -50%) scale(1) rotate(90deg)'>
<span>
45
</span>
</div>
<div style='animation-duration: calc(720s/46); animation-delay: calc(180s/46); font-size: calc(46em / 90); transform: translate(50%, -50%) scale(1) rotate(92deg)'>
<span>
46
</span>
</div>
<div style='animation-duration: calc(720s/47); animation-delay: calc(180s/47); font-size: calc(47em / 90); transform: translate(50%, -50%) scale(1) rotate(94deg)'>
<span>
47
</span>
</div>
<div style='animation-duration: calc(720s/48); animation-delay: calc(180s/48); font-size: calc(48em / 90); transform: translate(50%, -50%) scale(1) rotate(96deg)'>
<span>
48
</span>
</div>
<div style='animation-duration: calc(720s/49); animation-delay: calc(180s/49); font-size: calc(49em / 90); transform: translate(50%, -50%) scale(1) rotate(98deg)'>
<span>
49
</span>
</div>
<div style='animation-duration: calc(720s/50); animation-delay: calc(180s/50); font-size: calc(50em / 90); transform: translate(50%, -50%) scale(1) rotate(100deg)'>
<span>
50
</span>
</div>
<div style='animation-duration: calc(720s/51); animation-delay: calc(180s/51); font-size: calc(51em / 90); transform: translate(50%, -50%) scale(1) rotate(102deg)'>
<span>
51
</span>
</div>
<div style='animation-duration: calc(720s/52); animation-delay: calc(180s/52); font-size: calc(52em / 90); transform: translate(50%, -50%) scale(1) rotate(104deg)'>
<span>
52
</span>
</div>
<div style='animation-duration: calc(720s/53); animation-delay: calc(180s/53); font-size: calc(53em / 90); transform: translate(50%, -50%) scale(1) rotate(106deg)'>
<span>
53
</span>
</div>
<div style='animation-duration: calc(720s/54); animation-delay: calc(180s/54); font-size: calc(54em / 90); transform: translate(50%, -50%) scale(1) rotate(108deg)'>
<span>
54
</span>
</div>
<div style='animation-duration: calc(720s/55); animation-delay: calc(180s/55); font-size: calc(55em / 90); transform: translate(50%, -50%) scale(1) rotate(110deg)'>
<span>
55
</span>
</div>
<div style='animation-duration: calc(720s/56); animation-delay: calc(180s/56); font-size: calc(56em / 90); transform: translate(50%, -50%) scale(1) rotate(112deg)'>
<span>
56
</span>
</div>
<div style='animation-duration: calc(720s/57); animation-delay: calc(180s/57); font-size: calc(57em / 90); transform: translate(50%, -50%) scale(1) rotate(114deg)'>
<span>
57
</span>
</div>
<div style='animation-duration: calc(720s/58); animation-delay: calc(180s/58); font-size: calc(58em / 90); transform: translate(50%, -50%) scale(1) rotate(116deg)'>
<span>
58
</span>
</div>
<div style='animation-duration: calc(720s/59); animation-delay: calc(180s/59); font-size: calc(59em / 90); transform: translate(50%, -50%) scale(1) rotate(118deg)'>
<span>
59
</span>
</div>
<div style='animation-duration: calc(720s/60); animation-delay: calc(180s/60); font-size: calc(60em / 90); transform: translate(50%, -50%) scale(1) rotate(120deg)'>
<span>
60
</span>
</div>
<div style='animation-duration: calc(720s/61); animation-delay: calc(180s/61); font-size: calc(61em / 90); transform: translate(50%, -50%) scale(1) rotate(122deg)'>
<span>
61
</span>
</div>
<div style='animation-duration: calc(720s/62); animation-delay: calc(180s/62); font-size: calc(62em / 90); transform: translate(50%, -50%) scale(1) rotate(124deg)'>
<span>
62
</span>
</div>
<div style='animation-duration: calc(720s/63); animation-delay: calc(180s/63); font-size: calc(63em / 90); transform: translate(50%, -50%) scale(1) rotate(126deg)'>
<span>
63
</span>
</div>
<div style='animation-duration: calc(720s/64); animation-delay: calc(180s/64); font-size: calc(64em / 90); transform: translate(50%, -50%) scale(1) rotate(128deg)'>
<span>
64
</span>
</div>
<div style='animation-duration: calc(720s/65); animation-delay: calc(180s/65); font-size: calc(65em / 90); transform: translate(50%, -50%) scale(1) rotate(130deg)'>
<span>
65
</span>
</div>
<div style='animation-duration: calc(720s/66); animation-delay: calc(180s/66); font-size: calc(66em / 90); transform: translate(50%, -50%) scale(1) rotate(132deg)'>
<span>
66
</span>
</div>
<div style='animation-duration: calc(720s/67); animation-delay: calc(180s/67); font-size: calc(67em / 90); transform: translate(50%, -50%) scale(1) rotate(134deg)'>
<span>
67
</span>
</div>
<div style='animation-duration: calc(720s/68); animation-delay: calc(180s/68); font-size: calc(68em / 90); transform: translate(50%, -50%) scale(1) rotate(136deg)'>
<span>
68
</span>
</div>
<div style='animation-duration: calc(720s/69); animation-delay: calc(180s/69); font-size: calc(69em / 90); transform: translate(50%, -50%) scale(1) rotate(138deg)'>
<span>
69
</span>
</div>
<div style='animation-duration: calc(720s/70); animation-delay: calc(180s/70); font-size: calc(70em / 90); transform: translate(50%, -50%) scale(1) rotate(140deg)'>
<span>
70
</span>
</div>
<div style='animation-duration: calc(720s/71); animation-delay: calc(180s/71); font-size: calc(71em / 90); transform: translate(50%, -50%) scale(1) rotate(142deg)'>
<span>
71
</span>
</div>
<div style='animation-duration: calc(720s/72); animation-delay: calc(180s/72); font-size: calc(72em / 90); transform: translate(50%, -50%) scale(1) rotate(144deg)'>
<span>
72
</span>
</div>
<div style='animation-duration: calc(720s/73); animation-delay: calc(180s/73); font-size: calc(73em / 90); transform: translate(50%, -50%) scale(1) rotate(146deg)'>
<span>
73
</span>
</div>
<div style='animation-duration: calc(720s/74); animation-delay: calc(180s/74); font-size: calc(74em / 90); transform: translate(50%, -50%) scale(1) rotate(148deg)'>
<span>
74
</span>
</div>
<div style='animation-duration: calc(720s/75); animation-delay: calc(180s/75); font-size: calc(75em / 90); transform: translate(50%, -50%) scale(1) rotate(150deg)'>
<span>
75
</span>
</div>
<div style='animation-duration: calc(720s/76); animation-delay: calc(180s/76); font-size: calc(76em / 90); transform: translate(50%, -50%) scale(1) rotate(152deg)'>
<span>
76
</span>
</div>
<div style='animation-duration: calc(720s/77); animation-delay: calc(180s/77); font-size: calc(77em / 90); transform: translate(50%, -50%) scale(1) rotate(154deg)'>
<span>
77
</span>
</div>
<div style='animation-duration: calc(720s/78); animation-delay: calc(180s/78); font-size: calc(78em / 90); transform: translate(50%, -50%) scale(1) rotate(156deg)'>
<span>
78
</span>
</div>
<div style='animation-duration: calc(720s/79); animation-delay: calc(180s/79); font-size: calc(79em / 90); transform: translate(50%, -50%) scale(1) rotate(158deg)'>
<span>
79
</span>
</div>
<div style='animation-duration: calc(720s/80); animation-delay: calc(180s/80); font-size: calc(80em / 90); transform: translate(50%, -50%) scale(1) rotate(160deg)'>
<span>
80
</span>
</div>
<div style='animation-duration: calc(720s/81); animation-delay: calc(180s/81); font-size: calc(81em / 90); transform: translate(50%, -50%) scale(1) rotate(162deg)'>
<span>
81
</span>
</div>
<div style='animation-duration: calc(720s/82); animation-delay: calc(180s/82); font-size: calc(82em / 90); transform: translate(50%, -50%) scale(1) rotate(164deg)'>
<span>
82
</span>
</div>
<div style='animation-duration: calc(720s/83); animation-delay: calc(180s/83); font-size: calc(83em / 90); transform: translate(50%, -50%) scale(1) rotate(166deg)'>
<span>
83
</span>
</div>
<div style='animation-duration: calc(720s/84); animation-delay: calc(180s/84); font-size: calc(84em / 90); transform: translate(50%, -50%) scale(1) rotate(168deg)'>
<span>
84
</span>
</div>
<div style='animation-duration: calc(720s/85); animation-delay: calc(180s/85); font-size: calc(85em / 90); transform: translate(50%, -50%) scale(1) rotate(170deg)'>
<span>
85
</span>
</div>
<div style='animation-duration: calc(720s/86); animation-delay: calc(180s/86); font-size: calc(86em / 90); transform: translate(50%, -50%) scale(1) rotate(172deg)'>
<span>
86
</span>
</div>
<div style='animation-duration: calc(720s/87); animation-delay: calc(180s/87); font-size: calc(87em / 90); transform: translate(50%, -50%) scale(1) rotate(174deg)'>
<span>
87
</span>
</div>
<div style='animation-duration: calc(720s/88); animation-delay: calc(180s/88); font-size: calc(88em / 90); transform: translate(50%, -50%) scale(1) rotate(176deg)'>
<span>
88
</span>
</div>
<div style='animation-duration: calc(720s/89); animation-delay: calc(180s/89); font-size: calc(89em / 90); transform: translate(50%, -50%) scale(1) rotate(178deg)'>
<span>
89
</span>
</div>
<div style='animation-duration: calc(720s/90); animation-delay: calc(180s/90); font-size: calc(90em / 90); transform: translate(50%, -50%) scale(1) rotate(180deg)'>
<span>
90
</span>
</div>
<div style='animation-duration: calc(720s/91); animation-delay: calc(180s/91); font-size: calc(91em / 90); transform: translate(50%, -50%) scale(1) rotate(182deg)'>
<span>
91
</span>
</div>
<div style='animation-duration: calc(720s/92); animation-delay: calc(180s/92); font-size: calc(92em / 90); transform: translate(50%, -50%) scale(1) rotate(184deg)'>
<span>
92
</span>
</div>
<div style='animation-duration: calc(720s/93); animation-delay: calc(180s/93); font-size: calc(93em / 90); transform: translate(50%, -50%) scale(1) rotate(186deg)'>
<span>
93
</span>
</div>
<div style='animation-duration: calc(720s/94); animation-delay: calc(180s/94); font-size: calc(94em / 90); transform: translate(50%, -50%) scale(1) rotate(188deg)'>
<span>
94
</span>
</div>
<div style='animation-duration: calc(720s/95); animation-delay: calc(180s/95); font-size: calc(95em / 90); transform: translate(50%, -50%) scale(1) rotate(190deg)'>
<span>
95
</span>
</div>
<div style='animation-duration: calc(720s/96); animation-delay: calc(180s/96); font-size: calc(96em / 90); transform: translate(50%, -50%) scale(1) rotate(192deg)'>
<span>
96
</span>
</div>
<div style='animation-duration: calc(720s/97); animation-delay: calc(180s/97); font-size: calc(97em / 90); transform: translate(50%, -50%) scale(1) rotate(194deg)'>
<span>
97
</span>
</div>
<div style='animation-duration: calc(720s/98); animation-delay: calc(180s/98); font-size: calc(98em / 90); transform: translate(50%, -50%) scale(1) rotate(196deg)'>
<span>
98
</span>
</div>
<div style='animation-duration: calc(720s/99); animation-delay: calc(180s/99); font-size: calc(99em / 90); transform: translate(50%, -50%) scale(1) rotate(198deg)'>
<span>
99
</span>
</div>
<div style='animation-duration: calc(720s/100); animation-delay: calc(180s/100); font-size: calc(100em / 90); transform: translate(50%, -50%) scale(1) rotate(200deg)'>
<span>
100
</span>
</div>
<div style='animation-duration: calc(720s/101); animation-delay: calc(180s/101); font-size: calc(101em / 90); transform: translate(50%, -50%) scale(1) rotate(202deg)'>
<span>
101
</span>
</div>
<div style='animation-duration: calc(720s/102); animation-delay: calc(180s/102); font-size: calc(102em / 90); transform: translate(50%, -50%) scale(1) rotate(204deg)'>
<span>
102
</span>
</div>
<div style='animation-duration: calc(720s/103); animation-delay: calc(180s/103); font-size: calc(103em / 90); transform: translate(50%, -50%) scale(1) rotate(206deg)'>
<span>
103
</span>
</div>
<div style='animation-duration: calc(720s/104); animation-delay: calc(180s/104); font-size: calc(104em / 90); transform: translate(50%, -50%) scale(1) rotate(208deg)'>
<span>
104
</span>
</div>
<div style='animation-duration: calc(720s/105); animation-delay: calc(180s/105); font-size: calc(105em / 90); transform: translate(50%, -50%) scale(1) rotate(210deg)'>
<span>
105
</span>
</div>
<div style='animation-duration: calc(720s/106); animation-delay: calc(180s/106); font-size: calc(106em / 90); transform: translate(50%, -50%) scale(1) rotate(212deg)'>
<span>
106
</span>
</div>
<div style='animation-duration: calc(720s/107); animation-delay: calc(180s/107); font-size: calc(107em / 90); transform: translate(50%, -50%) scale(1) rotate(214deg)'>
<span>
107
</span>
</div>
<div style='animation-duration: calc(720s/108); animation-delay: calc(180s/108); font-size: calc(108em / 90); transform: translate(50%, -50%) scale(1) rotate(216deg)'>
<span>
108
</span>
</div>
<div style='animation-duration: calc(720s/109); animation-delay: calc(180s/109); font-size: calc(109em / 90); transform: translate(50%, -50%) scale(1) rotate(218deg)'>
<span>
109
</span>
</div>
<div style='animation-duration: calc(720s/110); animation-delay: calc(180s/110); font-size: calc(110em / 90); transform: translate(50%, -50%) scale(1) rotate(220deg)'>
<span>
110
</span>
</div>
<div style='animation-duration: calc(720s/111); animation-delay: calc(180s/111); font-size: calc(111em / 90); transform: translate(50%, -50%) scale(1) rotate(222deg)'>
<span>
111
</span>
</div>
<div style='animation-duration: calc(720s/112); animation-delay: calc(180s/112); font-size: calc(112em / 90); transform: translate(50%, -50%) scale(1) rotate(224deg)'>
<span>
112
</span>
</div>
<div style='animation-duration: calc(720s/113); animation-delay: calc(180s/113); font-size: calc(113em / 90); transform: translate(50%, -50%) scale(1) rotate(226deg)'>
<span>
113
</span>
</div>
<div style='animation-duration: calc(720s/114); animation-delay: calc(180s/114); font-size: calc(114em / 90); transform: translate(50%, -50%) scale(1) rotate(228deg)'>
<span>
114
</span>
</div>
<div style='animation-duration: calc(720s/115); animation-delay: calc(180s/115); font-size: calc(115em / 90); transform: translate(50%, -50%) scale(1) rotate(230deg)'>
<span>
115
</span>
</div>
<div style='animation-duration: calc(720s/116); animation-delay: calc(180s/116); font-size: calc(116em / 90); transform: translate(50%, -50%) scale(1) rotate(232deg)'>
<span>
116
</span>
</div>
<div style='animation-duration: calc(720s/117); animation-delay: calc(180s/117); font-size: calc(117em / 90); transform: translate(50%, -50%) scale(1) rotate(234deg)'>
<span>
117
</span>
</div>
<div style='animation-duration: calc(720s/118); animation-delay: calc(180s/118); font-size: calc(118em / 90); transform: translate(50%, -50%) scale(1) rotate(236deg)'>
<span>
118
</span>
</div>
<div style='animation-duration: calc(720s/119); animation-delay: calc(180s/119); font-size: calc(119em / 90); transform: translate(50%, -50%) scale(1) rotate(238deg)'>
<span>
119
</span>
</div>
<div style='animation-duration: calc(720s/120); animation-delay: calc(180s/120); font-size: calc(120em / 90); transform: translate(50%, -50%) scale(1) rotate(240deg)'>
<span>
120
</span>
</div>
<div style='animation-duration: calc(720s/121); animation-delay: calc(180s/121); font-size: calc(121em / 90); transform: translate(50%, -50%) scale(1) rotate(242deg)'>
<span>
121
</span>
</div>
<div style='animation-duration: calc(720s/122); animation-delay: calc(180s/122); font-size: calc(122em / 90); transform: translate(50%, -50%) scale(1) rotate(244deg)'>
<span>
122
</span>
</div>
<div style='animation-duration: calc(720s/123); animation-delay: calc(180s/123); font-size: calc(123em / 90); transform: translate(50%, -50%) scale(1) rotate(246deg)'>
<span>
123
</span>
</div>
<div style='animation-duration: calc(720s/124); animation-delay: calc(180s/124); font-size: calc(124em / 90); transform: translate(50%, -50%) scale(1) rotate(248deg)'>
<span>
124
</span>
</div>
<div style='animation-duration: calc(720s/125); animation-delay: calc(180s/125); font-size: calc(125em / 90); transform: translate(50%, -50%) scale(1) rotate(250deg)'>
<span>
125
</span>
</div>
<div style='animation-duration: calc(720s/126); animation-delay: calc(180s/126); font-size: calc(126em / 90); transform: translate(50%, -50%) scale(1) rotate(252deg)'>
<span>
126
</span>
</div>
<div style='animation-duration: calc(720s/127); animation-delay: calc(180s/127); font-size: calc(127em / 90); transform: translate(50%, -50%) scale(1) rotate(254deg)'>
<span>
127
</span>
</div>
<div style='animation-duration: calc(720s/128); animation-delay: calc(180s/128); font-size: calc(128em / 90); transform: translate(50%, -50%) scale(1) rotate(256deg)'>
<span>
128
</span>
</div>
<div style='animation-duration: calc(720s/129); animation-delay: calc(180s/129); font-size: calc(129em / 90); transform: translate(50%, -50%) scale(1) rotate(258deg)'>
<span>
129
</span>
</div>
<div style='animation-duration: calc(720s/130); animation-delay: calc(180s/130); font-size: calc(130em / 90); transform: translate(50%, -50%) scale(1) rotate(260deg)'>
<span>
130
</span>
</div>
<div style='animation-duration: calc(720s/131); animation-delay: calc(180s/131); font-size: calc(131em / 90); transform: translate(50%, -50%) scale(1) rotate(262deg)'>
<span>
131
</span>
</div>
<div style='animation-duration: calc(720s/132); animation-delay: calc(180s/132); font-size: calc(132em / 90); transform: translate(50%, -50%) scale(1) rotate(264deg)'>
<span>
132
</span>
</div>
<div style='animation-duration: calc(720s/133); animation-delay: calc(180s/133); font-size: calc(133em / 90); transform: translate(50%, -50%) scale(1) rotate(266deg)'>
<span>
133
</span>
</div>
<div style='animation-duration: calc(720s/134); animation-delay: calc(180s/134); font-size: calc(134em / 90); transform: translate(50%, -50%) scale(1) rotate(268deg)'>
<span>
134
</span>
</div>
<div style='animation-duration: calc(720s/135); animation-delay: calc(180s/135); font-size: calc(135em / 90); transform: translate(50%, -50%) scale(1) rotate(270deg)'>
<span>
135
</span>
</div>
<div style='animation-duration: calc(720s/136); animation-delay: calc(180s/136); font-size: calc(136em / 90); transform: translate(50%, -50%) scale(1) rotate(272deg)'>
<span>
136
</span>
</div>
<div style='animation-duration: calc(720s/137); animation-delay: calc(180s/137); font-size: calc(137em / 90); transform: translate(50%, -50%) scale(1) rotate(274deg)'>
<span>
137
</span>
</div>
<div style='animation-duration: calc(720s/138); animation-delay: calc(180s/138); font-size: calc(138em / 90); transform: translate(50%, -50%) scale(1) rotate(276deg)'>
<span>
138
</span>
</div>
<div style='animation-duration: calc(720s/139); animation-delay: calc(180s/139); font-size: calc(139em / 90); transform: translate(50%, -50%) scale(1) rotate(278deg)'>
<span>
139
</span>
</div>
<div style='animation-duration: calc(720s/140); animation-delay: calc(180s/140); font-size: calc(140em / 90); transform: translate(50%, -50%) scale(1) rotate(280deg)'>
<span>
140
</span>
</div>
<div style='animation-duration: calc(720s/141); animation-delay: calc(180s/141); font-size: calc(141em / 90); transform: translate(50%, -50%) scale(1) rotate(282deg)'>
<span>
141
</span>
</div>
<div style='animation-duration: calc(720s/142); animation-delay: calc(180s/142); font-size: calc(142em / 90); transform: translate(50%, -50%) scale(1) rotate(284deg)'>
<span>
142
</span>
</div>
<div style='animation-duration: calc(720s/143); animation-delay: calc(180s/143); font-size: calc(143em / 90); transform: translate(50%, -50%) scale(1) rotate(286deg)'>
<span>
143
</span>
</div>
<div style='animation-duration: calc(720s/144); animation-delay: calc(180s/144); font-size: calc(144em / 90); transform: translate(50%, -50%) scale(1) rotate(288deg)'>
<span>
144
</span>
</div>
<div style='animation-duration: calc(720s/145); animation-delay: calc(180s/145); font-size: calc(145em / 90); transform: translate(50%, -50%) scale(1) rotate(290deg)'>
<span>
145
</span>
</div>
<div style='animation-duration: calc(720s/146); animation-delay: calc(180s/146); font-size: calc(146em / 90); transform: translate(50%, -50%) scale(1) rotate(292deg)'>
<span>
146
</span>
</div>
<div style='animation-duration: calc(720s/147); animation-delay: calc(180s/147); font-size: calc(147em / 90); transform: translate(50%, -50%) scale(1) rotate(294deg)'>
<span>
147
</span>
</div>
<div style='animation-duration: calc(720s/148); animation-delay: calc(180s/148); font-size: calc(148em / 90); transform: translate(50%, -50%) scale(1) rotate(296deg)'>
<span>
148
</span>
</div>
<div style='animation-duration: calc(720s/149); animation-delay: calc(180s/149); font-size: calc(149em / 90); transform: translate(50%, -50%) scale(1) rotate(298deg)'>
<span>
149
</span>
</div>
<div style='animation-duration: calc(720s/150); animation-delay: calc(180s/150); font-size: calc(150em / 90); transform: translate(50%, -50%) scale(1) rotate(300deg)'>
<span>
150
</span>
</div>
<div style='animation-duration: calc(720s/151); animation-delay: calc(180s/151); font-size: calc(151em / 90); transform: translate(50%, -50%) scale(1) rotate(302deg)'>
<span>
151
</span>
</div>
<div style='animation-duration: calc(720s/152); animation-delay: calc(180s/152); font-size: calc(152em / 90); transform: translate(50%, -50%) scale(1) rotate(304deg)'>
<span>
152
</span>
</div>
<div style='animation-duration: calc(720s/153); animation-delay: calc(180s/153); font-size: calc(153em / 90); transform: translate(50%, -50%) scale(1) rotate(306deg)'>
<span>
153
</span>
</div>
<div style='animation-duration: calc(720s/154); animation-delay: calc(180s/154); font-size: calc(154em / 90); transform: translate(50%, -50%) scale(1) rotate(308deg)'>
<span>
154
</span>
</div>
<div style='animation-duration: calc(720s/155); animation-delay: calc(180s/155); font-size: calc(155em / 90); transform: translate(50%, -50%) scale(1) rotate(310deg)'>
<span>
155
</span>
</div>
<div style='animation-duration: calc(720s/156); animation-delay: calc(180s/156); font-size: calc(156em / 90); transform: translate(50%, -50%) scale(1) rotate(312deg)'>
<span>
156
</span>
</div>
<div style='animation-duration: calc(720s/157); animation-delay: calc(180s/157); font-size: calc(157em / 90); transform: translate(50%, -50%) scale(1) rotate(314deg)'>
<span>
157
</span>
</div>
<div style='animation-duration: calc(720s/158); animation-delay: calc(180s/158); font-size: calc(158em / 90); transform: translate(50%, -50%) scale(1) rotate(316deg)'>
<span>
158
</span>
</div>
<div style='animation-duration: calc(720s/159); animation-delay: calc(180s/159); font-size: calc(159em / 90); transform: translate(50%, -50%) scale(1) rotate(318deg)'>
<span>
159
</span>
</div>
<div style='animation-duration: calc(720s/160); animation-delay: calc(180s/160); font-size: calc(160em / 90); transform: translate(50%, -50%) scale(1) rotate(320deg)'>
<span>
160
</span>
</div>
<div style='animation-duration: calc(720s/161); animation-delay: calc(180s/161); font-size: calc(161em / 90); transform: translate(50%, -50%) scale(1) rotate(322deg)'>
<span>
161
</span>
</div>
<div style='animation-duration: calc(720s/162); animation-delay: calc(180s/162); font-size: calc(162em / 90); transform: translate(50%, -50%) scale(1) rotate(324deg)'>
<span>
162
</span>
</div>
<div style='animation-duration: calc(720s/163); animation-delay: calc(180s/163); font-size: calc(163em / 90); transform: translate(50%, -50%) scale(1) rotate(326deg)'>
<span>
163
</span>
</div>
<div style='animation-duration: calc(720s/164); animation-delay: calc(180s/164); font-size: calc(164em / 90); transform: translate(50%, -50%) scale(1) rotate(328deg)'>
<span>
164
</span>
</div>
<div style='animation-duration: calc(720s/165); animation-delay: calc(180s/165); font-size: calc(165em / 90); transform: translate(50%, -50%) scale(1) rotate(330deg)'>
<span>
165
</span>
</div>
<div style='animation-duration: calc(720s/166); animation-delay: calc(180s/166); font-size: calc(166em / 90); transform: translate(50%, -50%) scale(1) rotate(332deg)'>
<span>
166
</span>
</div>
<div style='animation-duration: calc(720s/167); animation-delay: calc(180s/167); font-size: calc(167em / 90); transform: translate(50%, -50%) scale(1) rotate(334deg)'>
<span>
167
</span>
</div>
<div style='animation-duration: calc(720s/168); animation-delay: calc(180s/168); font-size: calc(168em / 90); transform: translate(50%, -50%) scale(1) rotate(336deg)'>
<span>
168
</span>
</div>
<div style='animation-duration: calc(720s/169); animation-delay: calc(180s/169); font-size: calc(169em / 90); transform: translate(50%, -50%) scale(1) rotate(338deg)'>
<span>
169
</span>
</div>
<div style='animation-duration: calc(720s/170); animation-delay: calc(180s/170); font-size: calc(170em / 90); transform: translate(50%, -50%) scale(1) rotate(340deg)'>
<span>
170
</span>
</div>
<div style='animation-duration: calc(720s/171); animation-delay: calc(180s/171); font-size: calc(171em / 90); transform: translate(50%, -50%) scale(1) rotate(342deg)'>
<span>
171
</span>
</div>
<div style='animation-duration: calc(720s/172); animation-delay: calc(180s/172); font-size: calc(172em / 90); transform: translate(50%, -50%) scale(1) rotate(344deg)'>
<span>
172
</span>
</div>
<div style='animation-duration: calc(720s/173); animation-delay: calc(180s/173); font-size: calc(173em / 90); transform: translate(50%, -50%) scale(1) rotate(346deg)'>
<span>
173
</span>
</div>
<div style='animation-duration: calc(720s/174); animation-delay: calc(180s/174); font-size: calc(174em / 90); transform: translate(50%, -50%) scale(1) rotate(348deg)'>
<span>
174
</span>
</div>
<div style='animation-duration: calc(720s/175); animation-delay: calc(180s/175); font-size: calc(175em / 90); transform: translate(50%, -50%) scale(1) rotate(350deg)'>
<span>
175
</span>
</div>
<div style='animation-duration: calc(720s/176); animation-delay: calc(180s/176); font-size: calc(176em / 90); transform: translate(50%, -50%) scale(1) rotate(352deg)'>
<span>
176
</span>
</div>
<div style='animation-duration: calc(720s/177); animation-delay: calc(180s/177); font-size: calc(177em / 90); transform: translate(50%, -50%) scale(1) rotate(354deg)'>
<span>
177
</span>
</div>
<div style='animation-duration: calc(720s/178); animation-delay: calc(180s/178); font-size: calc(178em / 90); transform: translate(50%, -50%) scale(1) rotate(356deg)'>
<span>
178
</span>
</div>
<div style='animation-duration: calc(720s/179); animation-delay: calc(180s/179); font-size: calc(179em / 90); transform: translate(50%, -50%) scale(1) rotate(358deg)'>
<span>
179
</span>
</div>
<div style='animation-duration: calc(720s/180); animation-delay: calc(180s/180); font-size: calc(180em / 90); transform: translate(50%, -50%) scale(1) rotate(360deg)'>
<span>
180
</span>
</div>
</main>
@keyframes a {
to {
transform: translate(50%, -50%) scale(.1) rotate(-450deg)
}
}
@keyframes a2 {
0% {
background: #d4e34a;
}
33.3% {
background: #1aa699;
}
66.3% {
background: #ff703b;
}
100% {
transform: rotate(360deg)
}
}
body {
color: #2e2e30;
text-shadow: 0 0 4vmax rgba(#000, .35);
font-family: 'DIN Alternate', Helvetica, sans-seeif;
background: #d4e34a;
animation: a2 60s infinite linear;
}
main {
width: 50%;
height: 50%;
position: relative;
transform-origin: 50% 50%;
font-size: 6vmin;
div {
position: absolute;
top: 60%;
left: 50%;
width: 50%;
text-align: center;
font-weight: 300;
transform-origin: -50% -50%;
animation: a alternate infinite ease-in-out;
letter-spacing: -.2ch;
will-change: transform;
}
}
html,
body {
height: 100%;
}
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}