@charset "UTF-8"; :root { --breakpoints-phone: 390px; --breakpoints-tablet: 768px; --breakpoints-desktop: 1366px; --breakpoints-LGdesktop: 1920px; } :root { --color-black: #000000; --color-black2: #121214; --color-green: #19c37d; --color-violet: rgb(64, 0, 63); --color-grey: #343541; --color-white: white; --color-light-green: #51da4b; --color-blue: #0000fe; --color-beige: #ffe0da; } :root { --font1: system-ui, sans-serif; } body, html { max-width: 100%; overflow-x: hidden; } body { background-color: #121214; display: block; box-sizing: content-box; margin: 0; padding: 0; overflow-y: hidden; } h1 { display: block; color: white; font-family: system-ui, sans-serif; font-size: 40px; font-weight: 600; animation: fontSize 1s forwards 300ms; z-index: 1; letter-spacing: -1px; } @keyframes fontSize { 0% { font-size: 0px; } 100% { font-size: 40px; } } h1.black { color: #121214; } h1.center { text-align: center; } @media screen and (max-width: 390px) { h1 { font-size: 26px; text-align: center; z-index: -1; font-size: 26px; } @keyframes fontSize { 0% { font-size: 0px; } 100% { font-size: 26px; } } } h2 { font-family: system-ui, sans-serif; font-size: 26px; color: white; font-weight: 400; } h2.center-text { text-align: center; } h2.black { color: #121214; } h2 span { color: #19c37d; } h3 { font-family: system-ui, sans-serif; font-size: 22px; color: white; margin: 0; font-weight: 400; } h3.black { color: #121214; } h4 { font-family: system-ui; font-size: 14px; font-weight: 400; color: #121214; margin: 5px; } p { font-family: system-ui, sans-serif; font-size: 16px; color: white; line-height: 1.5; } p.black { color: #121214; } section { padding: 20px 25px; max-width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: row; } @media screen and (max-width: 390px) { section { margin: 20px auto auto auto; } } section.inline { flex-direction: column; } section.left { justify-content: left; } section.textInfo { position: relative; color: white; } section.textInfo.black { color: #121214; } section.textInfo strong { color: #19c37d; font-weight: 400; } section.textInfo a { color: #19c37d; font-weight: 400; text-decoration: underline; } section.textInfo p { line-height: 1.8; text-align: justify; margin: 0; } section.textInfo ul, section.textInfo ol { padding-left: 10px; } section.textInfo ul.black, section.textInfo ol.black { color: #121214; } section.textInfo ul li, section.textInfo ol li { text-align: left; padding: 6px 0; font-size: 16px; line-height: 1.9; font-weight: 400; letter-spacing: -0.021em; font-family: "system-ui"; font-style: normal; } section.textInfo ul li span, section.textInfo ol li span { color: #19c37d; } section.mt-0 { margin-top: 0px; } section.mt-20 { margin-top: 20px; } section.mt-40 { margin-top: 40px; } a.button { background-color: white; color: #121214; text-decoration: none; padding: 10px 20px; font-family: system-ui, sans-serif; font-size: 14px; margin: 30px 10px; flex-grow: 0; float: left; text-align: center; transition: 600ms cubic-bezier(0.075, 0.82, 0.165, 1); position: relative; width: 100%; min-width: 190px; transition: color 300ms ease-in-out; } a.button:hover { transition: color 300ms ease-in-out; color: rgb(64, 0, 63); } a.button.black { color: white; background-color: #121214; } @media screen and (max-width: 390px) { a.button { margin: 10px; } } .hidden { display: none; } .column { display: flex; justify-content: space-between; align-items: flex-start; flex-direction: row; max-width: 1000px; width: 100%; flex-wrap: wrap; } @media screen and (max-width: 390px) { .column { gap: 20px; justify-content: center; } } .column div { max-width: 450px; } .column div p { text-align: justify; } .column div p.quarter { width: 645px; } @media screen and (max-width: 768px) { .column div p.quarter { width: auto; } } label { font-family: system-ui, sans-serif; } .animation-bubble span { position: absolute; background-color: rgb(64, 0, 63); width: 12px; aspect-ratio: 1; border-radius: 50px; } .animation-bubble span { position: absolute; left: 50px; top: 100px; } @media screen and (max-width: 1366px) { .animation-bubble span { left: 0px; } } .animation-bubble span:nth-of-type(1) { background-color: rgba(25, 195, 125, calc(1 - (1 + 1) * 0.5 / 100)); top: 55px; } .animation-bubble span:nth-of-type(1) { animation: changeSize 1s infinite; animation-delay: 75ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(2) { background-color: rgba(25, 195, 125, calc(1 - (2 + 1) * 0.5 / 100)); top: 85px; } .animation-bubble span:nth-of-type(2) { animation: changeSize 1s infinite; animation-delay: 150ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(3) { background-color: rgba(25, 195, 125, calc(1 - (3 + 1) * 0.5 / 100)); top: 115px; } .animation-bubble span:nth-of-type(3) { animation: changeSize 1s infinite; animation-delay: 225ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(4) { background-color: rgba(25, 195, 125, calc(1 - (4 + 1) * 0.5 / 100)); top: 145px; } .animation-bubble span:nth-of-type(4) { animation: changeSize 1s infinite; animation-delay: 300ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(5) { background-color: rgba(25, 195, 125, calc(1 - (5 + 1) * 0.5 / 100)); top: 175px; } .animation-bubble span:nth-of-type(5) { animation: changeSize 1s infinite; animation-delay: 375ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(6) { background-color: rgba(25, 195, 125, calc(1 - (6 + 1) * 0.5 / 100)); top: 205px; } .animation-bubble span:nth-of-type(6) { animation: changeSize 1s infinite; animation-delay: 450ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(7) { background-color: rgba(25, 195, 125, calc(1 - (7 + 1) * 0.5 / 100)); top: 235px; } .animation-bubble span:nth-of-type(7) { animation: changeSize 1s infinite; animation-delay: 525ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(8) { background-color: rgba(25, 195, 125, calc(1 - (8 + 1) * 0.5 / 100)); top: 265px; } .animation-bubble span:nth-of-type(8) { animation: changeSize 1s infinite; animation-delay: 600ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(9) { background-color: rgba(25, 195, 125, calc(1 - (9 + 1) * 0.5 / 100)); top: 295px; } .animation-bubble span:nth-of-type(9) { animation: changeSize 1s infinite; animation-delay: 675ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(10) { background-color: rgba(25, 195, 125, calc(1 - (10 + 1) * 0.5 / 100)); top: 325px; } .animation-bubble span:nth-of-type(10) { animation: changeSize 1s infinite; animation-delay: 750ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(11) { background-color: rgba(25, 195, 125, calc(1 - (11 + 1) * 0.5 / 100)); top: 355px; } .animation-bubble span:nth-of-type(11) { animation: changeSize 1s infinite; animation-delay: 825ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(12) { background-color: rgba(25, 195, 125, calc(1 - (12 + 1) * 0.5 / 100)); top: 385px; } .animation-bubble span:nth-of-type(12) { animation: changeSize 1s infinite; animation-delay: 900ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(13) { background-color: rgba(25, 195, 125, calc(1 - (13 + 1) * 0.5 / 100)); top: 415px; } .animation-bubble span:nth-of-type(13) { animation: changeSize 1s infinite; animation-delay: 975ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(14) { background-color: rgba(25, 195, 125, calc(1 - (14 + 1) * 0.5 / 100)); top: 445px; } .animation-bubble span:nth-of-type(14) { animation: changeSize 1s infinite; animation-delay: 1050ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(15) { background-color: rgba(25, 195, 125, calc(1 - (15 + 1) * 0.5 / 100)); top: 475px; } .animation-bubble span:nth-of-type(15) { animation: changeSize 1s infinite; animation-delay: 1125ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(16) { background-color: rgba(25, 195, 125, calc(1 - (16 + 1) * 0.5 / 100)); top: 505px; } .animation-bubble span:nth-of-type(16) { animation: changeSize 1s infinite; animation-delay: 1200ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(17) { background-color: rgba(25, 195, 125, calc(1 - (17 + 1) * 0.5 / 100)); top: 535px; } .animation-bubble span:nth-of-type(17) { animation: changeSize 1s infinite; animation-delay: 1275ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(18) { background-color: rgba(25, 195, 125, calc(1 - (18 + 1) * 0.5 / 100)); top: 565px; } .animation-bubble span:nth-of-type(18) { animation: changeSize 1s infinite; animation-delay: 1350ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(19) { background-color: rgba(25, 195, 125, calc(1 - (19 + 1) * 0.5 / 100)); top: 595px; } .animation-bubble span:nth-of-type(19) { animation: changeSize 1s infinite; animation-delay: 1425ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(20) { background-color: rgba(25, 195, 125, calc(1 - (20 + 1) * 0.5 / 100)); top: 625px; } .animation-bubble span:nth-of-type(20) { animation: changeSize 1s infinite; animation-delay: 1500ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(21) { background-color: rgba(25, 195, 125, calc(1 - (21 + 1) * 0.5 / 100)); top: 655px; } .animation-bubble span:nth-of-type(21) { animation: changeSize 1s infinite; animation-delay: 1575ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(22) { background-color: rgba(25, 195, 125, calc(1 - (22 + 1) * 0.5 / 100)); top: 685px; } .animation-bubble span:nth-of-type(22) { animation: changeSize 1s infinite; animation-delay: 1650ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(23) { background-color: rgba(25, 195, 125, calc(1 - (23 + 1) * 0.5 / 100)); top: 715px; } .animation-bubble span:nth-of-type(23) { animation: changeSize 1s infinite; animation-delay: 1725ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(24) { background-color: rgba(25, 195, 125, calc(1 - (24 + 1) * 0.5 / 100)); top: 745px; } .animation-bubble span:nth-of-type(24) { animation: changeSize 1s infinite; animation-delay: 1800ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(25) { background-color: rgba(25, 195, 125, calc(1 - (25 + 1) * 0.5 / 100)); top: 775px; } .animation-bubble span:nth-of-type(25) { animation: changeSize 1s infinite; animation-delay: 1875ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(26) { background-color: rgba(25, 195, 125, calc(1 - (26 + 1) * 0.5 / 100)); top: 805px; } .animation-bubble span:nth-of-type(26) { animation: changeSize 1s infinite; animation-delay: 1950ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(27) { background-color: rgba(25, 195, 125, calc(1 - (27 + 1) * 0.5 / 100)); top: 835px; } .animation-bubble span:nth-of-type(27) { animation: changeSize 1s infinite; animation-delay: 2025ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(28) { background-color: rgba(25, 195, 125, calc(1 - (28 + 1) * 0.5 / 100)); top: 865px; } .animation-bubble span:nth-of-type(28) { animation: changeSize 1s infinite; animation-delay: 2100ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(29) { background-color: rgba(25, 195, 125, calc(1 - (29 + 1) * 0.5 / 100)); top: 895px; } .animation-bubble span:nth-of-type(29) { animation: changeSize 1s infinite; animation-delay: 2175ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(30) { background-color: rgba(25, 195, 125, calc(1 - (30 + 1) * 0.5 / 100)); top: 925px; } .animation-bubble span:nth-of-type(30) { animation: changeSize 1s infinite; animation-delay: 2250ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(31) { background-color: rgba(25, 195, 125, calc(1 - (31 + 1) * 0.5 / 100)); top: 955px; } .animation-bubble span:nth-of-type(31) { animation: changeSize 1s infinite; animation-delay: 2325ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(32) { background-color: rgba(25, 195, 125, calc(1 - (32 + 1) * 0.5 / 100)); top: 985px; } .animation-bubble span:nth-of-type(32) { animation: changeSize 1s infinite; animation-delay: 2400ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(33) { background-color: rgba(25, 195, 125, calc(1 - (33 + 1) * 0.5 / 100)); top: 1015px; } .animation-bubble span:nth-of-type(33) { animation: changeSize 1s infinite; animation-delay: 2475ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(34) { background-color: rgba(25, 195, 125, calc(1 - (34 + 1) * 0.5 / 100)); top: 1045px; } .animation-bubble span:nth-of-type(34) { animation: changeSize 1s infinite; animation-delay: 2550ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(35) { background-color: rgba(25, 195, 125, calc(1 - (35 + 1) * 0.5 / 100)); top: 1075px; } .animation-bubble span:nth-of-type(35) { animation: changeSize 1s infinite; animation-delay: 2625ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(36) { background-color: rgba(25, 195, 125, calc(1 - (36 + 1) * 0.5 / 100)); top: 1105px; } .animation-bubble span:nth-of-type(36) { animation: changeSize 1s infinite; animation-delay: 2700ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(37) { background-color: rgba(25, 195, 125, calc(1 - (37 + 1) * 0.5 / 100)); top: 1135px; } .animation-bubble span:nth-of-type(37) { animation: changeSize 1s infinite; animation-delay: 2775ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(38) { background-color: rgba(25, 195, 125, calc(1 - (38 + 1) * 0.5 / 100)); top: 1165px; } .animation-bubble span:nth-of-type(38) { animation: changeSize 1s infinite; animation-delay: 2850ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(39) { background-color: rgba(25, 195, 125, calc(1 - (39 + 1) * 0.5 / 100)); top: 1195px; } .animation-bubble span:nth-of-type(39) { animation: changeSize 1s infinite; animation-delay: 2925ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(40) { background-color: rgba(25, 195, 125, calc(1 - (40 + 1) * 0.5 / 100)); top: 1225px; } .animation-bubble span:nth-of-type(40) { animation: changeSize 1s infinite; animation-delay: 3000ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(41) { background-color: rgba(25, 195, 125, calc(1 - (41 + 1) * 0.5 / 100)); top: 1255px; } .animation-bubble span:nth-of-type(41) { animation: changeSize 1s infinite; animation-delay: 3075ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(42) { background-color: rgba(25, 195, 125, calc(1 - (42 + 1) * 0.5 / 100)); top: 1285px; } .animation-bubble span:nth-of-type(42) { animation: changeSize 1s infinite; animation-delay: 3150ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(43) { background-color: rgba(25, 195, 125, calc(1 - (43 + 1) * 0.5 / 100)); top: 1315px; } .animation-bubble span:nth-of-type(43) { animation: changeSize 1s infinite; animation-delay: 3225ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(44) { background-color: rgba(25, 195, 125, calc(1 - (44 + 1) * 0.5 / 100)); top: 1345px; } .animation-bubble span:nth-of-type(44) { animation: changeSize 1s infinite; animation-delay: 3300ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(45) { background-color: rgba(25, 195, 125, calc(1 - (45 + 1) * 0.5 / 100)); top: 1375px; } .animation-bubble span:nth-of-type(45) { animation: changeSize 1s infinite; animation-delay: 3375ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(46) { background-color: rgba(25, 195, 125, calc(1 - (46 + 1) * 0.5 / 100)); top: 1405px; } .animation-bubble span:nth-of-type(46) { animation: changeSize 1s infinite; animation-delay: 3450ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(47) { background-color: rgba(25, 195, 125, calc(1 - (47 + 1) * 0.5 / 100)); top: 1435px; } .animation-bubble span:nth-of-type(47) { animation: changeSize 1s infinite; animation-delay: 3525ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(48) { background-color: rgba(25, 195, 125, calc(1 - (48 + 1) * 0.5 / 100)); top: 1465px; } .animation-bubble span:nth-of-type(48) { animation: changeSize 1s infinite; animation-delay: 3600ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(49) { background-color: rgba(25, 195, 125, calc(1 - (49 + 1) * 0.5 / 100)); top: 1495px; } .animation-bubble span:nth-of-type(49) { animation: changeSize 1s infinite; animation-delay: 3675ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } .animation-bubble span:nth-of-type(50) { background-color: rgba(25, 195, 125, calc(1 - (50 + 1) * 0.5 / 100)); top: 1525px; } .animation-bubble span:nth-of-type(50) { animation: changeSize 1s infinite; animation-delay: 3750ms; } @keyframes changeSize { 0%, 100% { width: 10px; } 50% { width: 16px; } } .animation-bubble span.active { background-color: rgb(64, 0, 63); } div.container-row { display: flex; justify-content: center; align-items: center; flex-direction: row; } div.container-row.animation { margin: 110px auto 80px auto; height: 370px; } @media screen and (max-width: 390px) { div.container-row.animation { height: 276px; } } section.animation { position: relative; border: 2px solid #ffffff; border-radius: 50%; aspect-ratio: 1; padding: 20px; display: flex; justify-content: center; align-items: center; } section.animation span { background-color: rgb(64, 0, 63); width: 12px; aspect-ratio: 1; border-radius: 50px; transition: 0.2s all ease-in; position: absolute; left: 49%; top: 49%; z-index: -1; } section.animation span:hover { background-color: #19c37d; cursor: pointer; } :root { --hovered-index: 0; } section.animation.animationMove2 span:nth-of-type(1) { background-color: rgba(25, 195, 125, calc(1 - (1 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(1) { animation: changeSize 1s infinite; animation-delay: 75ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(1) { transform: rotate(0deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(1) { transform: rotate(0deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(1) { animation: move1 1s forwards 300ms; } @keyframes move1 { 0% { transform: rotate(0deg) translateX(0px); } 100% { transform: rotate(0deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(1) { animation: move1-phone 1s forwards 300ms; } @keyframes move1-phone { 0% { transform: rotate(0deg) translateX(0px); } 100% { transform: rotate(0deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(2) { background-color: rgba(25, 195, 125, calc(1 - (2 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(2) { animation: changeSize 1s infinite; animation-delay: 150ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(2) { transform: rotate(3.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(2) { transform: rotate(3.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(2) { animation: move2 1s forwards 300ms; } @keyframes move2 { 0% { transform: rotate(3.6deg) translateX(0px); } 100% { transform: rotate(3.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(2) { animation: move2-phone 1s forwards 300ms; } @keyframes move2-phone { 0% { transform: rotate(3.6deg) translateX(0px); } 100% { transform: rotate(3.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(3) { background-color: rgba(25, 195, 125, calc(1 - (3 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(3) { animation: changeSize 1s infinite; animation-delay: 225ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(3) { transform: rotate(7.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(3) { transform: rotate(7.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(3) { animation: move3 1s forwards 300ms; } @keyframes move3 { 0% { transform: rotate(7.2deg) translateX(0px); } 100% { transform: rotate(7.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(3) { animation: move3-phone 1s forwards 300ms; } @keyframes move3-phone { 0% { transform: rotate(7.2deg) translateX(0px); } 100% { transform: rotate(7.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(4) { background-color: rgba(25, 195, 125, calc(1 - (4 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(4) { animation: changeSize 1s infinite; animation-delay: 300ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(4) { transform: rotate(10.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(4) { transform: rotate(10.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(4) { animation: move4 1s forwards 300ms; } @keyframes move4 { 0% { transform: rotate(10.8deg) translateX(0px); } 100% { transform: rotate(10.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(4) { animation: move4-phone 1s forwards 300ms; } @keyframes move4-phone { 0% { transform: rotate(10.8deg) translateX(0px); } 100% { transform: rotate(10.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(5) { background-color: rgba(25, 195, 125, calc(1 - (5 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(5) { animation: changeSize 1s infinite; animation-delay: 375ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(5) { transform: rotate(14.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(5) { transform: rotate(14.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(5) { animation: move5 1s forwards 300ms; } @keyframes move5 { 0% { transform: rotate(14.4deg) translateX(0px); } 100% { transform: rotate(14.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(5) { animation: move5-phone 1s forwards 300ms; } @keyframes move5-phone { 0% { transform: rotate(14.4deg) translateX(0px); } 100% { transform: rotate(14.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(6) { background-color: rgba(25, 195, 125, calc(1 - (6 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(6) { animation: changeSize 1s infinite; animation-delay: 450ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(6) { transform: rotate(18deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(6) { transform: rotate(18deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(6) { animation: move6 1s forwards 300ms; } @keyframes move6 { 0% { transform: rotate(18deg) translateX(0px); } 100% { transform: rotate(18deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(6) { animation: move6-phone 1s forwards 300ms; } @keyframes move6-phone { 0% { transform: rotate(18deg) translateX(0px); } 100% { transform: rotate(18deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(7) { background-color: rgba(25, 195, 125, calc(1 - (7 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(7) { animation: changeSize 1s infinite; animation-delay: 525ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(7) { transform: rotate(21.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(7) { transform: rotate(21.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(7) { animation: move7 1s forwards 300ms; } @keyframes move7 { 0% { transform: rotate(21.6deg) translateX(0px); } 100% { transform: rotate(21.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(7) { animation: move7-phone 1s forwards 300ms; } @keyframes move7-phone { 0% { transform: rotate(21.6deg) translateX(0px); } 100% { transform: rotate(21.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(8) { background-color: rgba(25, 195, 125, calc(1 - (8 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(8) { animation: changeSize 1s infinite; animation-delay: 600ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(8) { transform: rotate(25.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(8) { transform: rotate(25.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(8) { animation: move8 1s forwards 300ms; } @keyframes move8 { 0% { transform: rotate(25.2deg) translateX(0px); } 100% { transform: rotate(25.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(8) { animation: move8-phone 1s forwards 300ms; } @keyframes move8-phone { 0% { transform: rotate(25.2deg) translateX(0px); } 100% { transform: rotate(25.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(9) { background-color: rgba(25, 195, 125, calc(1 - (9 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(9) { animation: changeSize 1s infinite; animation-delay: 675ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(9) { transform: rotate(28.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(9) { transform: rotate(28.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(9) { animation: move9 1s forwards 300ms; } @keyframes move9 { 0% { transform: rotate(28.8deg) translateX(0px); } 100% { transform: rotate(28.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(9) { animation: move9-phone 1s forwards 300ms; } @keyframes move9-phone { 0% { transform: rotate(28.8deg) translateX(0px); } 100% { transform: rotate(28.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(10) { background-color: rgba(25, 195, 125, calc(1 - (10 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(10) { animation: changeSize 1s infinite; animation-delay: 750ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(10) { transform: rotate(32.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(10) { transform: rotate(32.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(10) { animation: move10 1s forwards 300ms; } @keyframes move10 { 0% { transform: rotate(32.4deg) translateX(0px); } 100% { transform: rotate(32.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(10) { animation: move10-phone 1s forwards 300ms; } @keyframes move10-phone { 0% { transform: rotate(32.4deg) translateX(0px); } 100% { transform: rotate(32.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(11) { background-color: rgba(25, 195, 125, calc(1 - (11 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(11) { animation: changeSize 1s infinite; animation-delay: 825ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(11) { transform: rotate(36deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(11) { transform: rotate(36deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(11) { animation: move11 1s forwards 300ms; } @keyframes move11 { 0% { transform: rotate(36deg) translateX(0px); } 100% { transform: rotate(36deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(11) { animation: move11-phone 1s forwards 300ms; } @keyframes move11-phone { 0% { transform: rotate(36deg) translateX(0px); } 100% { transform: rotate(36deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(12) { background-color: rgba(25, 195, 125, calc(1 - (12 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(12) { animation: changeSize 1s infinite; animation-delay: 900ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(12) { transform: rotate(39.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(12) { transform: rotate(39.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(12) { animation: move12 1s forwards 300ms; } @keyframes move12 { 0% { transform: rotate(39.6deg) translateX(0px); } 100% { transform: rotate(39.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(12) { animation: move12-phone 1s forwards 300ms; } @keyframes move12-phone { 0% { transform: rotate(39.6deg) translateX(0px); } 100% { transform: rotate(39.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(13) { background-color: rgba(25, 195, 125, calc(1 - (13 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(13) { animation: changeSize 1s infinite; animation-delay: 975ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(13) { transform: rotate(43.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(13) { transform: rotate(43.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(13) { animation: move13 1s forwards 300ms; } @keyframes move13 { 0% { transform: rotate(43.2deg) translateX(0px); } 100% { transform: rotate(43.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(13) { animation: move13-phone 1s forwards 300ms; } @keyframes move13-phone { 0% { transform: rotate(43.2deg) translateX(0px); } 100% { transform: rotate(43.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(14) { background-color: rgba(25, 195, 125, calc(1 - (14 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(14) { animation: changeSize 1s infinite; animation-delay: 1050ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(14) { transform: rotate(46.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(14) { transform: rotate(46.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(14) { animation: move14 1s forwards 300ms; } @keyframes move14 { 0% { transform: rotate(46.8deg) translateX(0px); } 100% { transform: rotate(46.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(14) { animation: move14-phone 1s forwards 300ms; } @keyframes move14-phone { 0% { transform: rotate(46.8deg) translateX(0px); } 100% { transform: rotate(46.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(15) { background-color: rgba(25, 195, 125, calc(1 - (15 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(15) { animation: changeSize 1s infinite; animation-delay: 1125ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(15) { transform: rotate(50.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(15) { transform: rotate(50.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(15) { animation: move15 1s forwards 300ms; } @keyframes move15 { 0% { transform: rotate(50.4deg) translateX(0px); } 100% { transform: rotate(50.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(15) { animation: move15-phone 1s forwards 300ms; } @keyframes move15-phone { 0% { transform: rotate(50.4deg) translateX(0px); } 100% { transform: rotate(50.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(16) { background-color: rgba(25, 195, 125, calc(1 - (16 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(16) { animation: changeSize 1s infinite; animation-delay: 1200ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(16) { transform: rotate(54deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(16) { transform: rotate(54deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(16) { animation: move16 1s forwards 300ms; } @keyframes move16 { 0% { transform: rotate(54deg) translateX(0px); } 100% { transform: rotate(54deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(16) { animation: move16-phone 1s forwards 300ms; } @keyframes move16-phone { 0% { transform: rotate(54deg) translateX(0px); } 100% { transform: rotate(54deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(17) { background-color: rgba(25, 195, 125, calc(1 - (17 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(17) { animation: changeSize 1s infinite; animation-delay: 1275ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(17) { transform: rotate(57.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(17) { transform: rotate(57.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(17) { animation: move17 1s forwards 300ms; } @keyframes move17 { 0% { transform: rotate(57.6deg) translateX(0px); } 100% { transform: rotate(57.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(17) { animation: move17-phone 1s forwards 300ms; } @keyframes move17-phone { 0% { transform: rotate(57.6deg) translateX(0px); } 100% { transform: rotate(57.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(18) { background-color: rgba(25, 195, 125, calc(1 - (18 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(18) { animation: changeSize 1s infinite; animation-delay: 1350ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(18) { transform: rotate(61.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(18) { transform: rotate(61.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(18) { animation: move18 1s forwards 300ms; } @keyframes move18 { 0% { transform: rotate(61.2deg) translateX(0px); } 100% { transform: rotate(61.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(18) { animation: move18-phone 1s forwards 300ms; } @keyframes move18-phone { 0% { transform: rotate(61.2deg) translateX(0px); } 100% { transform: rotate(61.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(19) { background-color: rgba(25, 195, 125, calc(1 - (19 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(19) { animation: changeSize 1s infinite; animation-delay: 1425ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(19) { transform: rotate(64.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(19) { transform: rotate(64.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(19) { animation: move19 1s forwards 300ms; } @keyframes move19 { 0% { transform: rotate(64.8deg) translateX(0px); } 100% { transform: rotate(64.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(19) { animation: move19-phone 1s forwards 300ms; } @keyframes move19-phone { 0% { transform: rotate(64.8deg) translateX(0px); } 100% { transform: rotate(64.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(20) { background-color: rgba(25, 195, 125, calc(1 - (20 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(20) { animation: changeSize 1s infinite; animation-delay: 1500ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(20) { transform: rotate(68.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(20) { transform: rotate(68.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(20) { animation: move20 1s forwards 300ms; } @keyframes move20 { 0% { transform: rotate(68.4deg) translateX(0px); } 100% { transform: rotate(68.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(20) { animation: move20-phone 1s forwards 300ms; } @keyframes move20-phone { 0% { transform: rotate(68.4deg) translateX(0px); } 100% { transform: rotate(68.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(21) { background-color: rgba(25, 195, 125, calc(1 - (21 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(21) { animation: changeSize 1s infinite; animation-delay: 1575ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(21) { transform: rotate(72deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(21) { transform: rotate(72deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(21) { animation: move21 1s forwards 300ms; } @keyframes move21 { 0% { transform: rotate(72deg) translateX(0px); } 100% { transform: rotate(72deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(21) { animation: move21-phone 1s forwards 300ms; } @keyframes move21-phone { 0% { transform: rotate(72deg) translateX(0px); } 100% { transform: rotate(72deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(22) { background-color: rgba(25, 195, 125, calc(1 - (22 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(22) { animation: changeSize 1s infinite; animation-delay: 1650ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(22) { transform: rotate(75.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(22) { transform: rotate(75.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(22) { animation: move22 1s forwards 300ms; } @keyframes move22 { 0% { transform: rotate(75.6deg) translateX(0px); } 100% { transform: rotate(75.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(22) { animation: move22-phone 1s forwards 300ms; } @keyframes move22-phone { 0% { transform: rotate(75.6deg) translateX(0px); } 100% { transform: rotate(75.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(23) { background-color: rgba(25, 195, 125, calc(1 - (23 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(23) { animation: changeSize 1s infinite; animation-delay: 1725ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(23) { transform: rotate(79.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(23) { transform: rotate(79.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(23) { animation: move23 1s forwards 300ms; } @keyframes move23 { 0% { transform: rotate(79.2deg) translateX(0px); } 100% { transform: rotate(79.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(23) { animation: move23-phone 1s forwards 300ms; } @keyframes move23-phone { 0% { transform: rotate(79.2deg) translateX(0px); } 100% { transform: rotate(79.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(24) { background-color: rgba(25, 195, 125, calc(1 - (24 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(24) { animation: changeSize 1s infinite; animation-delay: 1800ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(24) { transform: rotate(82.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(24) { transform: rotate(82.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(24) { animation: move24 1s forwards 300ms; } @keyframes move24 { 0% { transform: rotate(82.8deg) translateX(0px); } 100% { transform: rotate(82.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(24) { animation: move24-phone 1s forwards 300ms; } @keyframes move24-phone { 0% { transform: rotate(82.8deg) translateX(0px); } 100% { transform: rotate(82.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(25) { background-color: rgba(25, 195, 125, calc(1 - (25 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(25) { animation: changeSize 1s infinite; animation-delay: 1875ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(25) { transform: rotate(86.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(25) { transform: rotate(86.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(25) { animation: move25 1s forwards 300ms; } @keyframes move25 { 0% { transform: rotate(86.4deg) translateX(0px); } 100% { transform: rotate(86.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(25) { animation: move25-phone 1s forwards 300ms; } @keyframes move25-phone { 0% { transform: rotate(86.4deg) translateX(0px); } 100% { transform: rotate(86.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(26) { background-color: rgba(25, 195, 125, calc(1 - (26 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(26) { animation: changeSize 1s infinite; animation-delay: 1950ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(26) { transform: rotate(90deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(26) { transform: rotate(90deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(26) { animation: move26 1s forwards 300ms; } @keyframes move26 { 0% { transform: rotate(90deg) translateX(0px); } 100% { transform: rotate(90deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(26) { animation: move26-phone 1s forwards 300ms; } @keyframes move26-phone { 0% { transform: rotate(90deg) translateX(0px); } 100% { transform: rotate(90deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(27) { background-color: rgba(25, 195, 125, calc(1 - (27 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(27) { animation: changeSize 1s infinite; animation-delay: 2025ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(27) { transform: rotate(93.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(27) { transform: rotate(93.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(27) { animation: move27 1s forwards 300ms; } @keyframes move27 { 0% { transform: rotate(93.6deg) translateX(0px); } 100% { transform: rotate(93.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(27) { animation: move27-phone 1s forwards 300ms; } @keyframes move27-phone { 0% { transform: rotate(93.6deg) translateX(0px); } 100% { transform: rotate(93.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(28) { background-color: rgba(25, 195, 125, calc(1 - (28 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(28) { animation: changeSize 1s infinite; animation-delay: 2100ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(28) { transform: rotate(97.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(28) { transform: rotate(97.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(28) { animation: move28 1s forwards 300ms; } @keyframes move28 { 0% { transform: rotate(97.2deg) translateX(0px); } 100% { transform: rotate(97.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(28) { animation: move28-phone 1s forwards 300ms; } @keyframes move28-phone { 0% { transform: rotate(97.2deg) translateX(0px); } 100% { transform: rotate(97.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(29) { background-color: rgba(25, 195, 125, calc(1 - (29 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(29) { animation: changeSize 1s infinite; animation-delay: 2175ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(29) { transform: rotate(100.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(29) { transform: rotate(100.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(29) { animation: move29 1s forwards 300ms; } @keyframes move29 { 0% { transform: rotate(100.8deg) translateX(0px); } 100% { transform: rotate(100.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(29) { animation: move29-phone 1s forwards 300ms; } @keyframes move29-phone { 0% { transform: rotate(100.8deg) translateX(0px); } 100% { transform: rotate(100.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(30) { background-color: rgba(25, 195, 125, calc(1 - (30 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(30) { animation: changeSize 1s infinite; animation-delay: 2250ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(30) { transform: rotate(104.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(30) { transform: rotate(104.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(30) { animation: move30 1s forwards 300ms; } @keyframes move30 { 0% { transform: rotate(104.4deg) translateX(0px); } 100% { transform: rotate(104.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(30) { animation: move30-phone 1s forwards 300ms; } @keyframes move30-phone { 0% { transform: rotate(104.4deg) translateX(0px); } 100% { transform: rotate(104.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(31) { background-color: rgba(25, 195, 125, calc(1 - (31 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(31) { animation: changeSize 1s infinite; animation-delay: 2325ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(31) { transform: rotate(108deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(31) { transform: rotate(108deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(31) { animation: move31 1s forwards 300ms; } @keyframes move31 { 0% { transform: rotate(108deg) translateX(0px); } 100% { transform: rotate(108deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(31) { animation: move31-phone 1s forwards 300ms; } @keyframes move31-phone { 0% { transform: rotate(108deg) translateX(0px); } 100% { transform: rotate(108deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(32) { background-color: rgba(25, 195, 125, calc(1 - (32 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(32) { animation: changeSize 1s infinite; animation-delay: 2400ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(32) { transform: rotate(111.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(32) { transform: rotate(111.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(32) { animation: move32 1s forwards 300ms; } @keyframes move32 { 0% { transform: rotate(111.6deg) translateX(0px); } 100% { transform: rotate(111.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(32) { animation: move32-phone 1s forwards 300ms; } @keyframes move32-phone { 0% { transform: rotate(111.6deg) translateX(0px); } 100% { transform: rotate(111.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(33) { background-color: rgba(25, 195, 125, calc(1 - (33 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(33) { animation: changeSize 1s infinite; animation-delay: 2475ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(33) { transform: rotate(115.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(33) { transform: rotate(115.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(33) { animation: move33 1s forwards 300ms; } @keyframes move33 { 0% { transform: rotate(115.2deg) translateX(0px); } 100% { transform: rotate(115.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(33) { animation: move33-phone 1s forwards 300ms; } @keyframes move33-phone { 0% { transform: rotate(115.2deg) translateX(0px); } 100% { transform: rotate(115.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(34) { background-color: rgba(25, 195, 125, calc(1 - (34 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(34) { animation: changeSize 1s infinite; animation-delay: 2550ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(34) { transform: rotate(118.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(34) { transform: rotate(118.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(34) { animation: move34 1s forwards 300ms; } @keyframes move34 { 0% { transform: rotate(118.8deg) translateX(0px); } 100% { transform: rotate(118.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(34) { animation: move34-phone 1s forwards 300ms; } @keyframes move34-phone { 0% { transform: rotate(118.8deg) translateX(0px); } 100% { transform: rotate(118.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(35) { background-color: rgba(25, 195, 125, calc(1 - (35 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(35) { animation: changeSize 1s infinite; animation-delay: 2625ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(35) { transform: rotate(122.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(35) { transform: rotate(122.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(35) { animation: move35 1s forwards 300ms; } @keyframes move35 { 0% { transform: rotate(122.4deg) translateX(0px); } 100% { transform: rotate(122.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(35) { animation: move35-phone 1s forwards 300ms; } @keyframes move35-phone { 0% { transform: rotate(122.4deg) translateX(0px); } 100% { transform: rotate(122.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(36) { background-color: rgba(25, 195, 125, calc(1 - (36 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(36) { animation: changeSize 1s infinite; animation-delay: 2700ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(36) { transform: rotate(126deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(36) { transform: rotate(126deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(36) { animation: move36 1s forwards 300ms; } @keyframes move36 { 0% { transform: rotate(126deg) translateX(0px); } 100% { transform: rotate(126deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(36) { animation: move36-phone 1s forwards 300ms; } @keyframes move36-phone { 0% { transform: rotate(126deg) translateX(0px); } 100% { transform: rotate(126deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(37) { background-color: rgba(25, 195, 125, calc(1 - (37 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(37) { animation: changeSize 1s infinite; animation-delay: 2775ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(37) { transform: rotate(129.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(37) { transform: rotate(129.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(37) { animation: move37 1s forwards 300ms; } @keyframes move37 { 0% { transform: rotate(129.6deg) translateX(0px); } 100% { transform: rotate(129.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(37) { animation: move37-phone 1s forwards 300ms; } @keyframes move37-phone { 0% { transform: rotate(129.6deg) translateX(0px); } 100% { transform: rotate(129.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(38) { background-color: rgba(25, 195, 125, calc(1 - (38 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(38) { animation: changeSize 1s infinite; animation-delay: 2850ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(38) { transform: rotate(133.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(38) { transform: rotate(133.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(38) { animation: move38 1s forwards 300ms; } @keyframes move38 { 0% { transform: rotate(133.2deg) translateX(0px); } 100% { transform: rotate(133.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(38) { animation: move38-phone 1s forwards 300ms; } @keyframes move38-phone { 0% { transform: rotate(133.2deg) translateX(0px); } 100% { transform: rotate(133.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(39) { background-color: rgba(25, 195, 125, calc(1 - (39 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(39) { animation: changeSize 1s infinite; animation-delay: 2925ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(39) { transform: rotate(136.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(39) { transform: rotate(136.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(39) { animation: move39 1s forwards 300ms; } @keyframes move39 { 0% { transform: rotate(136.8deg) translateX(0px); } 100% { transform: rotate(136.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(39) { animation: move39-phone 1s forwards 300ms; } @keyframes move39-phone { 0% { transform: rotate(136.8deg) translateX(0px); } 100% { transform: rotate(136.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(40) { background-color: rgba(25, 195, 125, calc(1 - (40 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(40) { animation: changeSize 1s infinite; animation-delay: 3000ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(40) { transform: rotate(140.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(40) { transform: rotate(140.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(40) { animation: move40 1s forwards 300ms; } @keyframes move40 { 0% { transform: rotate(140.4deg) translateX(0px); } 100% { transform: rotate(140.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(40) { animation: move40-phone 1s forwards 300ms; } @keyframes move40-phone { 0% { transform: rotate(140.4deg) translateX(0px); } 100% { transform: rotate(140.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(41) { background-color: rgba(25, 195, 125, calc(1 - (41 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(41) { animation: changeSize 1s infinite; animation-delay: 3075ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(41) { transform: rotate(144deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(41) { transform: rotate(144deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(41) { animation: move41 1s forwards 300ms; } @keyframes move41 { 0% { transform: rotate(144deg) translateX(0px); } 100% { transform: rotate(144deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(41) { animation: move41-phone 1s forwards 300ms; } @keyframes move41-phone { 0% { transform: rotate(144deg) translateX(0px); } 100% { transform: rotate(144deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(42) { background-color: rgba(25, 195, 125, calc(1 - (42 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(42) { animation: changeSize 1s infinite; animation-delay: 3150ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(42) { transform: rotate(147.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(42) { transform: rotate(147.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(42) { animation: move42 1s forwards 300ms; } @keyframes move42 { 0% { transform: rotate(147.6deg) translateX(0px); } 100% { transform: rotate(147.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(42) { animation: move42-phone 1s forwards 300ms; } @keyframes move42-phone { 0% { transform: rotate(147.6deg) translateX(0px); } 100% { transform: rotate(147.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(43) { background-color: rgba(25, 195, 125, calc(1 - (43 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(43) { animation: changeSize 1s infinite; animation-delay: 3225ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(43) { transform: rotate(151.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(43) { transform: rotate(151.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(43) { animation: move43 1s forwards 300ms; } @keyframes move43 { 0% { transform: rotate(151.2deg) translateX(0px); } 100% { transform: rotate(151.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(43) { animation: move43-phone 1s forwards 300ms; } @keyframes move43-phone { 0% { transform: rotate(151.2deg) translateX(0px); } 100% { transform: rotate(151.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(44) { background-color: rgba(25, 195, 125, calc(1 - (44 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(44) { animation: changeSize 1s infinite; animation-delay: 3300ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(44) { transform: rotate(154.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(44) { transform: rotate(154.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(44) { animation: move44 1s forwards 300ms; } @keyframes move44 { 0% { transform: rotate(154.8deg) translateX(0px); } 100% { transform: rotate(154.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(44) { animation: move44-phone 1s forwards 300ms; } @keyframes move44-phone { 0% { transform: rotate(154.8deg) translateX(0px); } 100% { transform: rotate(154.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(45) { background-color: rgba(25, 195, 125, calc(1 - (45 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(45) { animation: changeSize 1s infinite; animation-delay: 3375ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(45) { transform: rotate(158.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(45) { transform: rotate(158.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(45) { animation: move45 1s forwards 300ms; } @keyframes move45 { 0% { transform: rotate(158.4deg) translateX(0px); } 100% { transform: rotate(158.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(45) { animation: move45-phone 1s forwards 300ms; } @keyframes move45-phone { 0% { transform: rotate(158.4deg) translateX(0px); } 100% { transform: rotate(158.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(46) { background-color: rgba(25, 195, 125, calc(1 - (46 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(46) { animation: changeSize 1s infinite; animation-delay: 3450ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(46) { transform: rotate(162deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(46) { transform: rotate(162deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(46) { animation: move46 1s forwards 300ms; } @keyframes move46 { 0% { transform: rotate(162deg) translateX(0px); } 100% { transform: rotate(162deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(46) { animation: move46-phone 1s forwards 300ms; } @keyframes move46-phone { 0% { transform: rotate(162deg) translateX(0px); } 100% { transform: rotate(162deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(47) { background-color: rgba(25, 195, 125, calc(1 - (47 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(47) { animation: changeSize 1s infinite; animation-delay: 3525ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(47) { transform: rotate(165.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(47) { transform: rotate(165.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(47) { animation: move47 1s forwards 300ms; } @keyframes move47 { 0% { transform: rotate(165.6deg) translateX(0px); } 100% { transform: rotate(165.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(47) { animation: move47-phone 1s forwards 300ms; } @keyframes move47-phone { 0% { transform: rotate(165.6deg) translateX(0px); } 100% { transform: rotate(165.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(48) { background-color: rgba(25, 195, 125, calc(1 - (48 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(48) { animation: changeSize 1s infinite; animation-delay: 3600ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(48) { transform: rotate(169.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(48) { transform: rotate(169.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(48) { animation: move48 1s forwards 300ms; } @keyframes move48 { 0% { transform: rotate(169.2deg) translateX(0px); } 100% { transform: rotate(169.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(48) { animation: move48-phone 1s forwards 300ms; } @keyframes move48-phone { 0% { transform: rotate(169.2deg) translateX(0px); } 100% { transform: rotate(169.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(49) { background-color: rgba(25, 195, 125, calc(1 - (49 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(49) { animation: changeSize 1s infinite; animation-delay: 3675ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(49) { transform: rotate(172.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(49) { transform: rotate(172.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(49) { animation: move49 1s forwards 300ms; } @keyframes move49 { 0% { transform: rotate(172.8deg) translateX(0px); } 100% { transform: rotate(172.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(49) { animation: move49-phone 1s forwards 300ms; } @keyframes move49-phone { 0% { transform: rotate(172.8deg) translateX(0px); } 100% { transform: rotate(172.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(50) { background-color: rgba(25, 195, 125, calc(1 - (50 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(50) { animation: changeSize 1s infinite; animation-delay: 3750ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(50) { transform: rotate(176.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(50) { transform: rotate(176.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(50) { animation: move50 1s forwards 300ms; } @keyframes move50 { 0% { transform: rotate(176.4deg) translateX(0px); } 100% { transform: rotate(176.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(50) { animation: move50-phone 1s forwards 300ms; } @keyframes move50-phone { 0% { transform: rotate(176.4deg) translateX(0px); } 100% { transform: rotate(176.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(51) { background-color: rgba(25, 195, 125, calc(1 - (51 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(51) { animation: changeSize 1s infinite; animation-delay: 3825ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(51) { transform: rotate(180deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(51) { transform: rotate(180deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(51) { animation: move51 1s forwards 300ms; } @keyframes move51 { 0% { transform: rotate(180deg) translateX(0px); } 100% { transform: rotate(180deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(51) { animation: move51-phone 1s forwards 300ms; } @keyframes move51-phone { 0% { transform: rotate(180deg) translateX(0px); } 100% { transform: rotate(180deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(52) { background-color: rgba(25, 195, 125, calc(1 - (52 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(52) { animation: changeSize 1s infinite; animation-delay: 3900ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(52) { transform: rotate(183.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(52) { transform: rotate(183.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(52) { animation: move52 1s forwards 300ms; } @keyframes move52 { 0% { transform: rotate(183.6deg) translateX(0px); } 100% { transform: rotate(183.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(52) { animation: move52-phone 1s forwards 300ms; } @keyframes move52-phone { 0% { transform: rotate(183.6deg) translateX(0px); } 100% { transform: rotate(183.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(53) { background-color: rgba(25, 195, 125, calc(1 - (53 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(53) { animation: changeSize 1s infinite; animation-delay: 3975ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(53) { transform: rotate(187.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(53) { transform: rotate(187.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(53) { animation: move53 1s forwards 300ms; } @keyframes move53 { 0% { transform: rotate(187.2deg) translateX(0px); } 100% { transform: rotate(187.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(53) { animation: move53-phone 1s forwards 300ms; } @keyframes move53-phone { 0% { transform: rotate(187.2deg) translateX(0px); } 100% { transform: rotate(187.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(54) { background-color: rgba(25, 195, 125, calc(1 - (54 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(54) { animation: changeSize 1s infinite; animation-delay: 4050ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(54) { transform: rotate(190.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(54) { transform: rotate(190.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(54) { animation: move54 1s forwards 300ms; } @keyframes move54 { 0% { transform: rotate(190.8deg) translateX(0px); } 100% { transform: rotate(190.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(54) { animation: move54-phone 1s forwards 300ms; } @keyframes move54-phone { 0% { transform: rotate(190.8deg) translateX(0px); } 100% { transform: rotate(190.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(55) { background-color: rgba(25, 195, 125, calc(1 - (55 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(55) { animation: changeSize 1s infinite; animation-delay: 4125ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(55) { transform: rotate(194.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(55) { transform: rotate(194.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(55) { animation: move55 1s forwards 300ms; } @keyframes move55 { 0% { transform: rotate(194.4deg) translateX(0px); } 100% { transform: rotate(194.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(55) { animation: move55-phone 1s forwards 300ms; } @keyframes move55-phone { 0% { transform: rotate(194.4deg) translateX(0px); } 100% { transform: rotate(194.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(56) { background-color: rgba(25, 195, 125, calc(1 - (56 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(56) { animation: changeSize 1s infinite; animation-delay: 4200ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(56) { transform: rotate(198deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(56) { transform: rotate(198deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(56) { animation: move56 1s forwards 300ms; } @keyframes move56 { 0% { transform: rotate(198deg) translateX(0px); } 100% { transform: rotate(198deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(56) { animation: move56-phone 1s forwards 300ms; } @keyframes move56-phone { 0% { transform: rotate(198deg) translateX(0px); } 100% { transform: rotate(198deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(57) { background-color: rgba(25, 195, 125, calc(1 - (57 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(57) { animation: changeSize 1s infinite; animation-delay: 4275ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(57) { transform: rotate(201.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(57) { transform: rotate(201.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(57) { animation: move57 1s forwards 300ms; } @keyframes move57 { 0% { transform: rotate(201.6deg) translateX(0px); } 100% { transform: rotate(201.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(57) { animation: move57-phone 1s forwards 300ms; } @keyframes move57-phone { 0% { transform: rotate(201.6deg) translateX(0px); } 100% { transform: rotate(201.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(58) { background-color: rgba(25, 195, 125, calc(1 - (58 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(58) { animation: changeSize 1s infinite; animation-delay: 4350ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(58) { transform: rotate(205.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(58) { transform: rotate(205.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(58) { animation: move58 1s forwards 300ms; } @keyframes move58 { 0% { transform: rotate(205.2deg) translateX(0px); } 100% { transform: rotate(205.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(58) { animation: move58-phone 1s forwards 300ms; } @keyframes move58-phone { 0% { transform: rotate(205.2deg) translateX(0px); } 100% { transform: rotate(205.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(59) { background-color: rgba(25, 195, 125, calc(1 - (59 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(59) { animation: changeSize 1s infinite; animation-delay: 4425ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(59) { transform: rotate(208.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(59) { transform: rotate(208.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(59) { animation: move59 1s forwards 300ms; } @keyframes move59 { 0% { transform: rotate(208.8deg) translateX(0px); } 100% { transform: rotate(208.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(59) { animation: move59-phone 1s forwards 300ms; } @keyframes move59-phone { 0% { transform: rotate(208.8deg) translateX(0px); } 100% { transform: rotate(208.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(60) { background-color: rgba(25, 195, 125, calc(1 - (60 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(60) { animation: changeSize 1s infinite; animation-delay: 4500ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(60) { transform: rotate(212.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(60) { transform: rotate(212.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(60) { animation: move60 1s forwards 300ms; } @keyframes move60 { 0% { transform: rotate(212.4deg) translateX(0px); } 100% { transform: rotate(212.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(60) { animation: move60-phone 1s forwards 300ms; } @keyframes move60-phone { 0% { transform: rotate(212.4deg) translateX(0px); } 100% { transform: rotate(212.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(61) { background-color: rgba(25, 195, 125, calc(1 - (61 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(61) { animation: changeSize 1s infinite; animation-delay: 4575ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(61) { transform: rotate(216deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(61) { transform: rotate(216deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(61) { animation: move61 1s forwards 300ms; } @keyframes move61 { 0% { transform: rotate(216deg) translateX(0px); } 100% { transform: rotate(216deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(61) { animation: move61-phone 1s forwards 300ms; } @keyframes move61-phone { 0% { transform: rotate(216deg) translateX(0px); } 100% { transform: rotate(216deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(62) { background-color: rgba(25, 195, 125, calc(1 - (62 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(62) { animation: changeSize 1s infinite; animation-delay: 4650ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(62) { transform: rotate(219.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(62) { transform: rotate(219.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(62) { animation: move62 1s forwards 300ms; } @keyframes move62 { 0% { transform: rotate(219.6deg) translateX(0px); } 100% { transform: rotate(219.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(62) { animation: move62-phone 1s forwards 300ms; } @keyframes move62-phone { 0% { transform: rotate(219.6deg) translateX(0px); } 100% { transform: rotate(219.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(63) { background-color: rgba(25, 195, 125, calc(1 - (63 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(63) { animation: changeSize 1s infinite; animation-delay: 4725ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(63) { transform: rotate(223.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(63) { transform: rotate(223.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(63) { animation: move63 1s forwards 300ms; } @keyframes move63 { 0% { transform: rotate(223.2deg) translateX(0px); } 100% { transform: rotate(223.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(63) { animation: move63-phone 1s forwards 300ms; } @keyframes move63-phone { 0% { transform: rotate(223.2deg) translateX(0px); } 100% { transform: rotate(223.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(64) { background-color: rgba(25, 195, 125, calc(1 - (64 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(64) { animation: changeSize 1s infinite; animation-delay: 4800ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(64) { transform: rotate(226.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(64) { transform: rotate(226.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(64) { animation: move64 1s forwards 300ms; } @keyframes move64 { 0% { transform: rotate(226.8deg) translateX(0px); } 100% { transform: rotate(226.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(64) { animation: move64-phone 1s forwards 300ms; } @keyframes move64-phone { 0% { transform: rotate(226.8deg) translateX(0px); } 100% { transform: rotate(226.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(65) { background-color: rgba(25, 195, 125, calc(1 - (65 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(65) { animation: changeSize 1s infinite; animation-delay: 4875ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(65) { transform: rotate(230.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(65) { transform: rotate(230.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(65) { animation: move65 1s forwards 300ms; } @keyframes move65 { 0% { transform: rotate(230.4deg) translateX(0px); } 100% { transform: rotate(230.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(65) { animation: move65-phone 1s forwards 300ms; } @keyframes move65-phone { 0% { transform: rotate(230.4deg) translateX(0px); } 100% { transform: rotate(230.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(66) { background-color: rgba(25, 195, 125, calc(1 - (66 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(66) { animation: changeSize 1s infinite; animation-delay: 4950ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(66) { transform: rotate(234deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(66) { transform: rotate(234deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(66) { animation: move66 1s forwards 300ms; } @keyframes move66 { 0% { transform: rotate(234deg) translateX(0px); } 100% { transform: rotate(234deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(66) { animation: move66-phone 1s forwards 300ms; } @keyframes move66-phone { 0% { transform: rotate(234deg) translateX(0px); } 100% { transform: rotate(234deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(67) { background-color: rgba(25, 195, 125, calc(1 - (67 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(67) { animation: changeSize 1s infinite; animation-delay: 5025ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(67) { transform: rotate(237.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(67) { transform: rotate(237.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(67) { animation: move67 1s forwards 300ms; } @keyframes move67 { 0% { transform: rotate(237.6deg) translateX(0px); } 100% { transform: rotate(237.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(67) { animation: move67-phone 1s forwards 300ms; } @keyframes move67-phone { 0% { transform: rotate(237.6deg) translateX(0px); } 100% { transform: rotate(237.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(68) { background-color: rgba(25, 195, 125, calc(1 - (68 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(68) { animation: changeSize 1s infinite; animation-delay: 5100ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(68) { transform: rotate(241.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(68) { transform: rotate(241.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(68) { animation: move68 1s forwards 300ms; } @keyframes move68 { 0% { transform: rotate(241.2deg) translateX(0px); } 100% { transform: rotate(241.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(68) { animation: move68-phone 1s forwards 300ms; } @keyframes move68-phone { 0% { transform: rotate(241.2deg) translateX(0px); } 100% { transform: rotate(241.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(69) { background-color: rgba(25, 195, 125, calc(1 - (69 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(69) { animation: changeSize 1s infinite; animation-delay: 5175ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(69) { transform: rotate(244.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(69) { transform: rotate(244.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(69) { animation: move69 1s forwards 300ms; } @keyframes move69 { 0% { transform: rotate(244.8deg) translateX(0px); } 100% { transform: rotate(244.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(69) { animation: move69-phone 1s forwards 300ms; } @keyframes move69-phone { 0% { transform: rotate(244.8deg) translateX(0px); } 100% { transform: rotate(244.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(70) { background-color: rgba(25, 195, 125, calc(1 - (70 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(70) { animation: changeSize 1s infinite; animation-delay: 5250ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(70) { transform: rotate(248.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(70) { transform: rotate(248.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(70) { animation: move70 1s forwards 300ms; } @keyframes move70 { 0% { transform: rotate(248.4deg) translateX(0px); } 100% { transform: rotate(248.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(70) { animation: move70-phone 1s forwards 300ms; } @keyframes move70-phone { 0% { transform: rotate(248.4deg) translateX(0px); } 100% { transform: rotate(248.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(71) { background-color: rgba(25, 195, 125, calc(1 - (71 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(71) { animation: changeSize 1s infinite; animation-delay: 5325ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(71) { transform: rotate(252deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(71) { transform: rotate(252deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(71) { animation: move71 1s forwards 300ms; } @keyframes move71 { 0% { transform: rotate(252deg) translateX(0px); } 100% { transform: rotate(252deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(71) { animation: move71-phone 1s forwards 300ms; } @keyframes move71-phone { 0% { transform: rotate(252deg) translateX(0px); } 100% { transform: rotate(252deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(72) { background-color: rgba(25, 195, 125, calc(1 - (72 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(72) { animation: changeSize 1s infinite; animation-delay: 5400ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(72) { transform: rotate(255.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(72) { transform: rotate(255.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(72) { animation: move72 1s forwards 300ms; } @keyframes move72 { 0% { transform: rotate(255.6deg) translateX(0px); } 100% { transform: rotate(255.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(72) { animation: move72-phone 1s forwards 300ms; } @keyframes move72-phone { 0% { transform: rotate(255.6deg) translateX(0px); } 100% { transform: rotate(255.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(73) { background-color: rgba(25, 195, 125, calc(1 - (73 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(73) { animation: changeSize 1s infinite; animation-delay: 5475ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(73) { transform: rotate(259.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(73) { transform: rotate(259.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(73) { animation: move73 1s forwards 300ms; } @keyframes move73 { 0% { transform: rotate(259.2deg) translateX(0px); } 100% { transform: rotate(259.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(73) { animation: move73-phone 1s forwards 300ms; } @keyframes move73-phone { 0% { transform: rotate(259.2deg) translateX(0px); } 100% { transform: rotate(259.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(74) { background-color: rgba(25, 195, 125, calc(1 - (74 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(74) { animation: changeSize 1s infinite; animation-delay: 5550ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(74) { transform: rotate(262.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(74) { transform: rotate(262.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(74) { animation: move74 1s forwards 300ms; } @keyframes move74 { 0% { transform: rotate(262.8deg) translateX(0px); } 100% { transform: rotate(262.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(74) { animation: move74-phone 1s forwards 300ms; } @keyframes move74-phone { 0% { transform: rotate(262.8deg) translateX(0px); } 100% { transform: rotate(262.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(75) { background-color: rgba(25, 195, 125, calc(1 - (75 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(75) { animation: changeSize 1s infinite; animation-delay: 5625ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(75) { transform: rotate(266.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(75) { transform: rotate(266.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(75) { animation: move75 1s forwards 300ms; } @keyframes move75 { 0% { transform: rotate(266.4deg) translateX(0px); } 100% { transform: rotate(266.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(75) { animation: move75-phone 1s forwards 300ms; } @keyframes move75-phone { 0% { transform: rotate(266.4deg) translateX(0px); } 100% { transform: rotate(266.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(76) { background-color: rgba(25, 195, 125, calc(1 - (76 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(76) { animation: changeSize 1s infinite; animation-delay: 5700ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(76) { transform: rotate(270deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(76) { transform: rotate(270deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(76) { animation: move76 1s forwards 300ms; } @keyframes move76 { 0% { transform: rotate(270deg) translateX(0px); } 100% { transform: rotate(270deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(76) { animation: move76-phone 1s forwards 300ms; } @keyframes move76-phone { 0% { transform: rotate(270deg) translateX(0px); } 100% { transform: rotate(270deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(77) { background-color: rgba(25, 195, 125, calc(1 - (77 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(77) { animation: changeSize 1s infinite; animation-delay: 5775ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(77) { transform: rotate(273.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(77) { transform: rotate(273.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(77) { animation: move77 1s forwards 300ms; } @keyframes move77 { 0% { transform: rotate(273.6deg) translateX(0px); } 100% { transform: rotate(273.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(77) { animation: move77-phone 1s forwards 300ms; } @keyframes move77-phone { 0% { transform: rotate(273.6deg) translateX(0px); } 100% { transform: rotate(273.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(78) { background-color: rgba(25, 195, 125, calc(1 - (78 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(78) { animation: changeSize 1s infinite; animation-delay: 5850ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(78) { transform: rotate(277.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(78) { transform: rotate(277.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(78) { animation: move78 1s forwards 300ms; } @keyframes move78 { 0% { transform: rotate(277.2deg) translateX(0px); } 100% { transform: rotate(277.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(78) { animation: move78-phone 1s forwards 300ms; } @keyframes move78-phone { 0% { transform: rotate(277.2deg) translateX(0px); } 100% { transform: rotate(277.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(79) { background-color: rgba(25, 195, 125, calc(1 - (79 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(79) { animation: changeSize 1s infinite; animation-delay: 5925ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(79) { transform: rotate(280.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(79) { transform: rotate(280.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(79) { animation: move79 1s forwards 300ms; } @keyframes move79 { 0% { transform: rotate(280.8deg) translateX(0px); } 100% { transform: rotate(280.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(79) { animation: move79-phone 1s forwards 300ms; } @keyframes move79-phone { 0% { transform: rotate(280.8deg) translateX(0px); } 100% { transform: rotate(280.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(80) { background-color: rgba(25, 195, 125, calc(1 - (80 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(80) { animation: changeSize 1s infinite; animation-delay: 6000ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(80) { transform: rotate(284.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(80) { transform: rotate(284.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(80) { animation: move80 1s forwards 300ms; } @keyframes move80 { 0% { transform: rotate(284.4deg) translateX(0px); } 100% { transform: rotate(284.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(80) { animation: move80-phone 1s forwards 300ms; } @keyframes move80-phone { 0% { transform: rotate(284.4deg) translateX(0px); } 100% { transform: rotate(284.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(81) { background-color: rgba(25, 195, 125, calc(1 - (81 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(81) { animation: changeSize 1s infinite; animation-delay: 6075ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(81) { transform: rotate(288deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(81) { transform: rotate(288deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(81) { animation: move81 1s forwards 300ms; } @keyframes move81 { 0% { transform: rotate(288deg) translateX(0px); } 100% { transform: rotate(288deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(81) { animation: move81-phone 1s forwards 300ms; } @keyframes move81-phone { 0% { transform: rotate(288deg) translateX(0px); } 100% { transform: rotate(288deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(82) { background-color: rgba(25, 195, 125, calc(1 - (82 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(82) { animation: changeSize 1s infinite; animation-delay: 6150ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(82) { transform: rotate(291.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(82) { transform: rotate(291.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(82) { animation: move82 1s forwards 300ms; } @keyframes move82 { 0% { transform: rotate(291.6deg) translateX(0px); } 100% { transform: rotate(291.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(82) { animation: move82-phone 1s forwards 300ms; } @keyframes move82-phone { 0% { transform: rotate(291.6deg) translateX(0px); } 100% { transform: rotate(291.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(83) { background-color: rgba(25, 195, 125, calc(1 - (83 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(83) { animation: changeSize 1s infinite; animation-delay: 6225ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(83) { transform: rotate(295.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(83) { transform: rotate(295.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(83) { animation: move83 1s forwards 300ms; } @keyframes move83 { 0% { transform: rotate(295.2deg) translateX(0px); } 100% { transform: rotate(295.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(83) { animation: move83-phone 1s forwards 300ms; } @keyframes move83-phone { 0% { transform: rotate(295.2deg) translateX(0px); } 100% { transform: rotate(295.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(84) { background-color: rgba(25, 195, 125, calc(1 - (84 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(84) { animation: changeSize 1s infinite; animation-delay: 6300ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(84) { transform: rotate(298.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(84) { transform: rotate(298.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(84) { animation: move84 1s forwards 300ms; } @keyframes move84 { 0% { transform: rotate(298.8deg) translateX(0px); } 100% { transform: rotate(298.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(84) { animation: move84-phone 1s forwards 300ms; } @keyframes move84-phone { 0% { transform: rotate(298.8deg) translateX(0px); } 100% { transform: rotate(298.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(85) { background-color: rgba(25, 195, 125, calc(1 - (85 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(85) { animation: changeSize 1s infinite; animation-delay: 6375ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(85) { transform: rotate(302.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(85) { transform: rotate(302.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(85) { animation: move85 1s forwards 300ms; } @keyframes move85 { 0% { transform: rotate(302.4deg) translateX(0px); } 100% { transform: rotate(302.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(85) { animation: move85-phone 1s forwards 300ms; } @keyframes move85-phone { 0% { transform: rotate(302.4deg) translateX(0px); } 100% { transform: rotate(302.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(86) { background-color: rgba(25, 195, 125, calc(1 - (86 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(86) { animation: changeSize 1s infinite; animation-delay: 6450ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(86) { transform: rotate(306deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(86) { transform: rotate(306deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(86) { animation: move86 1s forwards 300ms; } @keyframes move86 { 0% { transform: rotate(306deg) translateX(0px); } 100% { transform: rotate(306deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(86) { animation: move86-phone 1s forwards 300ms; } @keyframes move86-phone { 0% { transform: rotate(306deg) translateX(0px); } 100% { transform: rotate(306deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(87) { background-color: rgba(25, 195, 125, calc(1 - (87 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(87) { animation: changeSize 1s infinite; animation-delay: 6525ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(87) { transform: rotate(309.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(87) { transform: rotate(309.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(87) { animation: move87 1s forwards 300ms; } @keyframes move87 { 0% { transform: rotate(309.6deg) translateX(0px); } 100% { transform: rotate(309.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(87) { animation: move87-phone 1s forwards 300ms; } @keyframes move87-phone { 0% { transform: rotate(309.6deg) translateX(0px); } 100% { transform: rotate(309.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(88) { background-color: rgba(25, 195, 125, calc(1 - (88 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(88) { animation: changeSize 1s infinite; animation-delay: 6600ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(88) { transform: rotate(313.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(88) { transform: rotate(313.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(88) { animation: move88 1s forwards 300ms; } @keyframes move88 { 0% { transform: rotate(313.2deg) translateX(0px); } 100% { transform: rotate(313.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(88) { animation: move88-phone 1s forwards 300ms; } @keyframes move88-phone { 0% { transform: rotate(313.2deg) translateX(0px); } 100% { transform: rotate(313.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(89) { background-color: rgba(25, 195, 125, calc(1 - (89 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(89) { animation: changeSize 1s infinite; animation-delay: 6675ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(89) { transform: rotate(316.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(89) { transform: rotate(316.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(89) { animation: move89 1s forwards 300ms; } @keyframes move89 { 0% { transform: rotate(316.8deg) translateX(0px); } 100% { transform: rotate(316.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(89) { animation: move89-phone 1s forwards 300ms; } @keyframes move89-phone { 0% { transform: rotate(316.8deg) translateX(0px); } 100% { transform: rotate(316.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(90) { background-color: rgba(25, 195, 125, calc(1 - (90 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(90) { animation: changeSize 1s infinite; animation-delay: 6750ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(90) { transform: rotate(320.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(90) { transform: rotate(320.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(90) { animation: move90 1s forwards 300ms; } @keyframes move90 { 0% { transform: rotate(320.4deg) translateX(0px); } 100% { transform: rotate(320.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(90) { animation: move90-phone 1s forwards 300ms; } @keyframes move90-phone { 0% { transform: rotate(320.4deg) translateX(0px); } 100% { transform: rotate(320.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(91) { background-color: rgba(25, 195, 125, calc(1 - (91 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(91) { animation: changeSize 1s infinite; animation-delay: 6825ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(91) { transform: rotate(324deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(91) { transform: rotate(324deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(91) { animation: move91 1s forwards 300ms; } @keyframes move91 { 0% { transform: rotate(324deg) translateX(0px); } 100% { transform: rotate(324deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(91) { animation: move91-phone 1s forwards 300ms; } @keyframes move91-phone { 0% { transform: rotate(324deg) translateX(0px); } 100% { transform: rotate(324deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(92) { background-color: rgba(25, 195, 125, calc(1 - (92 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(92) { animation: changeSize 1s infinite; animation-delay: 6900ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(92) { transform: rotate(327.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(92) { transform: rotate(327.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(92) { animation: move92 1s forwards 300ms; } @keyframes move92 { 0% { transform: rotate(327.6deg) translateX(0px); } 100% { transform: rotate(327.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(92) { animation: move92-phone 1s forwards 300ms; } @keyframes move92-phone { 0% { transform: rotate(327.6deg) translateX(0px); } 100% { transform: rotate(327.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(93) { background-color: rgba(25, 195, 125, calc(1 - (93 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(93) { animation: changeSize 1s infinite; animation-delay: 6975ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(93) { transform: rotate(331.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(93) { transform: rotate(331.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(93) { animation: move93 1s forwards 300ms; } @keyframes move93 { 0% { transform: rotate(331.2deg) translateX(0px); } 100% { transform: rotate(331.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(93) { animation: move93-phone 1s forwards 300ms; } @keyframes move93-phone { 0% { transform: rotate(331.2deg) translateX(0px); } 100% { transform: rotate(331.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(94) { background-color: rgba(25, 195, 125, calc(1 - (94 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(94) { animation: changeSize 1s infinite; animation-delay: 7050ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(94) { transform: rotate(334.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(94) { transform: rotate(334.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(94) { animation: move94 1s forwards 300ms; } @keyframes move94 { 0% { transform: rotate(334.8deg) translateX(0px); } 100% { transform: rotate(334.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(94) { animation: move94-phone 1s forwards 300ms; } @keyframes move94-phone { 0% { transform: rotate(334.8deg) translateX(0px); } 100% { transform: rotate(334.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(95) { background-color: rgba(25, 195, 125, calc(1 - (95 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(95) { animation: changeSize 1s infinite; animation-delay: 7125ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(95) { transform: rotate(338.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(95) { transform: rotate(338.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(95) { animation: move95 1s forwards 300ms; } @keyframes move95 { 0% { transform: rotate(338.4deg) translateX(0px); } 100% { transform: rotate(338.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(95) { animation: move95-phone 1s forwards 300ms; } @keyframes move95-phone { 0% { transform: rotate(338.4deg) translateX(0px); } 100% { transform: rotate(338.4deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(96) { background-color: rgba(25, 195, 125, calc(1 - (96 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(96) { animation: changeSize 1s infinite; animation-delay: 7200ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(96) { transform: rotate(342deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(96) { transform: rotate(342deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(96) { animation: move96 1s forwards 300ms; } @keyframes move96 { 0% { transform: rotate(342deg) translateX(0px); } 100% { transform: rotate(342deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(96) { animation: move96-phone 1s forwards 300ms; } @keyframes move96-phone { 0% { transform: rotate(342deg) translateX(0px); } 100% { transform: rotate(342deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(97) { background-color: rgba(25, 195, 125, calc(1 - (97 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(97) { animation: changeSize 1s infinite; animation-delay: 7275ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(97) { transform: rotate(345.6deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(97) { transform: rotate(345.6deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(97) { animation: move97 1s forwards 300ms; } @keyframes move97 { 0% { transform: rotate(345.6deg) translateX(0px); } 100% { transform: rotate(345.6deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(97) { animation: move97-phone 1s forwards 300ms; } @keyframes move97-phone { 0% { transform: rotate(345.6deg) translateX(0px); } 100% { transform: rotate(345.6deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(98) { background-color: rgba(25, 195, 125, calc(1 - (98 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(98) { animation: changeSize 1s infinite; animation-delay: 7350ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(98) { transform: rotate(349.2deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(98) { transform: rotate(349.2deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(98) { animation: move98 1s forwards 300ms; } @keyframes move98 { 0% { transform: rotate(349.2deg) translateX(0px); } 100% { transform: rotate(349.2deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(98) { animation: move98-phone 1s forwards 300ms; } @keyframes move98-phone { 0% { transform: rotate(349.2deg) translateX(0px); } 100% { transform: rotate(349.2deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(99) { background-color: rgba(25, 195, 125, calc(1 - (99 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(99) { animation: changeSize 1s infinite; animation-delay: 7425ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(99) { transform: rotate(352.8deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(99) { transform: rotate(352.8deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(99) { animation: move99 1s forwards 300ms; } @keyframes move99 { 0% { transform: rotate(352.8deg) translateX(0px); } 100% { transform: rotate(352.8deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(99) { animation: move99-phone 1s forwards 300ms; } @keyframes move99-phone { 0% { transform: rotate(352.8deg) translateX(0px); } 100% { transform: rotate(352.8deg) translateX(175px); } } } section.animation.animationMove2 span:nth-of-type(100) { background-color: rgba(25, 195, 125, calc(1 - (100 + 1) * 0.5 / 100)); } section.animation.animationMove2 span:nth-of-type(100) { animation: changeSize 1s infinite; animation-delay: 7500ms; } @keyframes changeSize { 0%, 100% { width: 12px; } 50% { width: 20px; } } section.animation span:nth-of-type(100) { transform: rotate(356.4deg) translateX(250px); transition: 1s all; } @media screen and (max-width: 390px) { section.animation span:nth-of-type(100) { transform: rotate(356.4deg) translateX(175px); } } section.animation.animationMove span:nth-of-type(100) { animation: move100 1s forwards 300ms; } @keyframes move100 { 0% { transform: rotate(356.4deg) translateX(0px); } 100% { transform: rotate(356.4deg) translateX(250px); } } @media screen and (max-width: 390px) { section.animation.animationMove span:nth-of-type(100) { animation: move100-phone 1s forwards 300ms; } @keyframes move100-phone { 0% { transform: rotate(356.4deg) translateX(0px); } 100% { transform: rotate(356.4deg) translateX(175px); } } } div.animation-cube { width: 280px; min-width: 280px; aspect-ratio: 1; background-color: white; display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: row; flex-wrap: wrap; } div.animation-cube div:nth-of-type(1) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor1 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 31ms; } @keyframes changeColor1 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(2) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor2 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 252ms; } @keyframes changeColor2 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(3) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor3 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 270ms; } @keyframes changeColor3 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(4) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor4 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 340ms; } @keyframes changeColor4 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(5) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor5 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 135ms; } @keyframes changeColor5 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(6) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor6 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 756ms; } @keyframes changeColor6 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(7) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor7 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 273ms; } @keyframes changeColor7 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(8) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor8 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 136ms; } @keyframes changeColor8 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(9) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor9 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 1134ms; } @keyframes changeColor9 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(10) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor10 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 470ms; } @keyframes changeColor10 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(11) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor11 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 154ms; } @keyframes changeColor11 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(12) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor12 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 1392ms; } @keyframes changeColor12 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(13) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor13 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 546ms; } @keyframes changeColor13 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(14) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor14 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 910ms; } @keyframes changeColor14 { 0% { background-color: #51da4b; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(15) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor15 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 315ms; } @keyframes changeColor15 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(16) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor16 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 688ms; } @keyframes changeColor16 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(17) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor17 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 1853ms; } @keyframes changeColor17 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(18) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor18 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 1044ms; } @keyframes changeColor18 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(19) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor19 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 893ms; } @keyframes changeColor19 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(20) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor20 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2780ms; } @keyframes changeColor20 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(21) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor21 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 504ms; } @keyframes changeColor21 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(22) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor22 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 198ms; } @keyframes changeColor22 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(23) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor23 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 736ms; } @keyframes changeColor23 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(24) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor24 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2136ms; } @keyframes changeColor24 { 0% { background-color: #51da4b; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(25) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor25 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 1825ms; } @keyframes changeColor25 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(26) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor26 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 598ms; } @keyframes changeColor26 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(27) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor27 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2727ms; } @keyframes changeColor27 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(28) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor28 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 1960ms; } @keyframes changeColor28 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(29) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor29 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 3306ms; } @keyframes changeColor29 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(30) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor30 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 4500ms; } @keyframes changeColor30 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(31) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor31 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2759ms; } @keyframes changeColor31 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(32) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor32 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2880ms; } @keyframes changeColor32 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(33) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor33 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 3762ms; } @keyframes changeColor33 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(34) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor34 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 1122ms; } @keyframes changeColor34 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(35) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor35 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 3990ms; } @keyframes changeColor35 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(36) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor36 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 3636ms; } @keyframes changeColor36 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(37) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor37 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 4514ms; } @keyframes changeColor37 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(38) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor38 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 5700ms; } @keyframes changeColor38 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(39) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor39 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 4758ms; } @keyframes changeColor39 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(40) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor40 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 5360ms; } @keyframes changeColor40 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(41) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor41 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 3157ms; } @keyframes changeColor41 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(42) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor42 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 462ms; } @keyframes changeColor42 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(43) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor43 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 1161ms; } @keyframes changeColor43 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(44) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor44 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 5544ms; } @keyframes changeColor44 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(45) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor45 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2295ms; } @keyframes changeColor45 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(46) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor46 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2070ms; } @keyframes changeColor46 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(47) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor47 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 4700ms; } @keyframes changeColor47 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(48) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor48 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 5088ms; } @keyframes changeColor48 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(49) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor49 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 5243ms; } @keyframes changeColor49 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(50) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor50 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 6900ms; } @keyframes changeColor50 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(51) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor51 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 204ms; } @keyframes changeColor51 { 0% { background-color: #51da4b; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(52) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor52 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2548ms; } @keyframes changeColor52 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(53) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor53 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 7526ms; } @keyframes changeColor53 { 0% { background-color: #51da4b; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(54) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor54 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2214ms; } @keyframes changeColor54 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(55) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor55 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 6545ms; } @keyframes changeColor55 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(56) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor56 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 3808ms; } @keyframes changeColor56 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(57) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor57 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 8493ms; } @keyframes changeColor57 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(58) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor58 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 58ms; } @keyframes changeColor58 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(59) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor59 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 7552ms; } @keyframes changeColor59 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(60) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor60 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 1140ms; } @keyframes changeColor60 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(61) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor61 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 3355ms; } @keyframes changeColor61 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(62) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor62 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 5766ms; } @keyframes changeColor62 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(63) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor63 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 8127ms; } @keyframes changeColor63 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(64) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor64 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 6976ms; } @keyframes changeColor64 { 0% { background-color: #51da4b; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(65) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor65 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 8580ms; } @keyframes changeColor65 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(66) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor66 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 7194ms; } @keyframes changeColor66 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(67) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor67 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 6365ms; } @keyframes changeColor67 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(68) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor68 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 9520ms; } @keyframes changeColor68 { 0% { background-color: #51da4b; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(69) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor69 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 4071ms; } @keyframes changeColor69 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(70) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor70 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 10150ms; } @keyframes changeColor70 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(71) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor71 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 9656ms; } @keyframes changeColor71 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(72) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor72 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 8424ms; } @keyframes changeColor72 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(73) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor73 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 4599ms; } @keyframes changeColor73 { 0% { background-color: #51da4b; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(74) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor74 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 8510ms; } @keyframes changeColor74 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(75) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor75 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 5700ms; } @keyframes changeColor75 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(76) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor76 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2508ms; } @keyframes changeColor76 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(77) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor77 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2079ms; } @keyframes changeColor77 { 0% { background-color: #51da4b; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(78) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor78 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 7098ms; } @keyframes changeColor78 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(79) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor79 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 3871ms; } @keyframes changeColor79 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(80) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor80 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 4320ms; } @keyframes changeColor80 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(81) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor81 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 6237ms; } @keyframes changeColor81 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(82) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor82 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 4018ms; } @keyframes changeColor82 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(83) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor83 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2490ms; } @keyframes changeColor83 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(84) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor84 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 5712ms; } @keyframes changeColor84 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(85) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor85 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 6970ms; } @keyframes changeColor85 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(86) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor86 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 6622ms; } @keyframes changeColor86 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(87) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor87 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 9744ms; } @keyframes changeColor87 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(88) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor88 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 1320ms; } @keyframes changeColor88 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(89) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor89 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 6319ms; } @keyframes changeColor89 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(90) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor90 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 11160ms; } @keyframes changeColor90 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(91) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor91 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 6279ms; } @keyframes changeColor91 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(92) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor92 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 10396ms; } @keyframes changeColor92 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(93) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor93 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 12462ms; } @keyframes changeColor93 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(94) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor94 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 13348ms; } @keyframes changeColor94 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(95) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor95 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 4465ms; } @keyframes changeColor95 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(96) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor96 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 288ms; } @keyframes changeColor96 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(97) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor97 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 6402ms; } @keyframes changeColor97 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(98) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor98 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2940ms; } @keyframes changeColor98 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(99) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor99 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 1782ms; } @keyframes changeColor99 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(100) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor100 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 1900ms; } @keyframes changeColor100 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(101) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor101 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 1818ms; } @keyframes changeColor101 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(102) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor102 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 7344ms; } @keyframes changeColor102 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(103) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor103 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 8240ms; } @keyframes changeColor103 { 0% { background-color: #51da4b; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(104) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor104 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 5616ms; } @keyframes changeColor104 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(105) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor105 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 6825ms; } @keyframes changeColor105 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(106) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor106 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2332ms; } @keyframes changeColor106 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(107) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor107 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 9737ms; } @keyframes changeColor107 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(108) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor108 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2376ms; } @keyframes changeColor108 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(109) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor109 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 15042ms; } @keyframes changeColor109 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(110) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor110 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 14960ms; } @keyframes changeColor110 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(111) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor111 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 11877ms; } @keyframes changeColor111 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(112) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor112 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 3136ms; } @keyframes changeColor112 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(113) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor113 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 9040ms; } @keyframes changeColor113 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(114) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor114 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 7296ms; } @keyframes changeColor114 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(115) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor115 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 10580ms; } @keyframes changeColor115 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(116) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor116 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 3828ms; } @keyframes changeColor116 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(117) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor117 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 17082ms; } @keyframes changeColor117 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(118) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor118 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 1062ms; } @keyframes changeColor118 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(119) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor119 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 8687ms; } @keyframes changeColor119 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(120) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor120 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 9120ms; } @keyframes changeColor120 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(121) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor121 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 7139ms; } @keyframes changeColor121 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(122) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor122 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 12444ms; } @keyframes changeColor122 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(123) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor123 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2829ms; } @keyframes changeColor123 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(124) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor124 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2356ms; } @keyframes changeColor124 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(125) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor125 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 1500ms; } @keyframes changeColor125 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(126) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor126 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 16506ms; } @keyframes changeColor126 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(127) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor127 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 16891ms; } @keyframes changeColor127 { 0% { background-color: #51da4b; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(128) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor128 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 5632ms; } @keyframes changeColor128 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(129) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor129 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 6579ms; } @keyframes changeColor129 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(130) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor130 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 3510ms; } @keyframes changeColor130 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(131) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor131 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 9039ms; } @keyframes changeColor131 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(132) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor132 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 11352ms; } @keyframes changeColor132 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(133) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor133 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 5852ms; } @keyframes changeColor133 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(134) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor134 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 19564ms; } @keyframes changeColor134 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(135) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor135 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 17010ms; } @keyframes changeColor135 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(136) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor136 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 3944ms; } @keyframes changeColor136 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(137) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor137 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 12604ms; } @keyframes changeColor137 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(138) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor138 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 7866ms; } @keyframes changeColor138 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(139) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor139 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 4031ms; } @keyframes changeColor139 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(140) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor140 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 280ms; } @keyframes changeColor140 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(141) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor141 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 19599ms; } @keyframes changeColor141 { 0% { background-color: #51da4b; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(142) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor142 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 568ms; } @keyframes changeColor142 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(143) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor143 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 9438ms; } @keyframes changeColor143 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(144) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor144 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 16272ms; } @keyframes changeColor144 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(145) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor145 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 9715ms; } @keyframes changeColor145 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(146) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor146 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 13724ms; } @keyframes changeColor146 { 0% { background-color: #51da4b; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(147) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor147 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 11613ms; } @keyframes changeColor147 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(148) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor148 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 13468ms; } @keyframes changeColor148 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(149) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor149 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 16986ms; } @keyframes changeColor149 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(150) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor150 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 21300ms; } @keyframes changeColor150 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(151) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor151 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 6342ms; } @keyframes changeColor151 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(152) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor152 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 8664ms; } @keyframes changeColor152 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(153) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor153 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 3825ms; } @keyframes changeColor153 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(154) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor154 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 13090ms; } @keyframes changeColor154 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(155) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor155 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 9765ms; } @keyframes changeColor155 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(156) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor156 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 7800ms; } @keyframes changeColor156 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(157) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor157 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 3454ms; } @keyframes changeColor157 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(158) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor158 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 13430ms; } @keyframes changeColor158 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(159) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor159 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 6201ms; } @keyframes changeColor159 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(160) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor160 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 21760ms; } @keyframes changeColor160 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(161) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor161 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 19159ms; } @keyframes changeColor161 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(162) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor162 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 6480ms; } @keyframes changeColor162 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(163) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor163 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 16626ms; } @keyframes changeColor163 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(164) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor164 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 11316ms; } @keyframes changeColor164 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(165) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor165 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 23760ms; } @keyframes changeColor165 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(166) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor166 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 498ms; } @keyframes changeColor166 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(167) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor167 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 1670ms; } @keyframes changeColor167 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(168) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor168 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 7224ms; } @keyframes changeColor168 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(169) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor169 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 14872ms; } @keyframes changeColor169 { 0% { background-color: #51da4b; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(170) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor170 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 24650ms; } @keyframes changeColor170 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(171) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor171 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 17100ms; } @keyframes changeColor171 { 0% { background-color: #19c37d; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(172) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor172 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 13072ms; } @keyframes changeColor172 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(173) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor173 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 9169ms; } @keyframes changeColor173 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(174) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor174 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 13572ms; } @keyframes changeColor174 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(175) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor175 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 7525ms; } @keyframes changeColor175 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(176) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor176 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 8448ms; } @keyframes changeColor176 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(177) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor177 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 18585ms; } @keyframes changeColor177 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(178) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor178 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 15842ms; } @keyframes changeColor178 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(179) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor179 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 1790ms; } @keyframes changeColor179 { 0% { background-color: #51da4b; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(180) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor180 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 21240ms; } @keyframes changeColor180 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(181) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor181 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 24616ms; } @keyframes changeColor181 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(182) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor182 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 8190ms; } @keyframes changeColor182 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(183) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor183 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 16470ms; } @keyframes changeColor183 { 0% { background-color: #51da4b; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(184) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor184 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 12696ms; } @keyframes changeColor184 { 0% { background-color: #51da4b; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(185) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor185 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 6845ms; } @keyframes changeColor185 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(186) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor186 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 24738ms; } @keyframes changeColor186 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(187) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor187 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 14212ms; } @keyframes changeColor187 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(188) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor188 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 10716ms; } @keyframes changeColor188 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(189) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor189 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 7749ms; } @keyframes changeColor189 { 0% { background-color: #19c37d; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(190) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor190 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 8170ms; } @keyframes changeColor190 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(191) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor191 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 17954ms; } @keyframes changeColor191 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(192) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor192 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 2496ms; } @keyframes changeColor192 { 0% { background-color: #51da4b; } 100% { background-color: rgb(64, 0, 63); } } div.animation-cube div:nth-of-type(193) { background-color: #51da4b; width: 20px; aspect-ratio: 1; animation: changeColor193 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 19300ms; } @keyframes changeColor193 { 0% { background-color: #51da4b; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(194) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor194 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 10476ms; } @keyframes changeColor194 { 0% { background-color: #51da4b; } 100% { background-color: #19c37d; } } div.animation-cube div:nth-of-type(195) { background-color: #19c37d; width: 20px; aspect-ratio: 1; animation: changeColor195 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 29250ms; } @keyframes changeColor195 { 0% { background-color: #19c37d; } 100% { background-color: #51da4b; } } div.animation-cube div:nth-of-type(196) { background-color: rgb(64, 0, 63); width: 20px; aspect-ratio: 1; animation: changeColor196 1s infinite cubic-bezier(0.165, 0.84, 0.44, 1); animation-delay: 23324ms; } @keyframes changeColor196 { 0% { background-color: rgb(64, 0, 63); } 100% { background-color: #51da4b; } } /* @if $i % 14 == 0 { // !global permet de rendre une variable accessible en dehors de sa fonction dans laquelle elle est scopée. $j: $j + 1 !global; } */ .core { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100%; } .containerSlides { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 1000px; height: 350px; } .container-content-flex { display: flex; justify-content: center; align-content: center; align-items: flex-start; width: 100%; } .container-content-flex .content { display: none; width: 50%; padding: 20px 20px 0px 20px; } .container-content-flex .content h3 { margin-bottom: 10px; margin-top: 0px; } .container-content-flex .content .column { display: flex; justify-content: flex-start; align-items: flex-start; gap: 0; flex-direction: column; } .container-content-flex .content .container-input { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; margin-bottom: 10px; width: 100%; } .container-content-flex .content .container-input.inline { flex-direction: row; align-items: center; justify-content: space-between; margin: 0 0 10px 0; gap: 10px; } .container-content-flex .content .container-input.inline.range { margin-bottom: 20px; } .container-content-flex .content .container-input.inline.range label { width: 145px; } .container-content-flex .content .container-input.inline.range .numberInfoSlider { margin-left: 10px; } .container-content-flex .content .container-input label { font-family: system-ui, sans-serif; font-size: 14px; margin-bottom: 3px; font-weight: 600; color: #121214; } .container-content-flex .content .container-input input[type=range] { -webkit-appearance: none; width: 50%; height: 3px; background: #E4E4E5; outline: none; opacity: 1; -webkit-transition: 0.2s; transition: opacity 0.2s; border-radius: 25px; transition: 0.3s; caret-color: #06C; accent-color: rgb(64, 0, 63); } .container-content-flex .content .container-input input[type=checkbox] { width: 20px; aspect-ratio: 1; background: #E4E4E5; border: 1px solid #E4E4E5; opacity: 1; -webkit-transition: 0.2s; transition: opacity 0.2s; border-radius: 50px; transition: 0.3s; caret-color: #06C; accent-color: #19c37d; } .container-content-flex .content .container-input .btnPlusAndMinus { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 5px; } .container-content-flex .content .container-input input[type=text], .container-content-flex .content .container-input input[type=number], .container-content-flex .content .container-input select { border: #c2c2c2 1px solid; border-radius: 5px; padding: 3px 5px; text-align: center; } .container-content-flex .content .container-input input[type=text]:focus, .container-content-flex .content .container-input input[type=number]:focus, .container-content-flex .content .container-input select:focus { border: #121214 1px solid; } .container-content-flex .content .container-input input[type=text]::placeholder, .container-content-flex .content .container-input input[type=number]::placeholder, .container-content-flex .content .container-input select::placeholder { color: #343541; font-family: system-ui, sans-serif; } .container-content-flex .content .container-input input[type=number] { padding: 3px 0px 3px 15px; } .container-content-flex .content .container-input .color-container { border: #c2c2c2 1px solid; width: 60px; height: 20px; overflow: hidden; border-radius: 5px; } .container-content-flex .content .container-input .color-container input[type=color] { padding: 0; width: calc(100% + 12px); height: calc(100% + 12px); margin: -6px; } .containerSlides label[data-controler=true] { --a: 0; width: calc(4% + var(--a) * 73%); min-width: 30px; gap: 10px; overflow: hidden; height: 100%; margin: 10px; cursor: pointer; background-color: white; padding: 20px 16px 20px 10px; flex-direction: column; background-position-y: -9px; position: relative; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); } .containerSlides label[data-controler=true] .slide-title { display: flex; width: 100%; gap: 20px; justify-content: flex-start; flex-wrap: wrap; align-content: center; align-items: center; position: absolute; bottom: 10px; } .containerSlides label[data-controler=true] .slide-title h2 { display: none; margin: 0; } .containerSlides label[data-controler=true] .cube { display: none; } .containerSlides label[data-controler=true]:first-of-type { margin-left: 0; } @media screen and (max-width: 700px) { .containerSlides label[data-controler=true]:first-of-type { margin-left: 10px; } } .containerSlides label[data-controler=true]:last-of-type { margin-right: 0; } @media screen and (max-width: 700px) { .containerSlides label[data-controler=true]:last-of-type { margin-right: 10px; } } .containerSlides label[data-controler=true] span + img { position: absolute; top: 50%; left: 50%; translate: -50% -50%; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); width: 556px; height: 100%; object-fit: cover; opacity: calc(0.7 + var(--a) * 0.3); } .containerSlides label[data-controler=true] > h2 { color: #000000; margin: 0; font-family: system-ui, sans-serif; position: relative; bottom: 50px; font-weight: lighter; z-index: 0; display: none; } .containerSlides label[data-controler=true] span { display: block; width: 100%; max-width: 40px; background-color: rgb(64, 0, 63); height: 40px; display: flex; justify-content: center; align-items: center; position: relative; z-index: 0; min-height: 40px; color: white; font-family: system-ui, sans-serif; } .containerSlides label[data-controler=true] span img { width: 25px; } #checkbox1:checked ~ .containerSlides label[data-controler=true]:nth-of-type(1) { --a: 1; padding: 20px; } #checkbox1:checked ~ .containerSlides label[data-controler=true]:nth-of-type(1) .content { display: block; } #checkbox1:checked ~ .containerSlides label[data-controler=true]:nth-of-type(1) .slide-title { justify-content: flex-start; } #checkbox1:checked ~ .containerSlides label[data-controler=true]:nth-of-type(1) .cube { display: block; height: 100%; } #checkbox1:checked ~ .containerSlides label[data-controler=true]:nth-of-type(1) .cube h2 { color: #121214; letter-spacing: -1px; } #checkbox1:checked ~ .containerSlides label[data-controler=true]:nth-of-type(1) .cube h3 { color: #121214; font-size: 16px; font-weight: 600; } #checkbox1:checked ~ .containerSlides label[data-controler=true]:nth-of-type(1) .cube p { color: #121214; margin: 10px 0 0 0; } #checkbox1:checked ~ .containerSlides label[data-controler=true]:nth-of-type(1) .cube p b { font-weight: 600; } #checkbox1:checked ~ .containerSlides label[data-controler=true]:nth-of-type(1) .cube p strong { color: #19c37d; font-weight: 400; } #checkbox1:checked ~ .containerSlides label[data-controler=true]:nth-of-type(1) .cube p ol { margin: 0; } #checkbox1:checked ~ .containerSlides label[data-controler=true]:nth-of-type(1) .cube p ol li { padding: 10px; } #checkbox1:checked ~ .containerSlides label[data-controler=true]:nth-of-type(1) .slide-title h2 { display: block; color: #121214; } #checkbox1:checked ~ .containerSlides label[data-controler=true]:nth-of-type(1) h2 { opacity: 1; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); display: block; font-size: 18px; font-family: system-ui; font-weight: 600; color: #121214; } #checkbox2:checked ~ .containerSlides label[data-controler=true]:nth-of-type(2) { --a: 1; padding: 20px; } #checkbox2:checked ~ .containerSlides label[data-controler=true]:nth-of-type(2) .content { display: block; } #checkbox2:checked ~ .containerSlides label[data-controler=true]:nth-of-type(2) .slide-title { justify-content: flex-start; } #checkbox2:checked ~ .containerSlides label[data-controler=true]:nth-of-type(2) .cube { display: block; height: 100%; } #checkbox2:checked ~ .containerSlides label[data-controler=true]:nth-of-type(2) .cube h2 { color: #121214; letter-spacing: -1px; } #checkbox2:checked ~ .containerSlides label[data-controler=true]:nth-of-type(2) .cube h3 { color: #121214; font-size: 16px; font-weight: 600; } #checkbox2:checked ~ .containerSlides label[data-controler=true]:nth-of-type(2) .cube p { color: #121214; margin: 10px 0 0 0; } #checkbox2:checked ~ .containerSlides label[data-controler=true]:nth-of-type(2) .cube p b { font-weight: 600; } #checkbox2:checked ~ .containerSlides label[data-controler=true]:nth-of-type(2) .cube p strong { color: #19c37d; font-weight: 400; } #checkbox2:checked ~ .containerSlides label[data-controler=true]:nth-of-type(2) .cube p ol { margin: 0; } #checkbox2:checked ~ .containerSlides label[data-controler=true]:nth-of-type(2) .cube p ol li { padding: 10px; } #checkbox2:checked ~ .containerSlides label[data-controler=true]:nth-of-type(2) .slide-title h2 { display: block; color: #121214; } #checkbox2:checked ~ .containerSlides label[data-controler=true]:nth-of-type(2) h2 { opacity: 1; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); display: block; font-size: 18px; font-family: system-ui; font-weight: 600; color: #121214; } #checkbox3:checked ~ .containerSlides label[data-controler=true]:nth-of-type(3) { --a: 1; padding: 20px; } #checkbox3:checked ~ .containerSlides label[data-controler=true]:nth-of-type(3) .content { display: block; } #checkbox3:checked ~ .containerSlides label[data-controler=true]:nth-of-type(3) .slide-title { justify-content: flex-start; } #checkbox3:checked ~ .containerSlides label[data-controler=true]:nth-of-type(3) .cube { display: block; height: 100%; } #checkbox3:checked ~ .containerSlides label[data-controler=true]:nth-of-type(3) .cube h2 { color: #121214; letter-spacing: -1px; } #checkbox3:checked ~ .containerSlides label[data-controler=true]:nth-of-type(3) .cube h3 { color: #121214; font-size: 16px; font-weight: 600; } #checkbox3:checked ~ .containerSlides label[data-controler=true]:nth-of-type(3) .cube p { color: #121214; margin: 10px 0 0 0; } #checkbox3:checked ~ .containerSlides label[data-controler=true]:nth-of-type(3) .cube p b { font-weight: 600; } #checkbox3:checked ~ .containerSlides label[data-controler=true]:nth-of-type(3) .cube p strong { color: #19c37d; font-weight: 400; } #checkbox3:checked ~ .containerSlides label[data-controler=true]:nth-of-type(3) .cube p ol { margin: 0; } #checkbox3:checked ~ .containerSlides label[data-controler=true]:nth-of-type(3) .cube p ol li { padding: 10px; } #checkbox3:checked ~ .containerSlides label[data-controler=true]:nth-of-type(3) .slide-title h2 { display: block; color: #121214; } #checkbox3:checked ~ .containerSlides label[data-controler=true]:nth-of-type(3) h2 { opacity: 1; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); display: block; font-size: 18px; font-family: system-ui; font-weight: 600; color: #121214; } #checkbox4:checked ~ .containerSlides label[data-controler=true]:nth-of-type(4) { --a: 1; padding: 20px; } #checkbox4:checked ~ .containerSlides label[data-controler=true]:nth-of-type(4) .content { display: block; } #checkbox4:checked ~ .containerSlides label[data-controler=true]:nth-of-type(4) .slide-title { justify-content: flex-start; } #checkbox4:checked ~ .containerSlides label[data-controler=true]:nth-of-type(4) .cube { display: block; height: 100%; } #checkbox4:checked ~ .containerSlides label[data-controler=true]:nth-of-type(4) .cube h2 { color: #121214; letter-spacing: -1px; } #checkbox4:checked ~ .containerSlides label[data-controler=true]:nth-of-type(4) .cube h3 { color: #121214; font-size: 16px; font-weight: 600; } #checkbox4:checked ~ .containerSlides label[data-controler=true]:nth-of-type(4) .cube p { color: #121214; margin: 10px 0 0 0; } #checkbox4:checked ~ .containerSlides label[data-controler=true]:nth-of-type(4) .cube p b { font-weight: 600; } #checkbox4:checked ~ .containerSlides label[data-controler=true]:nth-of-type(4) .cube p strong { color: #19c37d; font-weight: 400; } #checkbox4:checked ~ .containerSlides label[data-controler=true]:nth-of-type(4) .cube p ol { margin: 0; } #checkbox4:checked ~ .containerSlides label[data-controler=true]:nth-of-type(4) .cube p ol li { padding: 10px; } #checkbox4:checked ~ .containerSlides label[data-controler=true]:nth-of-type(4) .slide-title h2 { display: block; color: #121214; } #checkbox4:checked ~ .containerSlides label[data-controler=true]:nth-of-type(4) h2 { opacity: 1; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); display: block; font-size: 18px; font-family: system-ui; font-weight: 600; color: #121214; } #checkbox5:checked ~ .containerSlides label[data-controler=true]:nth-of-type(5) { --a: 1; padding: 20px; } #checkbox5:checked ~ .containerSlides label[data-controler=true]:nth-of-type(5) .content { display: block; } #checkbox5:checked ~ .containerSlides label[data-controler=true]:nth-of-type(5) .slide-title { justify-content: flex-start; } #checkbox5:checked ~ .containerSlides label[data-controler=true]:nth-of-type(5) .cube { display: block; height: 100%; } #checkbox5:checked ~ .containerSlides label[data-controler=true]:nth-of-type(5) .cube h2 { color: #121214; letter-spacing: -1px; } #checkbox5:checked ~ .containerSlides label[data-controler=true]:nth-of-type(5) .cube h3 { color: #121214; font-size: 16px; font-weight: 600; } #checkbox5:checked ~ .containerSlides label[data-controler=true]:nth-of-type(5) .cube p { color: #121214; margin: 10px 0 0 0; } #checkbox5:checked ~ .containerSlides label[data-controler=true]:nth-of-type(5) .cube p b { font-weight: 600; } #checkbox5:checked ~ .containerSlides label[data-controler=true]:nth-of-type(5) .cube p strong { color: #19c37d; font-weight: 400; } #checkbox5:checked ~ .containerSlides label[data-controler=true]:nth-of-type(5) .cube p ol { margin: 0; } #checkbox5:checked ~ .containerSlides label[data-controler=true]:nth-of-type(5) .cube p ol li { padding: 10px; } #checkbox5:checked ~ .containerSlides label[data-controler=true]:nth-of-type(5) .slide-title h2 { display: block; color: #121214; } #checkbox5:checked ~ .containerSlides label[data-controler=true]:nth-of-type(5) h2 { opacity: 1; transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); display: block; font-size: 18px; font-family: system-ui; font-weight: 600; color: #121214; } input[name=radioBtn] { display: none; } @media only screen and (max-width: 770px) { .containerSlides label[data-controler=true] .slide-title { bottom: 0; position: relative; justify-content: flex-start; } .containerSlides label[data-controler=true] { width: 100%; height: 35px; padding: 10px; justify-content: flex-end; align-items: baseline; } #checkbox1:checked ~ .containerSlides label[data-controler=true]:nth-of-type(1) { --a: 1; min-height: 100%; height: 100%; padding: 10px; } #checkbox2:checked ~ .containerSlides label[data-controler=true]:nth-of-type(2) { --a: 1; min-height: 100%; height: 100%; padding: 10px; } #checkbox3:checked ~ .containerSlides label[data-controler=true]:nth-of-type(3) { --a: 1; min-height: 100%; height: 100%; padding: 10px; } #checkbox4:checked ~ .containerSlides label[data-controler=true]:nth-of-type(4) { --a: 1; min-height: 100%; height: 100%; padding: 10px; } #checkbox5:checked ~ .containerSlides label[data-controler=true]:nth-of-type(5) { --a: 1; min-height: 100%; height: 100%; padding: 10px; } .containerSlides { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 940px; height: auto; margin: 0; flex-direction: column; } } /*# sourceMappingURL=home_page.css.map */
/*
     FILE ARCHIVED ON 08:28:58 Apr 20, 2024 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 10:45:29 Jul 15, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.683
  exclusion.robots: 0.07
  exclusion.robots.policy: 0.056
  esindex: 0.012
  cdx.remote: 22.446
  LoadShardBlock: 406.073 (3)
  PetaboxLoader3.datanode: 424.881 (4)
  PetaboxLoader3.resolve: 4077.259 (2)
  load_resource: 4122.041
*/