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;
}