*{box-sizing:border-box;transition:font-size .5s ease 0s}:root{--end-scale: 0;--end-position: 60;--end-rotation: 0;--speed: 1.5}html,body{align-items:center;background-color:#111;display:flex;font-family:Lato,sans-serif;height:100vh;justify-content:center;margin:0;overflow:hidden;padding:2rem 0;width:100vw}#app{align-items:center;display:flex;flex-direction:column;justify-content:center}label{color:#fafafa}.track{display:flex;justify-content:center;margin:0 auto 150px;position:relative;text-align:center;max-width:80vw}.drop-word{color:#fafafa;flex:1;font-size:2rem;animation:drop calc(var(--speed) * 1s) infinite linear;position:absolute;left:0;top:0}@media(min-width:768px){.drop-word{font-size:4rem}}.drop-word:nth-child(1){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 1;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#fe245f}.drop-word:nth-child(2){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 2;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#d966ce}.drop-word:nth-child(3){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 3;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#96e0d9}.drop-word:nth-child(4){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 4;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#72a245}.drop-word:nth-child(5){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 5;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#41a6ae}.drop-word:nth-child(6){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 6;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#ca2f9c}.drop-word:nth-child(7){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 7;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#5c8b77}.drop-word:nth-child(8){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 8;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#b6fb87}.drop-word:nth-child(9){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 9;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#fcdd28}.drop-word:nth-child(10){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 10;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#c01ec8}.drop-word:nth-child(11){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 11;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#a08fb0}.drop-word:nth-child(12){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 12;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#8c0fda}.drop-word:nth-child(13){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 13;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#a9caca}.drop-word:nth-child(14){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 14;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#54bdbd}.drop-word:nth-child(15){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 15;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#c3b31e}.drop-word:nth-child(16){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 16;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#d66ad0}.drop-word:nth-child(17){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 17;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#b7cc81}.drop-word:nth-child(18){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 18;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#508375}.drop-word:nth-child(19){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 19;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#97974d}.drop-word:nth-child(20){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 20;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#58e21c}.drop-word:nth-child(21){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 21;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#a1d636}.drop-word:nth-child(22){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 22;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#43a88d}.drop-word:nth-child(23){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 23;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#182985}.drop-word:nth-child(24){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 24;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#4b13c6}.drop-word:nth-child(25){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 25;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#320050}.drop-word:nth-child(26){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 26;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#92f265}.drop-word:nth-child(27){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 27;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#28c8c2}.drop-word:nth-child(28){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 28;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#bc98d6}.drop-word:nth-child(29){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 29;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#00e32a}.drop-word:nth-child(30){opacity:0;transform:translateY(calc(var(--end-position) * 1px)) rotate(calc(var(--end-rotation) * 1deg)) scale(var(--end-scale));--circle: 30;animation-delay:calc((0 - var(--speed) * 1 / 30 * (var(--circle) - 1)) * 1s);color:#48e505}.drop-word:nth-child(31){position:relative;z-index:99}.option{z-index:1}@keyframes drop{0%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}