.keys{cursor:none;width:100%;max-width:880px;height:350px;margin:40px auto 0;display:block;position:relative}.key{box-sizing:border-box;z-index:2;text-align:center;border:4px solid #000;border-radius:.5rem;transition:all 70ms;display:block;position:relative}.key:not(.sharp){float:left;background:#fff;width:10%;height:100%}.key.sharp{color:#fff;z-index:3;background:#000;width:6%;height:60%;position:absolute;top:0}.key[data-key="87"]{left:7%}.key[data-key="69"]{left:17%}.key[data-key="84"]{left:37%}.key[data-key="89"]{left:47%}.key[data-key="85"]{left:57%}.key[data-key="79"]{left:77%}.key[data-key="80"]{left:87%}.playing{border-color:#028ae9;transform:scale(.95);box-shadow:0 0 1rem #028ae9}.hints{width:100%;font-size:20px;font-weight:700;display:block;position:absolute;bottom:7px}.bg-animation{background:#000;width:100%;position:relative}.circles{width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.circles li{background:#1cad75;width:20px;height:20px;list-style:none;animation:8s linear infinite animate;display:block;position:absolute;bottom:-150px}.circles li:first-child{width:45px;height:45px;animation-delay:4s;left:4%}.circles li:nth-child(2){width:25px;height:25px;animation-duration:10s;animation-delay:8s;left:9%}.circles li:nth-child(3){width:25px;height:25px;animation-delay:6s;left:14%}.circles li:nth-child(4){width:50px;height:50px;animation-duration:9s;animation-delay:2s;left:19%}.circles li:nth-child(5){width:20px;height:20px;animation-delay:3s;left:24%}.circles li:nth-child(6){width:60px;height:60px;animation-delay:1s;left:29%}.circles li:nth-child(7){width:85px;height:85px;animation-delay:7s;left:34%}.circles li:nth-child(8){width:45px;height:45px;animation-duration:11s;animation-delay:5s;left:39%}.circles li:nth-child(9){width:15px;height:15px;animation-duration:6s;animation-delay:2s;left:44%}.circles li:nth-child(10){width:40px;height:40px;animation-duration:12s;animation-delay:1s;left:49%}.circles li:nth-child(11){width:15px;height:15px;animation-duration:7s;animation-delay:2s;left:54%}.circles li:nth-child(12){width:25px;height:25px;animation-duration:8s;animation-delay:4s;left:59%}.circles li:nth-child(13){width:75px;height:75px;animation-duration:9s;animation-delay:6s;left:64%}.circles li:nth-child(14){width:85px;height:85px;animation-duration:5s;animation-delay:3s;left:69%}.circles li:nth-child(15){width:60px;height:60px;animation-duration:10s;animation-delay:5s;left:74%}.circles li:nth-child(16){width:35px;height:35px;animation-duration:4s;animation-delay:0s;left:79%}.circles li:nth-child(17){width:25px;height:25px;animation-duration:8s;animation-delay:7s;left:84%}.circles li:nth-child(18){width:50px;height:50px;animation-duration:6s;animation-delay:8s;left:89%}.circles li:nth-child(19){width:70px;height:70px;animation-duration:11s;animation-delay:0s;left:98%}.circles li:nth-child(20){width:80px;height:80px;animation-duration:12s;animation-delay:3s;right:4%}.circles li:nth-child(21){width:40px;height:40px;animation-duration:7s;animation-delay:2s;right:9%}.circles li:nth-child(22){width:60px;height:60px;animation-duration:12s;animation-delay:5s;right:14%}.circles li:nth-child(23){width:25px;height:25px;animation-duration:6s;animation-delay:8s;right:19%}.circles li:nth-child(24){width:70px;height:70px;animation-duration:7s;animation-delay:4s;right:24%}.circles li:nth-child(25){width:35px;height:35px;animation-duration:11s;animation-delay:9s;right:29%}.circles li:nth-child(26){width:15px;height:15px;animation-duration:12s;animation-delay:1s;right:34%}.circles li:nth-child(27){width:25px;height:25px;animation-duration:3s;animation-delay:6s;right:47%}.circles li:nth-child(28){width:45px;height:45px;animation-duration:5s;animation-delay:6s;right:59%}.circles li:nth-child(29){width:65px;height:65px;animation-duration:9s;animation-delay:6s;right:72%}.circles li:nth-child(30){width:75px;height:75px;animation-duration:12s;animation-delay:6s;right:88%}.circles li:nth-child(31){width:55px;height:55px;animation-duration:6s;animation-delay:6s;right:82%}.circles li:nth-child(32){width:75px;height:75px;animation-duration:4s;animation-delay:6s;right:95%}@keyframes animate{0%{opacity:1;border-radius:100%;transform:translateY(0)rotate(0)}80%{opacity:0}to{opacity:0;border-radius:100%;transform:translateY(-1500px)rotate(720deg)}}