*{box-sizing:border-box;padding:0}*,body{margin:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}::-webkit-scrollbar{display:none}.App{display:flex;height:100vh;overflow:hidden;position:relative;width:100%}.background{background:url(/static/media/background.8b16878b58cd04fe945c.jpg) no-repeat 50% fixed;background-size:cover;bottom:0;-webkit-filter:grayscale(100);filter:grayscale(100);left:0;position:absolute;right:0;top:0;z-index:-1}.leftMenu{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(34,34,34,.6);height:100vh;min-height:100vh;overflow:hidden;padding:20px 15px;transition:all .3s cubic-bezier(.25,.8,.25,1);width:280px;z-index:1}.leftMenu .logoContainer{align-items:center;color:#f1f1f1;display:flex;justify-content:space-between}.leftMenu .logoContainer i{font-size:30px}.leftMenu .logoContainer i:nth-child(3){font-size:20px!important}.leftMenu .logoContainer h2{font-size:20px}.searchBox{border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.4);color:#848484;height:45px;margin-top:20px;overflow:hidden;position:relative;width:100%}.searchBox input{background:rgba(0,0,0,.5);border:none;color:#f1f1f1;font-size:14px;font-weight:700;height:100%;outline:none;padding-left:45px;width:100%}.searchBox .searchIcon{color:#848484;font-size:20px;height:45px;left:0;line-height:45px;position:absolute;text-align:center;top:0;width:45px}.MenuContainer{margin:15px 0}.MenuContainer .title{color:#848484;font-size:12px;font-weight:700;margin-bottom:10px;text-transform:uppercase}.MenuContainer ul{padding:0;width:100%}.MenuContainer ul li:before{background:#49e12e;border-radius:5px;content:"";height:100%;left:-15px;position:absolute;top:0;width:0}.MenuContainer ul li{list-style:none;margin:5px 0;padding:5px 0;position:relative;width:100%}.MenuContainer ul li.active:before,.MenuContainer ul li:hover:before{transition:all .3s ease;width:5px}.MenuContainer ul li a{align-items:center;color:#848484;display:flex;font-size:16px;text-decoration:none}.MenuContainer ul li.active a,.MenuContainer ul li:hover a{color:#f1f1f1;transition:all .3s ease}.MenuContainer ul li a i{font-size:18px;margin-right:15px}.playListContainer{cursor:pointer;margin:15px 0}.playListContainer .playListTitle{align-items:center;color:#848484;display:flex;justify-content:space-between;margin-bottom:10px}.playListContainer .playListTitle p{color:#848484;font-size:12px;font-weight:700;text-transform:uppercase}.playListContainer .playListTitle i{color:#f1f1f1;cursor:pointer}.playListContainer .playListContent{height:160px;overflow-x:hidden;overflow-y:scroll;position:relative}.playListContainer .playListContent .playList{align-items:center;color:#848484;display:flex;margin:10px 0}.playListContainer .playListContent .playList:hover{color:#f1f1f1;transition:all .3s ease}.playListContainer .playListContent .playList i{font-size:18px}.playListContainer .playListContent .playList .list{margin-right:15px}.playListContainer .playListContent .playList .trash{margin-left:auto}.playListContainer .playListContent .playList p{display:inline;font-size:16px;overflow:hidden;text-overflow:ellipsis}.trackList{border-top:1px solid #f1f1f1;padding-top:20px}.trackList .trackListHeader{align-items:center;display:flex}.trackList .trackListHeader img{width:50px!important}.trackList .trackListHeader p{color:#f1f1f1;font-size:14px;margin-left:10px}.trackList .trackListHeader p span{color:#848484;display:block;font-size:12px}.trackList .trackListContent{align-items:center;color:#848484;display:flex;justify-content:space-between;margin-top:20px}.trackList .trackListContent i{font-size:18px}.trackList .trackListContent i:hover{color:#f1f1f1;cursor:pointer;transition:all .3s ease}.trackList .trackListContent input{-webkit-appearance:none;appearance:none;background:#848484;border:none;border-radius:10px;height:5px;outline:none;position:relative}.trackList .trackListContent input:before{background:#49e12e;border-radius:10px;content:"";height:100%;left:0;position:absolute;top:0;transition:width .25s linear;width:50%;z-index:2}.trackList .trackListContent input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#f1f1f1;border:2px solid #000;border-radius:10px;box-sizing:border-box;cursor:pointer;height:20px;margin:-2px 0 0;position:relative;-webkit-transition:all .25s linear;transition:all .25s linear;width:10px;z-index:3}.trackList .trackListContent input::-moz-progress-bar,.trackList .trackListContent input::-moz-range-thumb{background:#49e12e;border-radius:10px;height:100%;-moz-transition:width .25s linear;transition:width .25s linear;width:50%;z-index:2}@media screen and (max-width:550px){.leftMenu{min-width:64px;width:64px}.leftMenu .MenuContainer ul li a span,.leftMenu .logoContainer :nth-child(3),.leftMenu .logoContainer h2,.leftMenu .playListContainer,.leftMenu .searchBox,.leftMenu .trackList{display:none}.leftMenu .MenuContainer ul li a i{align-items:center;font-size:22px;left:5px;position:relative}.MenuContainer .title{display:none}}.mainContainer{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(34,34,34,.6);flex-grow:1;height:100vh;transition:all .3s cubic-bezier(.175,.885,.25,1);z-index:1}.banner{height:300px;position:relative}.banner .bannerImg{-webkit-filter:grayscale(100%);filter:grayscale(100%);height:100%;left:0;object-fit:cover;position:absolute;top:0;width:100%}.banner .bottomLayer{background-image:linear-gradient(transparent,rgba(0,0,0,.9));bottom:0;height:5rem;left:0;position:absolute;width:100%}.banner .bannerContent{bottom:0;display:flex;flex-direction:column;left:0;padding:20px 30px;position:absolute;right:0;top:0;z-index:3}.banner .bannerContent .breadCrump{align-items:center;display:flex;justify-content:space-between}.banner .bannerContent .breadCrump p{color:#848484;font-size:14px;font-weight:600;letter-spacing:1px}.banner .bannerContent .breadCrump p span{color:#f1f1f1}.banner .bannerContent i{color:#f1f1f1;cursor:pointer;font-size:24px}.banner .bannerContent .artist{color:#f1f1f1;justify-content:space-between;margin-top:auto}.banner .bannerContent .artist,.banner .bannerContent .artist .left .name{align-items:center;display:flex}.banner .bannerContent .artist .left .name h2{font-size:50px}.banner .bannerContent .artist .left .name img{margin-left:10px;position:relative;top:8px;width:30px}.banner .bannerContent .artist .left p{font-size:14px}.banner .bannerContent .artist .left p i{margin-right:5px}.banner .bannerContent .artist .left p span{color:#848484;margin-left:5px}.banner .bannerContent .artist .right{align-items:center;display:flex}.banner .bannerContent .artist .right a{align-items:center;border-radius:100vh;color:#f1f1f1;display:flex;font-size:16px;font-weight:700;margin:0 15px;padding:10px 30px;text-align:center;text-decoration:none}.banner .bannerContent .artist .right a i{font-size:12px;margin-right:10px}.banner .bannerContent .artist .right a:first-child{background:#39aa24;margin-left:0}.banner .bannerContent .artist .right a:nth-child(2){background:rgba(0,0,0,.4);border:1px solid hsla(0,0%,100%,.1);margin-right:0}.banner .bannerContent .artist .right a:hover{box-shadow:5px 10px 20px rgba(0,0,0,.4)}.mainContainer .menuList{background:#2c2c2c;justify-content:space-between;padding:20px 30px}.mainContainer .menuList,.mainContainer .menuList ul{align-items:center;display:flex}.mainContainer .menuList ul li:before{align-items:center;background:#f1f1f1;border-radius:5px;bottom:-20px;content:"";height:5px;justify-content:space-between;left:10px;position:absolute;width:0}.mainContainer .menuList ul li{list-style:none;margin:0 20px;position:relative}.mainContainer .menuList ul li.active:before,.mainContainer .menuList ul li:hover:before{transition:width .3s ease;width:25px}.mainContainer .menuList ul li a{color:#848484;font-size:14px;font-weight:700;text-decoration:none;transition:all .3s cubic-bezier(.175,.885,.32,1)}.mainContainer .menuList ul li.active a,.mainContainer .menuList ul li:hover a{color:#f1f1f1;transition:.3s}.mainContainer .menuList p{color:#f1f1f1;font-size:14px;font-weight:600;letter-spacing:1px}.mainContainer .menuList p i{font-size:16px;margin-left:3px;margin-right:5px;position:relative;top:3px}.mainContainer .menuList p span{color:#848484;font-size:12px;margin-left:5px;text-align:center}.audioList{padding:10px 30px}.audioList .title{color:#f1f1f1;font-size:18px}.audioList .title span{color:#848484;font-size:12px;margin-left:5px}.songsContainer{height:220px;overflow-x:hidden;overflow-y:scroll}.songs{align-items:center;color:#848484;display:flex;font-size:14px;font-weight:600;margin:10px 0;padding:5px;width:100%}.songs.active,.songs:hover{color:#f1f1f1}.count{margin-right:10px}.song{align-items:center;border-bottom:1px solid hsla(0,0%,100%,.1);cursor:pointer;display:flex;padding-bottom:5px;width:100%}.song .imgBox{background:#555;border-radius:.5rem;height:45px;margin-right:10px;min-width:45px;overflow:hidden;width:45px}.song .imgBox img{height:100%;object-fit:cover;width:100%}.song .section{width:100%}.song .section,.song .section .songName{align-items:center;display:flex;justify-content:space-between}.song .section .songName{width:50%}.song .section .songName .spanArtist{align-items:center}.song .section .hits{align-items:center;display:flex;justify-content:space-between}.song .section .hits .duration,.song .section .hits .hit{margin-right:15px}.song .section .hits .duration i,.song .section .hits .hit i{font-size:12px;margin-right:5px}.song .section .hits .favorite i{color:#39aa24;-webkit-filter:drop-shadow(0 0 5px #39aa24);filter:drop-shadow(0 0 5px #39aa24)}.musicPlayer{display:flex;padding:10px;width:100%}.musicPlayer .songImg{border-radius:10px;box-shadow:0,0,20px rgba(0,0,0,.5);height:80px;min-height:120px;overflow:hidden;width:120px}.musicPlayer .songImg img{height:100%;object-fit:cover;width:100%}.musicPlayer .songAttr{align-items:center;display:flex;flex-direction:column;justify-content:center;padding-left:20px;width:100%}.musicPlayer .songAttr .bottom,.musicPlayer .songAttr .top{align-items:center;display:flex;justify-content:space-between;width:100%}.musicPlayer .songAttr .top .left,.musicPlayer .songAttr .top .middle,.musicPlayer .songAttr .top .right{align-items:center;color:#595959;cursor:pointer;display:flex;font-size:16px}.musicPlayer .songAttr .top .left i,.musicPlayer .songAttr .top .middle i,.musicPlayer .songAttr .top .right i{font-size:18px;margin:0 15px}.musicPlayer .songAttr .top .left .loved i{color:#39aa24;-webkit-filter:drop-shadow(0 0 5px #39aa24);filter:drop-shadow(0 0 5px #39aa24)}.musicPlayer .songAttr .top .middle .back i:nth-child(2),.musicPlayer .songAttr .top .middle .forward i:first-child{color:#9a9a9a!important}.musicPlayer .songAttr .top .middle .playPause{color:#f1f1f1;-webkit-filter:drop-shadow(0 0 5px #f1f1f1);filter:drop-shadow(0 0 5px #f1f1f1)}.musicPlayer .songAttr .bottom{margin-top:20px;padding:0 15px}.musicPlayer .songAttr .bottom .progressBar{-webkit-appearance:none;appearance:none;background:hsla(0,0%,100%,.1);border:none;border-radius:10px;cursor:pointer;height:5px;outline:none;overflow:hidden;position:relative;width:80%}.musicPlayer .songAttr .bottom .progressBar:before{background:#848484;border-radius:10px;content:"";height:100%;left:0;position:absolute;top:0;transition:all .5s ease;width:var(--player-played);z-index:2}.musicPlayer .songAttr .bottom .progressBar::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border:none;border-radius:50%;cursor:pointer;height:20px;outline:none;width:20px}.musicPlayer .songAttr .bottom .progressBar::-moz-range-track{appearance:none;background:hsla(0,0%,100%,.1);border:none;border-radius:10px;cursor:pointer;height:5px;outline:none;position:relative;width:80%}.musicPlayer .songAttr .bottom .progressBar::-moz-range-progress{background:#848484;border-radius:10px;height:100%;-moz-transition:all .5s ease;transition:all .5s ease;width:var(--player-played);z-index:2}.musicPlayer .songAttr .bottom .progressBar::-moz-range-thumb{appearance:none;border:none;border-radius:50%;cursor:pointer;height:20px;outline:none;width:20px}.musicPlayer .songAttr .bottom .currentTime,.musicPlayer .songAttr .bottom .totalTime{color:#595959;font-size:14px;font-weight:700}@media screen and (max-width:550px){.mainContainer{min-width:380px}.content{padding:10px 15px}.banner .bannerContent .breadCrump P{font-size:12px}.banner .bannerContent .breadCrump i{font-size:14px}.banner .bannerContent .artist .left .name h2{font-size:25px}.banner .bannerContent .artist .right a{font-size:12px;margin:0 10px;padding:5px 15px}.mainContainer .menuList ul li{margin:0 5px}.mainContainer .menuList ul li a{font-size:14px}.mainContainer .menuList p{font-size:12px}.mainContainer .menuList p i{font-size:10px}.mainContainer .menuList p span{display:block;font-size:10px;margin-left:0;text-align:center}.mainContainer .menuList{padding:10px 15px}.audioList{padding:10px 5px}.audioList .songsContainer .songs .song .section{flex-direction:column}.audioList .songsContainer .songs .song .section .songName{width:100%}.audioList .songsContainer .songs .song .section .hits{justify-content:space-between;margin-left:0;margin-top:5px}}@media screen and (max-width:950px){.Banner{height:240px!important;position:relative}}.rightContainer{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:rgba(34,34,34,.6);border-left:1px solid hsla(0,0%,100%,.1);display:flex;flex-direction:column;height:100vh;justify-content:space-between;padding:30px 0;transition:all .3s cubic-bezier(.175,.885,.32,1.275);width:100px;z-index:1}.rightContainer .goPro,.rightContainer .profile{align-items:center;cursor:pointer;display:flex;flex-direction:column;justify-content:center}.rightContainer .goPro i,.rightContainer .profile i{color:#f1f1f1;font-size:20px;margin:20px 0;position:relative;text-align:center}.rightContainer .goPro i:hover .rightContainer .profile i:hover{-webkit-transform:scale(1.2);transform:scale(1.2);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.rightContainer .goPro i p{font-size:14px}.rightContainer .goPro i:nth-child(2):before{background:#45ab2e;border-radius:50%;content:"";height:8px;position:absolute;right:0;top:0;width:8px}.rightContainer .goPro i p span{color:#848484;margin-right:5px}.rightContainer .profile .profileImage{border-radius:100%;box-shadow:0 0 20px rgba(34,34,34,.6);height:40px;overflow:hidden;width:40px}.rightContainer .profile .profileImage img{height:100%;object-fit:cover;width:100%}@media screen and (max-width:550px){.rightContainer{min-width:64px;width:64px}}
/*# sourceMappingURL=main.210e5393.css.map*/