@import url(https://fonts.googleapis.com/css2?family=Muli&display=swap);@import url(https://fonts.googleapis.com/css2?family=Lato&display=swap);@-webkit-keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@-webkit-keyframes scale-up-center{0%{transform:scale(.5)}to{transform:scale(1)}}@keyframes scale-up-center{0%{transform:scale(.5)}to{transform:scale(1)}}@-webkit-keyframes flip-in-hor-bottom{0%{transform:rotateX(80deg);opacity:0}to{transform:rotateX(0);opacity:1}}@keyframes flip-in-hor-bottom{0%{transform:rotateX(80deg);opacity:0}to{transform:rotateX(0);opacity:1}}@-webkit-keyframes appear-smoothly{0%{opacity:0}to{opacity:1}}@keyframes appear-smoothly{0%{opacity:0}to{opacity:1}}*{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow-wrap:break-word;margin:0;padding:0}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#f5f5f5}::-webkit-scrollbar{width:10px;background-color:#f5f5f5}::-webkit-scrollbar-thumb{background-color:#ba83ca;background-image:-webkit-linear-gradient(45deg,hsla(0,0%,100%,.2) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.2) 0,hsla(0,0%,100%,.2) 75%,transparent 0,transparent)}ul{list-style:none}body{align-items:center;justify-content:center;min-height:100vh;font-family:Lato,sans-serif;background:#df83f1;background:linear-gradient(90deg,#df83f1,#82279f 35%,#53cfe0);background-size:400% 400%;-webkit-animation:gradient 15s ease infinite;animation:gradient 15s ease infinite;-webkit-font-smoothing:antialiased}body,main{display:flex}main{flex-direction:column;flex-wrap:nowrap;width:100%;max-width:375px;max-height:623px;margin:0 auto;padding:25px;background-color:#fff;border-radius:15px;-webkit-animation:scale-up-center 1s cubic-bezier(.39,.575,.565,1) both;animation:scale-up-center 1s cubic-bezier(.39,.575,.565,1) both}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;outline:none;cursor:pointer}button:hover{opacity:.8;transform:scale(1.1)}.song-details{margin-top:25px}.cover-playlist{height:50px;width:50px}.cover-wrapper{width:100%;margin-top:30px;height:270px;text-align:center}.animated{-webkit-animation:appear-smoothly 1s normal both;animation:appear-smoothly 1s normal both;transition:all .3s}.cover{height:100%;width:270px;box-shadow:0 24px 35px -16px rgba(107,179,237,.5);border-radius:5px}.cover-playlist>.cover{margin-right:15px;width:50px}.song-title{color:#53565a;font-size:1.13em;margin-bottom:5px}.artist,.song-title{width:100%;text-align:center}.artist{font-family:Muli;font-weight:400}.details{margin-left:10px;width:100%}.details>.song-title{color:#585858;font-size:inherit;text-align:left}.details>.artist{color:#5d5555;text-align:left}.controls{display:flex;justify-content:center;align-items:center;padding:20px 15px}.pause,.play{background-image:linear-gradient(to right top,#d16ba5,#c777b9,#ba83ca,#aa8fd8,#9a9ae1,#8aa7ec,#79b3f4,#69bff8,#52cffe,#41dfff,#46eefa,#5ffbf1);border-radius:50%;width:80px;height:80px;box-shadow:-1px 17px 24px -6px rgba(0,0,0,.2);font-size:25px;margin-left:20px;margin-right:20px}.next,.pause,.play,.prev{justify-content:center;cursor:pointer;color:#fff}.next,.prev{border:0;border-radius:50%;font-size:20px;width:50px;height:50px;display:flex;align-items:center;background-color:rgba(0,0,0,.09);transition:background-color .2s;position:relative}.playlist{background-color:#fff;overflow-y:auto;max-height:622px;border-radius:5px}.playlist h3{color:#212121;font-size:18px;font-weight:400;margin-top:20px;margin-bottom:20px;text-align:center}.playlist .song{display:flex;padding:10px}.actions>.delete{border-radius:50%;width:40px;height:40px;justify-content:center;box-shadow:-1px 17px 24px -6px rgba(0,0,0,.2);cursor:pointer;font-size:20px;color:#ba83ca}.playlist .song:hover{background-color:#ededed;transition:box-shadow .2s,background-color .3s}.timer{display:flex;width:100%;justify-content:space-between;padding:10px}.k-progress-outer{margin-top:15px!important;padding-right:0!important}.footer{display:flex;justify-content:space-between;font-size:10px}.footer>a{cursor:pointer;color:#d4d4d4;position:relative;top:-10px;font-size:25px}#app{display:grid;gap:1rem;grid-template-columns:1fr 1fr;padding:20px}@media (max-width:768px){#app{grid-template-columns:1fr}body{height:100%;margin-top:10px}.playlist{max-height:200px}}