.firefly { position: fixed; left: 50%; top: 50%; width: 0.4vw; height: 0.4vw; margin: -0.2vw 0 0 9.8vw; animation: ease 200s alternate infinite; pointer-events: none; } .firefly::before, .firefly::after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; transform-origin: -10vw; } .firefly::before { background: black; opacity: 0.4; animation: drift ease alternate infinite; } .firefly::after { background: white; opacity: 0; box-shadow: 0 0 0vw 0vw rgb(5, 5, 5); animation: drift ease alternate infinite, flash ease infinite; } .firefly:nth-child(1) { animation-name: move1; } .firefly:nth-child(1)::before { animation-duration: 11s; } .firefly:nth-child(1)::after { animation-duration: 11s, 10495ms; animation-delay: 0ms, 3793ms; } @keyframes move1 { 0% { transform: translateX(39vw) translateY(23vh) scale(0.26); } 4.54545% { transform: translateX(25vw) translateY(-30vh) scale(0.48); } 9.09091% { transform: translateX(-24vw) translateY(-49vh) scale(0.57); } 13.63636% { transform: translateX(-26vw) translateY(16vh) scale(0.31); } 18.18182% { transform: translateX(-33vw) translateY(3vh) scale(0.73); } 22.72727% { transform: translateX(6vw) translateY(-12vh) scale(0.31); } 27.27273% { transform: translateX(44vw) translateY(-7vh) scale(0.57); } 31.81818% { transform: translateX(22vw) translateY(13vh) scale(0.62); } 36.36364% { transform: translateX(-10vw) translateY(17vh) scale(0.29); } 40.90909% { transform: translateX(2vw) translateY(-28vh) scale(0.34); } 45.45455% { transform: translateX(-10vw) translateY(23vh) scale(0.34); } 50% { transform: translateX(13vw) translateY(38vh) scale(0.7); } 54.54545% { transform: translateX(-4vw) translateY(-48vh) scale(0.26); } 59.09091% { transform: translateX(11vw) translateY(36vh) scale(0.81); } 63.63636% { transform: translateX(37vw) translateY(-14vh) scale(0.89); } 68.18182% { transform: translateX(23vw) translateY(10vh) scale(0.73); } 72.72727% { transform: translateX(33vw) translateY(-26vh) scale(0.58); } 77.27273% { transform: translateX(-48vw) translateY(41vh) scale(0.49); } 81.81818% { transform: translateX(35vw) translateY(30vh) scale(0.33); } 86.36364% { transform: translateX(22vw) translateY(-25vh) scale(1); } 90.90909% { transform: translateX(-40vw) translateY(33vh) scale(0.9); } 95.45455% { transform: translateX(50vw) translateY(-48vh) scale(0.57); } 100% { transform: translateX(21vw) translateY(-38vh) scale(0.39); } } .firefly:nth-child(2) { animation-name: move2; } .firefly:nth-child(2)::before { animation-duration: 9s; } .firefly:nth-child(2)::after { animation-duration: 9s, 10553ms; animation-delay: 0ms, 1147ms; } @keyframes move2 { 0% { transform: translateX(0vw) translateY(5vh) scale(0.29); } 4% { transform: translateX(38vw) translateY(46vh) scale(0.31); } 8% { transform: translateX(19vw) translateY(46vh) scale(0.8); } 12% { transform: translateX(47vw) translateY(32vh) scale(0.45); } 16% { transform: translateX(7vw) translateY(-24vh) scale(0.28); } 20% { transform: translateX(45vw) translateY(18vh) scale(0.56); } 24% { transform: translateX(7vw) translateY(24vh) scale(0.77); } 28% { transform: translateX(-39vw) translateY(47vh) scale(0.58); } 32% { transform: translateX(-18vw) translateY(13vh) scale(0.97); } 36% { transform: translateX(12vw) translateY(-13vh) scale(0.66); } 40% { transform: translateX(-19vw) translateY(-3vh) scale(0.29); } 44% { transform: translateX(-20vw) translateY(0vh) scale(0.41); } 48% { transform: translateX(-31vw) translateY(20vh) scale(0.62); } 52% { transform: translateX(-18vw) translateY(10vh) scale(0.31); } 56% { transform: translateX(33vw) translateY(-16vh) scale(0.43); } 60% { transform: translateX(45vw) translateY(14vh) scale(0.92); } 64% { transform: translateX(11vw) translateY(27vh) scale(0.58); } 68% { transform: translateX(-17vw) translateY(-19vh) scale(0.98); } 72% { transform: translateX(6vw) translateY(50vh) scale(0.95); } 76% { transform: translateX(-19vw) translateY(-11vh) scale(0.72); } 80% { transform: translateX(40vw) translateY(13vh) scale(0.9); } 84% { transform: translateX(-49vw) translateY(-21vh) scale(0.88); } 88% { transform: translateX(27vw) translateY(-23vh) scale(0.96); } 92% { transform: translateX(-45vw) translateY(37vh) scale(0.55); } 96% { transform: translateX(-44vw) translateY(27vh) scale(0.73); } 100% { transform: translateX(-5vw) translateY(-3vh) scale(0.67); } } .firefly:nth-child(3) { animation-name: move3; } .firefly:nth-child(3)::before { animation-duration: 9s; } .firefly:nth-child(3)::after { animation-duration: 9s, 9336ms; animation-delay: 0ms, 6238ms; } @keyframes move3 { 0% { transform: translateX(2vw) translateY(20vh) scale(0.32); } 5% { transform: translateX(-3vw) translateY(-33vh) scale(0.38); } 10% { transform: translateX(-17vw) translateY(-42vh) scale(0.37); } 15% { transform: translateX(25vw) translateY(24vh) scale(0.61); } 20% { transform: translateX(-14vw) translateY(22vh) scale(0.52); } 25% { transform: translateX(25vw) translateY(-39vh) scale(0.31); } 30% { transform: translateX(-41vw) translateY(-8vh) scale(0.36); } 35% { transform: translateX(-48vw) translateY(-22vh) scale(0.86); } 40% { transform: translateX(20vw) translateY(-16vh) scale(0.97); } 45% { transform: translateX(1vw) translateY(-49vh) scale(0.69); } 50% { transform: translateX(50vw) translateY(44vh) scale(0.75); } 55% { transform: translateX(-31vw) translateY(-20vh) scale(0.54); } 60% { transform: translateX(16vw) translateY(16vh) scale(0.81); } 65% { transform: translateX(14vw) translateY(-21vh) scale(0.82); } 70% { transform: translateX(-13vw) translateY(7vh) scale(0.28); } 75% { transform: translateX(35vw) translateY(24vh) scale(0.72); } 80% { transform: translateX(-17vw) translateY(-36vh) scale(0.76); } 85% { transform: translateX(-2vw) translateY(-26vh) scale(0.82); } 90% { transform: translateX(-44vw) translateY(5vh) scale(0.83); } 95% { transform: translateX(44vw) translateY(41vh) scale(0.92); } 100% { transform: translateX(-9vw) translateY(22vh) scale(0.93); } } .firefly:nth-child(4) { animation-name: move4; } .firefly:nth-child(4)::before { animation-duration: 14s; } .firefly:nth-child(4)::after { animation-duration: 14s, 6833ms; animation-delay: 0ms, 6287ms; } @keyframes move4 { 0% { transform: translateX(-7vw) translateY(-23vh) scale(0.87); } 3.7037% { transform: translateX(-8vw) translateY(-20vh) scale(0.37); } 7.40741% { transform: translateX(27vw) translateY(-12vh) scale(0.81); } 11.11111% { transform: translateX(40vw) translateY(-34vh) scale(0.59); } 14.81481% { transform: translateX(-42vw) translateY(-36vh) scale(0.76); } 18.51852% { transform: translateX(-47vw) translateY(-28vh) scale(0.26); } 22.22222% { transform: translateX(-24vw) translateY(15vh) scale(0.71); } 25.92593% { transform: translateX(49vw) translateY(-27vh) scale(0.42); } 29.62963% { transform: translateX(3vw) translateY(-29vh) scale(0.26); } 33.33333% { transform: translateX(-5vw) translateY(43vh) scale(0.63); } 37.03704% { transform: translateX(-46vw) translateY(-35vh) scale(0.6); } 40.74074% { transform: translateX(-45vw) translateY(38vh) scale(0.31); } 44.44444% { transform: translateX(34vw) translateY(-44vh) scale(0.79); } 48.14815% { transform: translateX(21vw) translateY(30vh) scale(0.67); } 51.85185% { transform: translateX(-22vw) translateY(-17vh) scale(1); } 55.55556% { transform: translateX(-4vw) translateY(-45vh) scale(0.68); } 59.25926% { transform: translateX(29vw) translateY(44vh) scale(0.61); } 62.96296% { transform: translateX(22vw) translateY(-27vh) scale(0.52); } 66.66667% { transform: translateX(-35vw) translateY(27vh) scale(0.59); } 70.37037% { transform: translateX(9vw) translateY(-44vh) scale(0.27); } 74.07407% { transform: translateX(-23vw) translateY(-47vh) scale(0.35); } 77.77778% { transform: translateX(49vw) translateY(9vh) scale(0.97); } 81.48148% { transform: translateX(-16vw) translateY(49vh) scale(0.58); } 85.18519% { transform: translateX(-5vw) translateY(-12vh) scale(0.47); } 88.88889% { transform: translateX(-48vw) translateY(-39vh) scale(0.36); } 92.59259% { transform: translateX(-47vw) translateY(35vh) scale(0.44); } 96.2963% { transform: translateX(32vw) translateY(4vh) scale(0.44); } 100% { transform: translateX(-31vw) translateY(50vh) scale(0.61); } } .firefly:nth-child(5) { animation-name: move5; } .firefly:nth-child(5)::before { animation-duration: 13s; } .firefly:nth-child(5)::after { animation-duration: 13s, 6292ms; animation-delay: 0ms, 1940ms; } @keyframes move5 { 0% { transform: translateX(29vw) translateY(47vh) scale(0.69); } 4.16667% { transform: translateX(14vw) translateY(1vh) scale(0.94); } 8.33333% { transform: translateX(5vw) translateY(10vh) scale(0.72); } 12.5% { transform: translateX(-43vw) translateY(-39vh) scale(0.54); } 16.66667% { transform: translateX(-36vw) translateY(-46vh) scale(0.86); } 20.83333% { transform: translateX(43vw) translateY(23vh) scale(0.26); } 25% { transform: translateX(-35vw) translateY(10vh) scale(0.67); } 29.16667% { transform: translateX(-14vw) translateY(42vh) scale(0.4); } 33.33333% { transform: translateX(9vw) translateY(9vh) scale(0.42); } 37.5% { transform: translateX(-15vw) translateY(-46vh) scale(0.63); } 41.66667% { transform: translateX(-13vw) translateY(-34vh) scale(0.34); } 45.83333% { transform: translateX(-5vw) translateY(-30vh) scale(0.76); } 50% { transform: translateX(5vw) translateY(49vh) scale(0.85); } 54.16667% { transform: translateX(-23vw) translateY(6vh) scale(0.43); } 58.33333% { transform: translateX(-6vw) translateY(36vh) scale(0.81); } 62.5% { transform: translateX(-39vw) translateY(-27vh) scale(0.81); } 66.66667% { transform: translateX(-21vw) translateY(-27vh) scale(0.94); } 70.83333% { transform: translateX(26vw) translateY(-32vh) scale(0.85); } 75% { transform: translateX(-18vw) translateY(-20vh) scale(0.94); } 79.16667% { transform: translateX(-42vw) translateY(-39vh) scale(0.46); } 83.33333% { transform: translateX(28vw) translateY(-27vh) scale(0.77); } 87.5% { transform: translateX(-27vw) translateY(1vh) scale(0.33); } 91.66667% { transform: translateX(-38vw) translateY(0vh) scale(0.93); } 95.83333% { transform: translateX(3vw) translateY(-15vh) scale(0.54); } 100% { transform: translateX(-44vw) translateY(-1vh) scale(0.68); } } .firefly:nth-child(6) { animation-name: move6; } .firefly:nth-child(6)::before { animation-duration: 15s; } .firefly:nth-child(6)::after { animation-duration: 15s, 6262ms; animation-delay: 0ms, 1707ms; } @keyframes move6 { 0% { transform: translateX(43vw) translateY(47vh) scale(0.27); } 5.55556% { transform: translateX(-10vw) translateY(29vh) scale(0.51); } 11.11111% { transform: translateX(15vw) translateY(5vh) scale(0.99); } 16.66667% { transform: translateX(39vw) translateY(22vh) scale(0.39); } 22.22222% { transform: translateX(44vw) translateY(47vh) scale(0.91); } 27.77778% { transform: translateX(-14vw) translateY(26vh) scale(0.86); } 33.33333% { transform: translateX(-37vw) translateY(-30vh) scale(0.45); } 38.88889% { transform: translateX(30vw) translateY(-37vh) scale(0.41); } 44.44444% { transform: translateX(-30vw) translateY(20vh) scale(0.57); } 50% { transform: translateX(-7vw) translateY(-47vh) scale(0.95); } 55.55556% { transform: translateX(-21vw) translateY(31vh) scale(0.29); } 61.11111% { transform: translateX(9vw) translateY(39vh) scale(0.93); } 66.66667% { transform: translateX(-19vw) translateY(-26vh) scale(0.65); } 72.22222% { transform: translateX(-27vw) translateY(-16vh) scale(0.79); } 77.77778% { transform: translateX(39vw) translateY(30vh) scale(0.49); } 83.33333% { transform: translateX(43vw) translateY(-20vh) scale(0.51); } 88.88889% { transform: translateX(-22vw) translateY(47vh) scale(0.65); } 94.44444% { transform: translateX(8vw) translateY(-34vh) scale(0.55); } 100% { transform: translateX(-47vw) translateY(-11vh) scale(0.75); } } .firefly:nth-child(7) { animation-name: move7; } .firefly:nth-child(7)::before { animation-duration: 9s; } .firefly:nth-child(7)::after { animation-duration: 9s, 5059ms; animation-delay: 0ms, 3590ms; } @keyframes move7 { 0% { transform: translateX(4vw) translateY(-48vh) scale(0.5); } 4.16667% { transform: translateX(44vw) translateY(-18vh) scale(0.37); } 8.33333% { transform: translateX(-27vw) translateY(0vh) scale(0.28); } 12.5% { transform: translateX(-21vw) translateY(-32vh) scale(0.53); } 16.66667% { transform: translateX(-29vw) translateY(7vh) scale(0.65); } 20.83333% { transform: translateX(13vw) translateY(31vh) scale(0.98); } 25% { transform: translateX(9vw) translateY(8vh) scale(0.44); } 29.16667% { transform: translateX(-23vw) translateY(-33vh) scale(0.37); } 33.33333% { transform: translateX(-4vw) translateY(4vh) scale(0.37); } 37.5% { transform: translateX(19vw) translateY(31vh) scale(0.75); } 41.66667% { transform: translateX(9vw) translateY(4vh) scale(0.91); } 45.83333% { transform: translateX(22vw) translateY(0vh) scale(0.76); } 50% { transform: translateX(6vw) translateY(29vh) scale(0.85); } 54.16667% { transform: translateX(0vw) translateY(-1vh) scale(0.99); } 58.33333% { transform: translateX(-8vw) translateY(-35vh) scale(0.66); } 62.5% { transform: translateX(40vw) translateY(-7vh) scale(0.4); } 66.66667% { transform: translateX(2vw) translateY(-6vh) scale(0.71); } 70.83333% { transform: translateX(43vw) translateY(32vh) scale(0.26); } 75% { transform: translateX(-10vw) translateY(43vh) scale(0.94); } 79.16667% { transform: translateX(18vw) translateY(40vh) scale(0.85); } 83.33333% { transform: translateX(35vw) translateY(31vh) scale(0.43); } 87.5% { transform: translateX(41vw) translateY(-29vh) scale(0.71); } 91.66667% { transform: translateX(20vw) translateY(7vh) scale(0.41); } 95.83333% { transform: translateX(44vw) translateY(-13vh) scale(0.71); } 100% { transform: translateX(23vw) translateY(-46vh) scale(0.29); } } .firefly:nth-child(8) { animation-name: move8; } .firefly:nth-child(8)::before { animation-duration: 17s; } .firefly:nth-child(8)::after { animation-duration: 17s, 6389ms; animation-delay: 0ms, 4575ms; } @keyframes move8 { 0% { transform: translateX(-27vw) translateY(13vh) scale(0.52); } 4.54545% { transform: translateX(10vw) translateY(-1vh) scale(0.7); } 9.09091% { transform: translateX(-24vw) translateY(1vh) scale(0.63); } 13.63636% { transform: translateX(16vw) translateY(-47vh) scale(0.92); } 18.18182% { transform: translateX(0vw) translateY(25vh) scale(0.36); } 22.72727% { transform: translateX(-27vw) translateY(-16vh) scale(0.65); } 27.27273% { transform: translateX(-33vw) translateY(-2vh) scale(0.55); } 31.81818% { transform: translateX(29vw) translateY(2vh) scale(0.3); } 36.36364% { transform: translateX(13vw) translateY(30vh) scale(0.76); } 40.90909% { transform: translateX(42vw) translateY(-38vh) scale(0.66); } 45.45455% { transform: translateX(-41vw) translateY(17vh) scale(0.39); } 50% { transform: translateX(38vw) translateY(-38vh) scale(0.36); } 54.54545% { transform: translateX(35vw) translateY(-45vh) scale(0.88); } 59.09091% { transform: translateX(-24vw) translateY(-35vh) scale(0.26); } 63.63636% { transform: translateX(-16vw) translateY(0vh) scale(0.55); } 68.18182% { transform: translateX(-14vw) translateY(17vh) scale(0.42); } 72.72727% { transform: translateX(4vw) translateY(-20vh) scale(0.96); } 77.27273% { transform: translateX(-40vw) translateY(-3vh) scale(0.64); } 81.81818% { transform: translateX(1vw) translateY(3vh) scale(0.71); } 86.36364% { transform: translateX(20vw) translateY(-39vh) scale(0.32); } 90.90909% { transform: translateX(-36vw) translateY(21vh) scale(0.98); } 95.45455% { transform: translateX(-40vw) translateY(-49vh) scale(0.36); } 100% { transform: translateX(-43vw) translateY(-15vh) scale(0.6); } } .firefly:nth-child(9) { animation-name: move9; } .firefly:nth-child(9)::before { animation-duration: 17s; } .firefly:nth-child(9)::after { animation-duration: 17s, 7510ms; animation-delay: 0ms, 5270ms; } @keyframes move9 { 0% { transform: translateX(8vw) translateY(1vh) scale(0.44); } 4.54545% { transform: translateX(-46vw) translateY(-43vh) scale(0.97); } 9.09091% { transform: translateX(16vw) translateY(-10vh) scale(0.81); } 13.63636% { transform: translateX(36vw) translateY(-18vh) scale(0.61); } 18.18182% { transform: translateX(-27vw) translateY(45vh) scale(0.58); } 22.72727% { transform: translateX(-45vw) translateY(47vh) scale(0.33); } 27.27273% { transform: translateX(7vw) translateY(9vh) scale(0.44); } 31.81818% { transform: translateX(27vw) translateY(30vh) scale(0.68); } 36.36364% { transform: translateX(11vw) translateY(42vh) scale(0.48); } 40.90909% { transform: translateX(-2vw) translateY(20vh) scale(0.59); } 45.45455% { transform: translateX(-29vw) translateY(-45vh) scale(0.83); } 50% { transform: translateX(24vw) translateY(24vh) scale(0.85); } 54.54545% { transform: translateX(-19vw) translateY(40vh) scale(0.54); } 59.09091% { transform: translateX(-7vw) translateY(40vh) scale(0.93); } 63.63636% { transform: translateX(34vw) translateY(-2vh) scale(0.38); } 68.18182% { transform: translateX(-48vw) translateY(41vh) scale(0.87); } 72.72727% { transform: translateX(-9vw) translateY(-19vh) scale(0.89); } 77.27273% { transform: translateX(2vw) translateY(43vh) scale(0.75); } 81.81818% { transform: translateX(47vw) translateY(48vh) scale(0.4); } 86.36364% { transform: translateX(22vw) translateY(-31vh) scale(0.87); } 90.90909% { transform: translateX(28vw) translateY(24vh) scale(0.56); } 95.45455% { transform: translateX(22vw) translateY(-5vh) scale(0.64); } 100% { transform: translateX(10vw) translateY(9vh) scale(0.29); } } .firefly:nth-child(10) { animation-name: move10; } .firefly:nth-child(10)::before { animation-duration: 17s; } .firefly:nth-child(10)::after { animation-duration: 17s, 9422ms; animation-delay: 0ms, 5383ms; } @keyframes move10 { 0% { transform: translateX(-44vw) translateY(39vh) scale(0.72); } 4.54545% { transform: translateX(22vw) translateY(-47vh) scale(0.55); } 9.09091% { transform: translateX(-30vw) translateY(-5vh) scale(0.92); } 13.63636% { transform: translateX(3vw) translateY(-9vh) scale(0.92); } 18.18182% { transform: translateX(-39vw) translateY(-20vh) scale(0.98); } 22.72727% { transform: translateX(-2vw) translateY(-31vh) scale(0.31); } 27.27273% { transform: translateX(27vw) translateY(-38vh) scale(0.61); } 31.81818% { transform: translateX(21vw) translateY(1vh) scale(0.8); } 36.36364% { transform: translateX(-4vw) translateY(20vh) scale(0.41); } 40.90909% { transform: translateX(47vw) translateY(-26vh) scale(0.61); } 45.45455% { transform: translateX(30vw) translateY(-30vh) scale(0.3); } 50% { transform: translateX(45vw) translateY(5vh) scale(0.36); } 54.54545% { transform: translateX(-41vw) translateY(-5vh) scale(0.88); } 59.09091% { transform: translateX(15vw) translateY(7vh) scale(0.68); } 63.63636% { transform: translateX(-6vw) translateY(-13vh) scale(0.91); } 68.18182% { transform: translateX(17vw) translateY(-10vh) scale(0.88); } 72.72727% { transform: translateX(1vw) translateY(47vh) scale(0.67); } 77.27273% { transform: translateX(-2vw) translateY(-40vh) scale(0.56); } 81.81818% { transform: translateX(26vw) translateY(45vh) scale(0.6); } 86.36364% { transform: translateX(-32vw) translateY(6vh) scale(0.76); } 90.90909% { transform: translateX(-30vw) translateY(1vh) scale(0.79); } 95.45455% { transform: translateX(-39vw) translateY(-40vh) scale(0.97); } 100% { transform: translateX(24vw) translateY(-27vh) scale(0.59); } } .firefly:nth-child(11) { animation-name: move11; } .firefly:nth-child(11)::before { animation-duration: 11s; } .firefly:nth-child(11)::after { animation-duration: 11s, 5260ms; animation-delay: 0ms, 7543ms; } @keyframes move11 { 0% { transform: translateX(-26vw) translateY(-4vh) scale(0.72); } 5% { transform: translateX(-10vw) translateY(46vh) scale(0.29); } 10% { transform: translateX(-48vw) translateY(-36vh) scale(0.88); } 15% { transform: translateX(36vw) translateY(17vh) scale(0.96); } 20% { transform: translateX(23vw) translateY(6vh) scale(0.47); } 25% { transform: translateX(-11vw) translateY(36vh) scale(0.31); } 30% { transform: translateX(47vw) translateY(33vh) scale(0.77); } 35% { transform: translateX(2vw) translateY(11vh) scale(0.5); } 40% { transform: translateX(-2vw) translateY(-12vh) scale(0.77); } 45% { transform: translateX(-43vw) translateY(8vh) scale(0.3); } 50% { transform: translateX(15vw) translateY(33vh) scale(0.61); } 55% { transform: translateX(6vw) translateY(-40vh) scale(0.91); } 60% { transform: translateX(38vw) translateY(48vh) scale(0.38); } 65% { transform: translateX(-27vw) translateY(-9vh) scale(0.92); } 70% { transform: translateX(-17vw) translateY(-30vh) scale(0.63); } 75% { transform: translateX(9vw) translateY(-34vh) scale(0.26); } 80% { transform: translateX(-25vw) translateY(-27vh) scale(0.84); } 85% { transform: translateX(21vw) translateY(20vh) scale(0.3); } 90% { transform: translateX(-36vw) translateY(49vh) scale(0.86); } 95% { transform: translateX(-32vw) translateY(48vh) scale(0.88); } 100% { transform: translateX(-40vw) translateY(-32vh) scale(0.84); } } .firefly:nth-child(12) { animation-name: move12; } .firefly:nth-child(12)::before { animation-duration: 16s; } .firefly:nth-child(12)::after { animation-duration: 16s, 8268ms; animation-delay: 0ms, 4583ms; } @keyframes move12 { 0% { transform: translateX(24vw) translateY(-33vh) scale(0.58); } 4.54545% { transform: translateX(-38vw) translateY(0vh) scale(0.87); } 9.09091% { transform: translateX(31vw) translateY(47vh) scale(0.61); } 13.63636% { transform: translateX(-30vw) translateY(-2vh) scale(0.93); } 18.18182% { transform: translateX(-8vw) translateY(12vh) scale(0.93); } 22.72727% { transform: translateX(-9vw) translateY(12vh) scale(0.76); } 27.27273% { transform: translateX(-23vw) translateY(-18vh) scale(0.4); } 31.81818% { transform: translateX(-36vw) translateY(-4vh) scale(0.51); } 36.36364% { transform: translateX(26vw) translateY(40vh) scale(0.92); } 40.90909% { transform: translateX(41vw) translateY(48vh) scale(0.9); } 45.45455% { transform: translateX(23vw) translateY(-37vh) scale(0.88); } 50% { transform: translateX(2vw) translateY(47vh) scale(0.71); } 54.54545% { transform: translateX(23vw) translateY(10vh) scale(0.5); } 59.09091% { transform: translateX(-43vw) translateY(-36vh) scale(0.35); } 63.63636% { transform: translateX(49vw) translateY(-3vh) scale(0.91); } 68.18182% { transform: translateX(-46vw) translateY(41vh) scale(0.95); } 72.72727% { transform: translateX(13vw) translateY(15vh) scale(0.55); } 77.27273% { transform: translateX(30vw) translateY(-12vh) scale(0.86); } 81.81818% { transform: translateX(19vw) translateY(-17vh) scale(0.74); } 86.36364% { transform: translateX(-9vw) translateY(38vh) scale(0.33); } 90.90909% { transform: translateX(-40vw) translateY(-22vh) scale(0.94); } 95.45455% { transform: translateX(-1vw) translateY(49vh) scale(0.59); } 100% { transform: translateX(-14vw) translateY(24vh) scale(0.55); } } .firefly:nth-child(13) { animation-name: move13; } .firefly:nth-child(13)::before { animation-duration: 13s; } .firefly:nth-child(13)::after { animation-duration: 13s, 10736ms; animation-delay: 0ms, 7324ms; } @keyframes move13 { 0% { transform: translateX(-32vw) translateY(-22vh) scale(0.71); } 4.34783% { transform: translateX(25vw) translateY(-44vh) scale(0.95); } 8.69565% { transform: translateX(23vw) translateY(26vh) scale(0.26); } 13.04348% { transform: translateX(27vw) translateY(-10vh) scale(0.63); } 17.3913% { transform: translateX(-2vw) translateY(-16vh) scale(0.51); } 21.73913% { transform: translateX(-38vw) translateY(1vh) scale(0.74); } 26.08696% { transform: translateX(-8vw) translateY(-28vh) scale(0.8); } 30.43478% { transform: translateX(14vw) translateY(-13vh) scale(0.49); } 34.78261% { transform: translateX(-13vw) translateY(41vh) scale(0.66); } 39.13043% { transform: translateX(-38vw) translateY(-3vh) scale(0.65); } 43.47826% { transform: translateX(-5vw) translateY(-3vh) scale(0.34); } 47.82609% { transform: translateX(-24vw) translateY(23vh) scale(0.74); } 52.17391% { transform: translateX(40vw) translateY(27vh) scale(0.39); } 56.52174% { transform: translateX(41vw) translateY(33vh) scale(0.33); } 60.86957% { transform: translateX(-7vw) translateY(13vh) scale(0.9); } 65.21739% { transform: translateX(14vw) translateY(-46vh) scale(0.26); } 69.56522% { transform: translateX(-42vw) translateY(38vh) scale(0.67); } 73.91304% { transform: translateX(-39vw) translateY(25vh) scale(0.48); } 78.26087% { transform: translateX(-35vw) translateY(21vh) scale(0.68); } 82.6087% { transform: translateX(-30vw) translateY(8vh) scale(0.99); } 86.95652% { transform: translateX(9vw) translateY(28vh) scale(0.6); } 91.30435% { transform: translateX(-46vw) translateY(-25vh) scale(0.61); } 95.65217% { transform: translateX(-38vw) translateY(-27vh) scale(0.94); } 100% { transform: translateX(-22vw) translateY(23vh) scale(0.72); } } .firefly:nth-child(14) { animation-name: move14; } .firefly:nth-child(14)::before { animation-duration: 9s; } .firefly:nth-child(14)::after { animation-duration: 9s, 10953ms; animation-delay: 0ms, 7357ms; } @keyframes move14 { 0% { transform: translateX(10vw) translateY(-30vh) scale(0.29); } 4.16667% { transform: translateX(-3vw) translateY(15vh) scale(0.38); } 8.33333% { transform: translateX(31vw) translateY(4vh) scale(0.77); } 12.5% { transform: translateX(-48vw) translateY(-43vh) scale(0.37); } 16.66667% { transform: translateX(21vw) translateY(-21vh) scale(0.49); } 20.83333% { transform: translateX(20vw) translateY(5vh) scale(0.45); } 25% { transform: translateX(17vw) translateY(26vh) scale(0.72); } 29.16667% { transform: translateX(-37vw) translateY(-11vh) scale(0.45); } 33.33333% { transform: translateX(35vw) translateY(-37vh) scale(0.26); } 37.5% { transform: translateX(38vw) translateY(-15vh) scale(0.91); } 41.66667% { transform: translateX(46vw) translateY(42vh) scale(0.33); } 45.83333% { transform: translateX(15vw) translateY(14vh) scale(0.47); } 50% { transform: translateX(-46vw) translateY(-5vh) scale(0.44); } 54.16667% { transform: translateX(-7vw) translateY(22vh) scale(0.97); } 58.33333% { transform: translateX(-34vw) translateY(-13vh) scale(0.99); } 62.5% { transform: translateX(31vw) translateY(-8vh) scale(0.85); } 66.66667% { transform: translateX(30vw) translateY(50vh) scale(0.45); } 70.83333% { transform: translateX(46vw) translateY(-39vh) scale(0.83); } 75% { transform: translateX(-17vw) translateY(-41vh) scale(0.97); } 79.16667% { transform: translateX(21vw) translateY(-45vh) scale(0.99); } 83.33333% { transform: translateX(19vw) translateY(22vh) scale(0.84); } 87.5% { transform: translateX(-40vw) translateY(27vh) scale(1); } 91.66667% { transform: translateX(3vw) translateY(-5vh) scale(0.4); } 95.83333% { transform: translateX(-23vw) translateY(-19vh) scale(0.83); } 100% { transform: translateX(-43vw) translateY(10vh) scale(0.94); } } .firefly:nth-child(15) { animation-name: move15; } .firefly:nth-child(15)::before { animation-duration: 10s; } .firefly:nth-child(15)::after { animation-duration: 10s, 9120ms; animation-delay: 0ms, 2076ms; } @keyframes move15 { 0% { transform: translateX(-25vw) translateY(-26vh) scale(0.6); } 5.88235% { transform: translateX(27vw) translateY(-30vh) scale(0.42); } 11.76471% { transform: translateX(-43vw) translateY(34vh) scale(0.83); } 17.64706% { transform: translateX(-2vw) translateY(17vh) scale(0.34); } 23.52941% { transform: translateX(10vw) translateY(12vh) scale(0.53); } 29.41176% { transform: translateX(2vw) translateY(-2vh) scale(0.62); } 35.29412% { transform: translateX(3vw) translateY(35vh) scale(0.46); } 41.17647% { transform: translateX(-31vw) translateY(-33vh) scale(0.82); } 47.05882% { transform: translateX(-34vw) translateY(21vh) scale(0.51); } 52.94118% { transform: translateX(-42vw) translateY(0vh) scale(0.87); } 58.82353% { transform: translateX(4vw) translateY(21vh) scale(0.78); } 64.70588% { transform: translateX(-16vw) translateY(21vh) scale(0.36); } 70.58824% { transform: translateX(46vw) translateY(-3vh) scale(0.55); } 76.47059% { transform: translateX(21vw) translateY(-44vh) scale(0.91); } 82.35294% { transform: translateX(33vw) translateY(19vh) scale(0.99); } 88.23529% { transform: translateX(-6vw) translateY(-31vh) scale(0.54); } 94.11765% { transform: translateX(23vw) translateY(-9vh) scale(0.57); } 100% { transform: translateX(29vw) translateY(-14vh) scale(0.36); } } @keyframes drift { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes flash { 0%, 30%, 100% { opacity: 0; box-shadow: 0 0 0vw 0vw rgb(5, 5, 5); } 5% { opacity: 1; box-shadow: 0 0 2vw 0.4vw rgb(205, 1, 69); } } /* From uiverse.io */ .button { --glow-color: rgb(217, 176, 255); --glow-spread-color: rgba(191, 123, 255, 0.781); --enhanced-glow-color: rgb(231, 206, 255); --btn-color: rgb(100, 61, 136); border: .25em solid var(--glow-color); padding: 1em 3em; color: var(--glow-color); font-size: 15px; font-weight: bold; background-color: var(--btn-color); border-radius: 1em; outline: none; box-shadow: 0 0 1em .25em var(--glow-color), 0 0 4em 1em var(--glow-spread-color), inset 0 0 .75em .25em var(--glow-color); text-shadow: 0 0 .5em var(--glow-color); position: relative; transition: all 0.3s; text-align: center; overflow: hidden; } .button img{ left: 50px; align-items: center; } .button::after { pointer-events: none; content: ""; position: absolute; top: 120%; left: 0; height: 100%; width: 100%; background-color: var(--glow-spread-color); filter: blur(2em); opacity: .7; transform: perspective(1.5em) rotateX(35deg) scale(1, .6); } .button:hover { color: var(--btn-color); background-color: var(--glow-color); box-shadow: 0 0 1em .25em var(--glow-color), 0 0 4em 2em var(--glow-spread-color), inset 0 0 .75em .25em var(--glow-color); } .button:active { box-shadow: 0 0 0.6em .25em var(--glow-color), 0 0 2.5em 2em var(--glow-spread-color), inset 0 0 .5em .25em var(--glow-color); }