body{background:#dfe7ef;font-family:Bitter,serif}*{box-sizing:border-box}.icon{display:inline-block;width:1em;height:1em;stroke-width:0;stroke:currentColor;fill:currentColor}.wrapper{width:100%;display:flex;align-items:center;justify-content:center;min-height:100vh;background-size:cover}@media (max-height:500px),screen and (max-width:700px){.wrapper{flex-wrap:wrap;flex-direction:column}}.player{background:#ff8d00;width:410px;min-height:480px;box-shadow:0 15px 35px -5px rgba(50,88,130,.32);border-radius:15px;padding:30px}@media (max-height:500px),screen and (max-width:576px){.player{width:95%;padding:20px;margin-top:75px;min-height:0;padding-bottom:30px;max-width:400px;margin-left:2.5%}}.player__top{display:flex;align-items:flex-start;position:relative;z-index:4}@media (max-height:500px),screen and (max-width:576px){.player__top{flex-wrap:wrap}}.player-cover{width:300px;height:300px;margin-left:-70px;flex-shrink:0;position:relative;z-index:2;border-radius:15px;z-index:1}@media (max-height:500px),screen and (max-width:576px){.player-cover{margin-top:-70px;margin-bottom:25px;width:290px;height:230px;margin-left:auto;margin-right:auto}}.player-cover__item{background-repeat:no-repeat;background-position:50%;background-size:cover;width:100%;height:100%;border-radius:15px;position:absolute;left:0;top:0}.player-cover__item:before{z-index:1;top:30px;transform:scale(.9);-webkit-filter:blur(10px);filter:blur(10px);opacity:.9}.player-cover__item:after,.player-cover__item:before{content:"";background:inherit;width:100%;height:100%;box-shadow:0 10px 40px 0 rgba(76,70,124,.5);display:block;position:absolute;border-radius:15px}.player-cover__item:after{z-index:2}.player-cover__img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:15px;box-shadow:0 10px 40px 0 rgba(76,70,124,.5);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.player-controls{flex:1;padding-left:20px;display:flex;flex-direction:column;align-items:center}@media (max-height:500px),screen and (max-width:576px){.player-controls{flex-direction:row;padding-left:0;width:100%;flex:unset}}.player-controls__item{display:inline-flex;font-size:30px;padding:5px;margin-bottom:10px;color:#acb8cc;cursor:pointer;width:50px;height:50px;align-items:center;justify-content:center;position:relative;transition:all .3s ease-in-out}@media (max-height:500px),screen and (max-width:576px){.player-controls__item{font-size:26px;padding:5px;margin-right:10px;color:#acb8cc;cursor:pointer;width:40px;height:40px;margin-bottom:0}}.player-controls__item:before{content:"";position:absolute;width:100%;height:100%;border-radius:50%;background:#fff;transform:scale(.5);opacity:0;box-shadow:0 5px 10px 0 rgba(76,70,124,.2);transition:all .3s ease-in-out;transition:all .4s cubic-bezier(.35,.57,.13,.88)}@media screen and (min-width:500px){.player-controls__item:hover{color:#532ab9}.player-controls__item:hover:before{opacity:1;transform:scale(1.3)}}@media (max-height:500px),screen and (max-width:576px){.player-controls__item:active{color:#532ab9}.player-controls__item:active:before{opacity:1;transform:scale(1.3)}}.player-controls__item .icon{position:relative;z-index:2}.player-controls__item.-xl{margin-bottom:0;font-size:95px;-webkit-filter:drop-shadow(0 11px 6px rgba(172,184,204,.45));filter:drop-shadow(0 11px 6px rgba(172,184,204,.45));color:#fff;width:auto;height:auto;display:inline-flex}@media (max-height:500px),screen and (max-width:576px){.player-controls__item.-xl{margin-left:auto;font-size:75px;margin-right:0}}.player-controls__item.-xl:before{display:none}.player-controls__item.-favorite.active{color:red}[v-cloak],[v-cloak]>*{display:none}.progress{width:100%;margin-top:30px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.progress__top{display:flex;align-items:flex-end;justify-content:space-between}.progress__duration{color:#fff;font-weight:700;font-size:20px;opacity:.5}.progress__time{margin-top:2px;color:#fff;font-weight:700;font-size:16px;opacity:.7}.progress__bar{height:6px;width:100%;cursor:pointer;background-color:#d0d8e6;display:inline-block;border-radius:10px}.progress__current{height:inherit;width:0;background-color:#a3b3ce;border-radius:10px}.album-info{color:#fff;flex:1;padding-right:60px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (max-height:500px),screen and (max-width:576px){.album-info{padding-right:30px}}.album-info__name{font-size:20px;font-weight:700;margin-bottom:12px;line-height:1.3em}@media (max-height:500px),screen and (max-width:576px){.album-info__name{font-size:18px;margin-bottom:9px}}.album-info__track{font-weight:400;font-size:20px;opacity:.7;line-height:1.3em;min-height:52px}@media (max-height:500px),screen and (max-width:576px){.album-info__track{font-size:18px;min-height:50px}}.github-btn{position:absolute;right:40px;bottom:50px;text-decoration:none;padding:15px 25px;border-radius:4px;box-shadow:0 4px 30px -6px rgba(36,52,70,.65);background:#24292e;color:#fff;font-weight:700;letter-spacing:1px;font-size:16px;transition:all .3s ease-in-out}@media screen and (min-width:500px){.github-btn:hover{transform:scale(1.1);box-shadow:0 17px 20px -6px rgba(36,52,70,.36)}}@media screen and (max-width:700px){.github-btn{position:relative;bottom:auto;right:auto;margin-top:20px}.github-btn:active{transform:scale(1.1);box-shadow:0 17px 20px -6px rgba(36,52,70,.36)}}.scale-out-enter-active,.scale-out-leave-active{transition:all .35s ease-in-out}.scale-out-enter{transform:scale(.55);pointer-events:none;opacity:0}.scale-out-leave-to{transform:scale(1.2);pointer-events:none;opacity:0}.scale-in-enter-active,.scale-in-leave-active{transition:all .35s ease-in-out}.scale-in-enter{transform:scale(1.2);pointer-events:none;opacity:0}.scale-in-leave-to{transform:scale(.55);pointer-events:none;opacity:0}