*{margin:0;padding:0;outline:none;border:none;box-sizing:border-box}html,body{height:100%}body{background:url("/assets/background-mobile.jpg") no-repeat fixed center;background-size:cover;font-size:16px;font-family:'Roboto', arial, sans-serif}@media all and (min-width: 500px){body{background-image:url("/assets/background.jpg")}}@media all and (min-height: 700px){body{background-image:url("/assets/background.jpg")}}#app{position:absolute;top:0;left:0;z-index:50;width:100%;height:100%;transition:all 160ms ease-in-out;perspective:1400px}@media all and (min-width: 500px){#app{left:50%;width:96%;max-width:400px;transform:translateX(-50%)}}@media all and (min-height: 700px){#app{position:absolute;top:45%;left:50%;height:500px;transform:translateX(-50%) translateY(-50%)}}#player,#library{position:absolute;top:0;left:0;z-index:100;width:100%;height:100%;background:white;box-shadow:2px 2px 10px rgba(0,0,0,0.1);text-align:center;transition:all 300ms ease-in-out}#app.player #player{transform:rotateY(0)}#app.player #library{z-index:99;transform:rotateY(-180deg);opacity:0}#app.library #library{transform:rotateY(0)}#app.library #player{z-index:99;transform:rotateY(180deg);opacity:0}#copy{display:none}@media all and (min-height: 700px){#copy{display:block;position:fixed;bottom:0;padding:4px 6px;color:rgba(255,255,255,0.8);font-size:11px}}#player .cover{height:calc(100% - 224px);width:100%;background-position:center;background-repeat:no-repeat;background-size:cover}@media all and (min-height: 700px){#player .cover{height:276px}}#player .cover::before{display:block;content:'';height:100px;margin-bottom:-100px;background:linear-gradient(to top, transparent, rgba(0,0,0,0.4))}#player a.back{display:block;float:left;height:48px;width:48px;margin-bottom:-48px;background:url("/assets/icon_back.png") no-repeat 8px 12px;cursor:pointer}#visualiser{width:100%;height:100%}#visualiser .visualiserContents{display:flex;align-items:flex-end;width:100%;height:100%}#visualiser .visualiserBar{flex-grow:1;height:0;margin-right:1px;background:rgba(255,255,255,0.4)}#player .title{padding:0 25px;padding-top:25px;font-weight:500;white-space:nowrap;overflow:hidden}#player .info{padding:2px 25px;padding-bottom:25px;color:rgba(0,0,0,0.6);font-size:13px;white-space:nowrap;overflow:hidden}#player .button{display:block;width:48px;height:48px;margin:0 auto;border-radius:50%;background:#eee;cursor:pointer}#player .button.playing{background:#eee url("/assets/icon_pause.png") no-repeat center}#player .button.paused,#player .button.stopped{background:#eee url("/assets/icon_play.png") no-repeat 12px 12px}#player .tracker{padding:25px 30px}@media all and (min-height: 700px){#player .tracker{padding:25px 40px}}#player .time{height:16px;padding-right:1px;color:rgba(0,0,0,0.6);font-size:13px;text-align:right}#player .catch{height:11px;padding:3px 0}#player .bar{height:5px;width:100%;background:#e4e4e4}#player .fill{height:5px;background:#4D82A3}#player .seeker{position:relative;top:-14px;height:23px;width:13px;margin-left:-7px}#player .seeker::after{display:block;content:'';height:11px;width:4px;margin:6px auto;background:#4D82A3}#player .seeker:hover::after{background:#7ca6c1}#library .top{display:flex;height:50px;box-shadow:0 1px 2px rgba(0,0,0,0.1)}#library h1{flex-grow:1;height:50px;padding:0 15px;line-height:50px;text-align:left;font-size:20px;font-weight:400}#library a.toPlayer{display:block;height:50px;width:50px;background:url("/assets/icon_player.png") no-repeat center;cursor:pointer}#library .items{height:calc(100% - 51px);overflow:auto}#library .item{display:flex;align-items:center;width:100%;padding:15px;border-bottom:1px solid #eee;cursor:pointer}#library .cover{width:48px;height:48px;background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:3px}#library .playing{display:block;position:relative;top:12px;left:12px;width:24px;height:24px;background:white url("/assets/icon_playing.png") no-repeat center;border-radius:50%}#library .title{flex-grow:1;padding:0 16px;text-align:left}#library .date{color:rgba(0,0,0,0.6);font-size:13px}