*,*:before,*:after{padding:0;margin:0;box-sizing:border-box;font-size:62.5%}@media screen and (min-width: 3000px){*,*:before,*:after{font-size:130%}}@media screen and (max-width: 1600px){*,*:before,*:after{font-size:90%}}@media screen and (max-width: 1200px){*,*:before,*:after{font-size:72%}}@media screen and (max-width: 992px){*,*:before,*:after{font-size:70%}}@media screen and (max-width: 768px){*,*:before,*:after{font-size:66%}}@media screen and (max-width: 600px){*,*:before,*:after{font-size:62.5%}}@media screen and (max-width: 400px){*,*:before,*:after{font-size:45%}}*{scroll-behavior:smooth;font-family:var(--font-1)}:root{--color-1: rgb(0,0,0);--color-1-rgb: 0, 0, 0;--color-2: rgb(24,125,62);--color-2-rgb: 24,125,62;--color-3: rgb(0,215,96);--color-3-rgb: 0,215,96;--color-4: rgb(255,255,255);--color-4-rgb: 255,255,255;--color-bg0: rgb(0,0,0);--color-bg0-rgb: 0, 0, 0;--color-bg1: rgb(18,18,18);--color-bg1-rgb: 26,26,26;--color-bg2: rgb(30,30,30);--color-bg2-rgb: 30,30,30;--color-bg3: rgb(65,65,65);--color-bg3-rgb: 65,65,65;--color-bg4: rgb(101,99,94);--color-bg4-rgb: 101,99,94;--font-1: "Poppins", sans-serif;--font-2: "Inter", sans-serif}::-webkit-scrollbar{-webkit-appearance:none;width:8px;border-top-right-radius:.5rem;border-bottom-right-radius:.5rem;background:var(--color-bg1)}::-webkit-scrollbar-thumb{border-radius:4px;background:var(--color-bg3)}#body{background-color:var(--color-bg1);overscroll-behavior-y:none}#root{background-color:var(--color-bg0);font:var(--font-1);width:100%;height:100vh;max-height:100vh;overflow:hidden;position:relative}.App{width:100%;height:100vh;max-height:100vh}.main-content{position:relative}.palyCircle-fill{fill:var(--color-3)}.playTriangle-fill{fill:rgba(var(--color-4-rgb),.9);display:none}.queue-currentContent:hover .playTriangle-fill{display:block}.navBack-fill{fill:rgba(var(--color-4-rgb),.9)}.navBack-disable{fill:rgba(var(--color-4-rgb),.3)}.navNext-fill{fill:rgba(var(--color-4-rgb),.9)}.navNext-disable{fill:rgba(var(--color-4-rgb),.3)}.search-fill{fill:rgba(var(--color-4-rgb),.9)}.playList-item:hover .playTriangle-fill,.albums-item:hover .playTriangle-fill,.artists-item:hover .playTriangle-fill{display:block}.time-fill{fill:rgba(var(--color-4-rgb),.9)}.list-fill,.info-fill,.home-fill{fill:rgba(var(--color-4-rgb),.5)}.footer-col2 span:hover{transform:scale(1.1)}.footer-col2 span:hover svg{fill:rgba(var(--color-4-rgb),1)}.options-fill,.backAndNext-fill{fill:rgba(var(--color-4-rgb),.9)}.search-playlist-backbtn:hover,.search-playlist-nextbtn:hover{background-color:rgba(var(--color-4-rgb),.8)}.search-playlist-backbtn:hover svg,.search-playlist-nextbtn:hover svg{fill:rgba(var(--color-bg1-rgb),.9)}.search-albums-backbtn:hover,.search-albums-nextbtn:hover{background-color:rgba(var(--color-4-rgb),.8)}.search-albums-backbtn:hover svg,.search-albums-nextbtn:hover svg{fill:rgba(var(--color-bg1-rgb),.9)}.search-artists-backbtn:hover,.search-artists-nextbtn:hover{background-color:rgba(var(--color-4-rgb),.8)}.search-artists-backbtn:hover svg,.search-artists-nextbtn:hover svg{fill:rgba(var(--color-bg1-rgb),.9)}.homePage-content,.playListPage-content{height:calc(100vh - 9.5rem);max-height:calc(100vh - 9.5rem);margin:1rem 1rem 0rem;position:relative;display:flex;flex-direction:column;overflow-y:scroll;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;background-color:var(--color-bg1)}.login-content{height:calc(100vh - 3.5rem);max-height:calc(100vh - 3.5rem);margin:1rem;position:relative;display:flex;flex-direction:column;border-radius:.5rem;background-color:var(--color-bg2);padding:4rem}.login-logo div{display:flex;flex-direction:row;align-items:center;justify-content:center}.login-logo div span{font-family:var(--font-2);font-size:10rem;font-weight:800;letter-spacing:.5rem;color:var(--color-4);text-align:center;text-shadow:-3px -3px 2px #94e76f,3px 3px 2px #22ae6d;transform-origin:bottom}.login-logo h2{font-family:var(--font-1);font-size:1.8rem;color:rgba(var(--color-4-rgb),.9);text-align:center;margin:1rem 0}.login-logo div span:nth-child(1){animation:animate 3s ease infinite}.login-logo div span:nth-child(2){animation:animate 3s ease .3s infinite}.login-logo div span:nth-child(3){animation:animate 3s ease .6s infinite}.login-logo div span:nth-child(4){animation:animate 3s ease .9s infinite}.login-logo div span:nth-child(5){animation:animate 3s ease 1.2s infinite}@keyframes animate{0%,to{transform:scale(1)}50%{transform:scaleY(1.12)}}.login-form{width:50%;display:flex;flex-direction:column;align-items:flex-start;align-self:center;padding:2rem}.login-form label{font-family:var(--font-1);font-size:1.5rem;color:rgba(var(--color-4-rgb),.9);margin:1rem 0 0 .5rem}.login-form input{all:unset;height:3rem;width:100%;font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1.2rem;font-weight:500;padding:0 1rem 0 .5rem;background-color:var(--color-bg0);border-radius:.5rem;margin:1rem 0 0}.login-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;width:50%;align-self:center}.login-actions button{all:unset;width:60%;height:2.6rem;font-family:var(--font-1);color:rgba(var(--color-4-rgb),.9);font-size:1.2rem;font-weight:500;background-color:rgba(var(--color-3-rgb),.9);margin-top:1rem;text-align:center;border-radius:1.5rem}.search-content{margin-top:4rem;background-color:var(--color-bg1);padding:0 1rem 1rem}.search-title{font-size:3rem;color:rgba(var(--color-4-rgb),.9);width:100%;padding:1rem}.search-classes{display:flex;flex-direction:column}.search-classes h1{font-family:var(--font-1);color:var(--color-4);font-size:2.8rem;padding:1rem}.search-classes h2{font-size:1.8rem;font-weight:600;color:rgba(var(--color-4-rgb),.7);padding:1rem}.search-tracksbtn{all:unset;width:8rem;padding:.5rem 2rem;background-color:rgba(var(--color-4-rgb),.8);color:rgba(var(--color-1-rgb),.9);font-size:1.2rem;font-weight:800;font-family:var(--font-1);border-radius:3rem;align-self:center;text-align:center}.search-playlistContent{display:flex;flex-direction:row;align-items:center;width:100%;overflow-x:scroll;gap:1rem;position:relative}.search-playlistContent::-webkit-scrollbar,.search-playlistContent::-webkit-scrollbar-thumb{background-color:transparent;height:0}.search-playlist-backbtn,.search-playlist-nextbtn{display:flex;justify-content:center;align-items:center;position:sticky;padding:1rem;border-radius:50%;background-color:var(--color-bg0);top:calc(50% - 2rem);opacity:0;transition:opacity .3s ease-in;cursor:pointer}@media (pointer: none),(pointer: coarse){.search-playlist-backbtn,.search-playlist-nextbtn{display:none}}.search-playlist-backbtn{left:.5rem}.search-playlist-nextbtn{right:.5rem}.search-playlistContent:hover .search-playlist-backbtn,.search-playlistContent:hover .search-playlist-nextbtn{opacity:.7}.search-playlistCard{width:18rem;height:18rem;padding:1rem;background-color:var(--color-bg0);border-radius:1rem;cursor:pointer}.search-playlistCard div{width:16rem;height:14rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}.search-playlistCard div img{height:100%;width:100%;object-fit:cover;object-position:center center}.search-playlistCard h3{font-size:1.2rem;font-weight:600;color:rgba(var(--color-4-rgb),.7);padding:.5rem 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-tracksContent{display:flex;flex-direction:row;align-items:center;justify-content:space-between;max-width:100%;height:5.5rem;margin:.5rem 0 .5rem 1rem;border-radius:.5rem}.search-tracksContent .search-tracksData{display:flex;flex-direction:row;align-items:center;width:50%}.search-tracksContent .search-itemBtn{display:flex;justify-content:center;align-items:center;padding-right:1.5rem}.search-tracksContent .search-itemBtn svg{margin-left:1rem}.search-tracksContent .search-itemBtn span{height:2rem;width:2rem;margin-left:1rem;font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1.2rem;font-weight:500;text-align:center}.search-tracksContent .search-tracksImage{display:flex;align-items:center;justify-content:center;width:4.5rem;height:4.5rem;border-radius:.5rem;overflow:hidden}.search-tracksContent .search-tracksImage img{height:100%}.search-tracksContent .search-tracksText{width:55%;display:flex;flex-direction:column;justify-content:center;margin:0 1rem}.search-tracksContent .search-tracksText h3{font-family:var(--font-1);color:var(--color-4);font-size:1.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-tracksContent .search-tracksText span{font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1rem;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-tracksContent .search-tracksAlbun{width:30%}.search-tracksContent .search-tracksAlbun,.search-tracksContent .search-tracksTime{display:flex;align-items:center;justify-self:end;padding:0 1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-tracksContent .search-tracksAlbun span,.search-tracksContent .search-tracksTime span{font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1.5rem;font-weight:500}.search-tracksContent .search-tracksOptions{display:flex;align-items:center;justify-self:end;display:none}.search-tracksContent p{font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-tracksContent:hover{background-color:var(--color-bg3)}.search-tracksContent:hover .queue-itemBtn span{display:none}.search-albumsContent{display:flex;flex-direction:row;align-items:center;width:100%;overflow-x:scroll;gap:1rem;position:relative}.search-albumsContent::-webkit-scrollbar,.search-albumsContent::-webkit-scrollbar-thumb{background-color:transparent;height:0}.search-albums-backbtn,.search-albums-nextbtn{display:flex;justify-content:center;align-items:center;position:sticky;padding:1rem;border-radius:50%;background-color:var(--color-bg0);top:calc(50% - 2rem);opacity:0;transition:opacity .3s ease-in;cursor:pointer}@media (pointer: none),(pointer: coarse){.search-albums-backbtn,.search-albums-nextbtn{display:none}}.search-albums-backbtn{left:.5rem}.search-albums-nextbtn{right:.5rem}.search-albumsContent:hover .search-albums-backbtn,.search-albumsContent:hover .search-albums-nextbtn{opacity:.7}.search-albumsCard{width:18rem;min-width:18rem;height:8rem;padding:1rem;background-color:var(--color-bg0);border-radius:1rem;display:flex;flex-direction:row;align-items:center;gap:1rem;overflow:hidden;cursor:pointer}.search-albumImage{width:6rem;height:6rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}.search-albumImage img{height:100%;width:100%;object-fit:cover;object-position:center center}.search-albumData{height:100%;width:9rem;display:flex;flex-direction:column;justify-content:space-around;align-items:flex-start;overflow:hidden}.search-albumData h3{width:100%;font-family:var(--font-1);color:var(--color-4);font-size:1.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-albumData span{width:100%;font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1rem;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-artistsContent{display:flex;flex-direction:row;align-items:center;width:100%;overflow-x:scroll;gap:1rem;position:relative}.search-artistsContent::-webkit-scrollbar,.search-artistsContent::-webkit-scrollbar-thumb{background-color:transparent;height:0}.search-artists-backbtn,.search-artists-nextbtn{display:flex;justify-content:center;align-items:center;position:sticky;padding:1rem;border-radius:50%;background-color:var(--color-bg0);top:calc(50% - 2rem);opacity:0;transition:opacity .3s ease-in;cursor:pointer}@media (pointer: none),(pointer: coarse){.search-artists-backbtn,.search-artists-nextbtn{display:none}}.search-artists-backbtn{left:.5rem}.search-artists-nextbtn{right:.5rem}.search-artistsContent:hover .search-artists-backbtn,.search-artistsContent:hover .search-artists-nextbtn{opacity:.7}.search-artistsCard{width:18rem;min-width:18rem;height:6rem;padding:1rem;background-color:var(--color-bg0);border-radius:1rem;display:flex;flex-direction:row;align-items:center;gap:1rem;overflow:hidden;cursor:pointer}.search-artistsImage{width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}.search-artistsImage img{height:100%;width:100%;object-fit:cover;object-position:center center;border-radius:100%}.search-artistsData{height:100%;width:11rem;display:flex;flex-direction:column;justify-content:space-around;align-items:flex-start;overflow:hidden}.search-artistsData h3{width:100%;font-family:var(--font-1);color:var(--color-4);font-size:1.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (max-width: 600px){.search-tracksContent{display:flex;flex-direction:row;align-items:center;justify-content:space-between;max-width:100%;height:5.5rem;margin:.5rem 0 .5rem 1rem;border-radius:.5rem;padding-left:1rem}.search-tracksContent .search-tracksData{width:70%}.search-tracksContent .search-itemBtn,.search-tracksContent .search-tracksAlbun,.search-tracksContent .search-tracksTime{display:none}.search-tracksContent .search-tracksOptions{display:flex}}.userQueue-content,.albumsPage-content,.artistsPage-content{height:calc(100vh - 9.5rem);max-height:calc(100vh - 9.5rem);margin:1rem 1rem 0rem;position:relative;display:flex;flex-direction:column;overflow-y:scroll;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;background-color:var(--color-bg1)}.footer-content{position:fixed;bottom:0;left:0;width:100%;height:7rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;background-color:var(--color-bg0)}.footer-col1{display:flex;flex-direction:column;justify-content:space-between;width:50%;padding:0 0 0 1.1rem}.footer-currentData{display:flex;flex-direction:row;max-width:100%}.footer-currentData .footer-contentImage{display:flex;align-items:center;justify-content:center;width:5rem;height:5rem;border-radius:.5rem;overflow:hidden}.footer-currentData .footer-contentImage img{height:100%}.footer-currentData div:last-child{width:70%;display:flex;flex-direction:column;justify-content:center;margin:0 1rem}.footer-currentData div:last-child h3{font-family:var(--font-1);color:var(--color-4);font-size:1.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.footer-currentData div:last-child span{font-family:var(--font-1);color:var(--color-4);font-size:1rem;font-weight:400}.footer-col2{display:flex;flex-direction:row;align-items:center;justify-content:space-around;height:100%;margin:0 1rem}.footer-col2 span{margin:0 1rem;border:none;display:flex;align-items:center;justify-content:center}@media screen and (max-width: 600px){.footer-col1{width:60%}.footer-col3{display:none}}.banner-content{width:calc(100% - 2rem);height:1.5rem;background-color:var(--color-bg1);display:flex;flex-direction:row;align-items:center;justify-content:center;border-bottom-left-radius:.5rem;border-bottom-right-radius:.5rem;margin:0 1rem}.banner-content .banner-text{font-size:1rem;font-family:var(--font-1);font-weight:500;color:var(--color-4)}.popular-content{background-color:var(--color-bg1);padding:1rem}.popular-title{font-size:3rem;color:rgba(var(--color-4-rgb),.9);width:100%;padding:1rem}.popular-itemsContent{display:grid;grid-template-columns:repeat(2,auto)}.popular-items{width:calc(100% - 1rem);display:flex;flex-direction:row;justify-content:space-between;border-radius:.5rem;background-color:var(--color-bg2);margin:.6rem 1rem}.popular-items .popular-itemImg{width:8rem;height:8rem;min-width:8rem;overflow:hidden;border-radius:.5rem}.popular-items .popular-itemImg img{height:100%}.popular-items .popular-itemTxt{padding-left:1.5rem}.popular-items .popular-itemTxt h2{font-size:1.6rem;color:rgba(var(--color-4-rgb),.9)}.popular-items .popular-itemBtn{padding-right:1.5rem}.popular-items .popular-itemBtn svg{margin-left:1rem}.popular-items div{display:flex;align-items:center;justify-content:center}.popular-items:hover{background-color:var(--color-bg3)}@media screen and (max-width: 992px){.popular-items{justify-content:left}.popular-items .popular-itemTxt{padding:0 1.5rem}.popular-items .popular-itemBtn{display:none}}.queue-content{background-color:var(--color-bg1);padding:1rem}.queue-title{font-size:3rem;color:rgba(var(--color-4-rgb),.9);width:100%;padding:1rem}.queue-current{display:flex;flex-direction:column}.queue-current h2{font-size:1.8rem;font-weight:600;color:rgba(var(--color-4-rgb),.7);padding:1rem}.queue-currentContent{display:flex;flex-direction:row;align-items:center;justify-content:space-between;max-width:100%;height:5.5rem;margin:.5rem 0 .5rem 1rem;border-radius:.5rem}.queue-currentContent .queue-currentData{display:flex;flex-direction:row;align-items:center;width:50%}.queue-currentContent .queue-itemBtn{display:flex;justify-content:center;align-items:center;padding-right:1.5rem}.queue-currentContent .queue-itemBtn svg{margin-left:1rem}.queue-currentContent .queue-itemBtn span{height:2rem;width:2rem;margin-left:1rem;font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1.2rem;font-weight:500;text-align:center}.queue-currentContent .queue-currentImage{display:flex;align-items:center;justify-content:center;width:4.5rem;height:4.5rem;border-radius:.5rem;overflow:hidden}.queue-currentContent .queue-currentImage img{height:100%}.queue-currentContent .queue-currentText{width:55%;display:flex;flex-direction:column;justify-content:center;margin:0 1rem}.queue-currentContent .queue-currentText h3{font-family:var(--font-1);color:var(--color-4);font-size:1.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-currentContent .queue-currentText span{font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1rem;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-currentContent .queue-currentAlbun{width:30%}.queue-currentContent .queue-currentAlbun,.queue-currentContent .queue-currentTime{display:flex;align-items:center;justify-self:end;padding:0 1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-currentContent .queue-currentAlbun span,.queue-currentContent .queue-currentTime span{font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1.5rem;font-weight:500}.queue-currentContent .queue-currentOptions{display:flex;align-items:center;justify-self:end;display:none}.queue-currentContent p{font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-currentContent:hover{background-color:var(--color-bg3)}.queue-currentContent:hover .queue-itemBtn span{display:none}@media screen and (max-width: 600px){.queue-currentContent{display:flex;flex-direction:row;align-items:center;justify-content:space-between;max-width:100%;height:5.5rem;margin:.5rem 0 .5rem 1rem;border-radius:.5rem;padding-left:1rem}.queue-currentContent .queue-currentData{width:70%}.queue-currentContent .queue-itemBtn,.queue-currentContent .queue-currentAlbun,.queue-currentContent .queue-currentTime{display:none}.queue-currentContent .queue-currentOptions{display:flex}}.topBar-content{display:flex;flex-direction:column;position:relative;width:100%;height:5rem;background-color:var(--color-bg1);padding:1rem;position:sticky;top:0;opacity:.95;z-index:2}.topBar-controls{display:flex;flex-direction:row;align-items:center;width:100%;transition:all .4s ease-in}.topBar-navigation{display:flex;flex-direction:row;justify-content:left;align-items:center;gap:1.5rem;padding:0 1rem;width:20%;transition:all .4s ease-in}.topBar-navigation .topBar-back,.topBar-navigation .topBar-next{width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;border-radius:100%;background-color:var(--color-bg0)}.topBar-navigation .topBar-back svg{margin-right:3px}.topBar-navigation .topBar-next svg{margin-left:3px}.topBar-search{width:50%;height:3rem;display:flex;flex-direction:row;align-items:center;background-color:var(--color-bg0);margin:0 1rem;border-radius:1.5rem;transition:all .4s ease-in}.topBar-search svg{margin:0 1rem}.topBar-search input{all:unset;width:calc(100% - 3.8rem);font-family:var(--font-1);color:rgba(var(--color-4-rgb),.9);font-size:1.2rem;font-weight:500;padding:0 1rem 0 0}.topBar-exit{display:flex;position:absolute;right:0;padding:0 1rem;transition:all .4s ease-in}.topBar-exit div{width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;border-radius:100%;background-color:var(--color-bg0);cursor:pointer}.topBar-filters{width:100%;height:4rem;min-height:4rem;display:flex;flex-direction:row;align-items:center;justify-content:space-around;padding-bottom:.5rem;position:absolute;top:5rem;left:0;overflow:hidden;background-color:var(--color-bg1);transition:opacity .4s ease-in}.topBar-filters button{all:unset;padding:.5rem 1.5rem;background-color:var(--color-bg0);color:rgba(var(--color-4-rgb),.9);font-size:1.2rem;font-weight:500;font-family:var(--font-1);border-radius:1.5rem;box-shadow:0 .5px 1px 1px rgba(var(--color-0-rgb),.8),0 .5px 1px 1px rgba(var(--color-0-rgb),.8);cursor:pointer}@media screen and (max-width: 600px){.topBar-navigation{width:30%;justify-content:flex-start}.topBar-search{width:70%;margin-right:0}}.playList-content{background-color:var(--color-bg1);padding:1rem;position:relative}.playList-titleContent{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:2rem 0}.playList-titleContent .playList-titleImg{width:20vh;height:20vh;border-radius:.5rem;overflow:hidden}.playList-titleContent .playList-titleImg img{height:100%;width:100%;object-fit:cover;object-position:center center}.playList-title{width:100%;height:6rem;padding:1rem 1rem 1rem 2rem;position:sticky;top:0;background-color:var(--color-bg1);opacity:.95;overflow:hidden}.playList-title h1{font-family:var(--font-1);color:var(--color-4);font-size:2.8rem}.playList-data{width:calc(100% - 2rem);margin:1rem 1rem 1rem 2rem}.playList-data span{font-family:var(--font-1);color:rgba(var(--color-4-rgb),.8);font-size:1.8rem}.playList-header{width:calc(100% - 1rem);position:sticky;top:5.9rem;background-color:var(--color-bg2);display:flex;flex-direction:row;justify-content:space-between;border-radius:5px;margin-left:1rem}.playList-header div{display:flex;flex-direction:row;align-items:center}.playList-header div span{display:flex;flex-direction:row;align-items:center;font-family:var(--font-1);color:rgba(var(--color-4-rgb),.8);font-size:1.3rem}.playList-header .playList-head-title{width:50%}.playList-header .playList-head-title>:first-child{margin-left:1.5rem;text-align:center;padding-right:1.5rem}.playList-header .playList-head-title>:last-child{width:auto}.playList-header .playList-head-albun{width:30%;padding:0 1rem}.playList-header .playList-head-time{padding:0 1rem}.playList-header .playList-head-time span{margin:.8rem}.playList-item{display:flex;flex-direction:row;align-items:center;justify-content:space-between;max-width:100%;height:5.5rem;margin:.5rem 0 .5rem 1rem;border-radius:.5rem}.playList-item .playList-itemData{display:flex;flex-direction:row;align-items:center;width:50%}.playList-item .playList-itemBtn{display:flex;justify-content:center;align-items:center;padding-right:1.5rem}.playList-item .playList-itemBtn svg{margin-left:1rem}.playList-item .playList-itemBtn span{height:2rem;width:2rem;margin-left:1rem;font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1.2rem;font-weight:500;text-align:center}.playList-item .playList-itemImage{display:flex;align-items:center;justify-content:center;width:4.5rem;height:4.5rem;border-radius:.5rem;overflow:hidden}.playList-item .playList-itemImage img{height:100%}.playList-item .playList-itemText{width:55%;display:flex;flex-direction:column;justify-content:center;margin:0 1rem}.playList-item .playList-itemText h3{font-family:var(--font-1);color:var(--color-4);font-size:1.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playList-item .playList-itemText span{font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1rem;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playList-item .playList-itemAlbun{width:30%}.playList-item .playList-itemAlbun,.playList-item .playList-itemTime{display:flex;align-items:center;justify-self:end;padding:0 1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playList-item .playList-itemAlbun span,.playList-item .playList-itemTime span{font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1.5rem;font-weight:500}.playList-item .playList-itemOptions{display:flex;align-items:center;justify-self:end;display:none}.playList-item:hover{background-color:var(--color-bg3)}.playList-item:hover .playList-itemBtn span{display:none}@media screen and (max-width: 600px){.playList-title{padding:1rem}.playList-data{margin:1rem 1rem 2rem}.playList-header{display:none}.playList-item .playList-itemData{width:70%}.playList-item .playList-itemBtn,.playList-item .playList-itemAlbun,.playList-item .playList-itemTime{display:none}.playList-item .playList-itemOptions{display:flex}.playList-item:hover{background-color:var(--color-bg1)}}.albums-content{background-color:var(--color-bg1);padding:1rem;position:relative}.albums-titleContent{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:2rem 0}.albums-titleContent .albums-titleImg{width:20vh;height:20vh;border-radius:.5rem;overflow:hidden}.albums-titleContent .albums-titleImg img{height:100%;width:100%;object-fit:cover;object-position:center center}.albums-title{width:100%;height:6rem;padding:1rem 1rem 1rem 2rem;position:sticky;top:0;background-color:var(--color-bg1);opacity:.95;overflow:hidden}.albums-title h1{font-family:var(--font-1);color:var(--color-4);font-size:2.8rem}.albums-data{width:calc(100% - 2rem);margin:1rem 1rem 1rem 2rem}.albums-data span{font-family:var(--font-1);color:rgba(var(--color-4-rgb),.8);font-size:1.8rem}.albums-header{width:calc(100% - 1rem);position:sticky;top:5.9rem;background-color:var(--color-bg2);display:flex;flex-direction:row;justify-content:space-between;border-radius:5px;margin-left:1rem}.albums-header div{display:flex;flex-direction:row;align-items:center}.albums-header div span{display:flex;flex-direction:row;align-items:center;font-family:var(--font-1);color:rgba(var(--color-4-rgb),.8);font-size:1.3rem}.albums-header .albums-head-title{width:50%}.albums-header .albums-head-title>:first-child{margin-left:1.5rem;text-align:center;padding-right:1.5rem}.albums-header .albums-head-title>:last-child{width:auto}.albums-header .albums-head-time{padding:0 1rem}.albums-header .albums-head-time span{margin:.8rem}.albums-item{display:flex;flex-direction:row;align-items:center;justify-content:space-between;max-width:100%;height:5.5rem;margin:.5rem 0 .5rem 1rem;border-radius:.5rem}.albums-item .albums-itemData{display:flex;flex-direction:row;align-items:center;width:80%}.albums-item .albums-itemBtn{display:flex;justify-content:center;align-items:center;padding-right:1.5rem}.albums-item .albums-itemBtn svg{margin-left:1rem}.albums-item .albums-itemBtn span{height:2rem;width:2rem;margin-left:1rem;font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1.2rem;font-weight:500;text-align:center}.albums-item .albums-itemText{width:75%;display:flex;flex-direction:column;justify-content:center;margin:0 1rem}.albums-item .albums-itemText h3{font-family:var(--font-1);color:var(--color-4);font-size:1.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.albums-item .albums-itemText span{font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1rem;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.albums-item .albums-itemTime{display:flex;align-items:center;justify-self:end;padding:0 1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.albums-item .albums-itemTime span{font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1.5rem;font-weight:500}.albums-item .albums-itemOptions{display:flex;align-items:center;justify-self:end;display:none}.albums-item:hover{background-color:var(--color-bg3)}.albums-item:hover .albums-itemBtn span{display:none}@media screen and (max-width: 600px){.albums-title{padding:1rem}.albums-data{margin:1rem 1rem 2rem}.albums-header{display:none}.albums-item .albums-itemData{width:70%}.albums-item .albums-itemBtn,.albums-item .albums-itemTime{display:none}.albums-item .albums-itemOptions{display:flex}.albums-item:hover{background-color:var(--color-bg1)}}.artists-content{background-color:var(--color-bg1);padding:1rem;position:relative}.artists-titleContent{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;margin:2rem 0}.artists-titleContent .artists-titleImg{width:20vh;height:20vh;border-radius:.5rem;overflow:hidden}.artists-titleContent .artists-titleImg img{height:100%;width:100%;object-fit:cover;object-position:center center}.artists-title{width:100%;height:6rem;padding:1rem 1rem 1rem 2rem;position:sticky;top:0;background-color:var(--color-bg1);opacity:.95;overflow:hidden}.artists-title h1{font-family:var(--font-1);color:var(--color-4);font-size:2.8rem}.artists-data{width:calc(100% - 2rem);margin:1rem 1rem 1rem 2rem}.artists-data span{font-family:var(--font-1);color:rgba(var(--color-4-rgb),.8);font-size:1.8rem}.artists-header{width:calc(100% - 1rem);position:sticky;top:5.9rem;background-color:var(--color-bg2);display:flex;flex-direction:row;justify-content:space-between;border-radius:5px;margin-left:1rem}.artists-header div{display:flex;flex-direction:row;align-items:center}.artists-header div span{display:flex;flex-direction:row;align-items:center;font-family:var(--font-1);color:rgba(var(--color-4-rgb),.8);font-size:1.3rem}.artists-header .artists-head-title{width:50%}.artists-header .artists-head-title>:first-child{margin-left:1.5rem;text-align:center;padding-right:1.5rem}.artists-header .artists-head-title>:last-child{width:auto}.artists-header .artists-head-time{padding:0 1rem}.artists-header .artists-head-time span{margin:.8rem}.artists-item{display:flex;flex-direction:row;align-items:center;justify-content:space-between;max-width:100%;height:5.5rem;margin:.5rem 0 .5rem 1rem;border-radius:.5rem}.artists-item .artists-itemData{display:flex;flex-direction:row;align-items:center;width:80%}.artists-item .artists-itemBtn{display:flex;justify-content:center;align-items:center;padding-right:1.5rem}.artists-item .artists-itemBtn svg{margin-left:1rem}.artists-item .artists-itemBtn span{height:2rem;width:2rem;margin-left:1rem;font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1.2rem;font-weight:500;text-align:center}.artists-item .artists-itemImage{display:flex;align-items:center;justify-content:center;width:4.5rem;height:4.5rem;border-radius:.5rem;overflow:hidden}.artists-item .artists-itemImage img{height:100%}.artists-item .artists-itemText{width:75%;display:flex;flex-direction:column;justify-content:center;margin:0 1rem}.artists-item .artists-itemText h3{font-family:var(--font-1);color:var(--color-4);font-size:1.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.artists-item .artists-itemText span{font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1rem;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.artists-item .artists-itemAlbun{width:30%}.artists-item .artists-itemTime{display:flex;align-items:center;justify-self:end;padding:0 1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.artists-item .artists-itemTime span{font-family:var(--font-1);color:rgba(var(--color-4-rgb),.7);font-size:1.5rem;font-weight:500}.artists-item .artists-itemOptions{display:flex;align-items:center;justify-self:end;display:none}.artists-item:hover{background-color:var(--color-bg3)}.artists-item:hover .artists-itemBtn span{display:none}@media screen and (max-width: 600px){.artists-title{padding:1rem}.artists-data{margin:1rem 1rem 2rem}.artists-header{display:none}.artists-item .artists-itemData{width:70%}.artists-item .artists-itemBtn,.artists-item .artists-itemTime{display:none}.artists-item .artists-itemOptions{display:flex}.artists-item:hover{background-color:var(--color-bg1)}}.modal-content{width:100%;height:100vh;background-color:rgba(var(--color-bg1-rgb),.6);position:fixed;display:flex;align-items:center;justify-content:center;top:0;right:0;z-index:3}.modal-card{width:30rem;background-color:rgba(var(--color-4-rgb),.9);opacity:1;border-radius:1rem}.modal-card h1{width:100%;padding:2rem 1rem 1rem;font-size:2.2rem;font-family:var(--font-1);text-align:center}.modal-card p{width:100%;padding:1rem;font-size:1.5rem;font-family:var(--font-1);text-align:center}.modal-card div{height:8rem;padding:2rem 1rem;display:flex;gap:2rem;align-items:center}.modal-card div button{all:unset;width:calc(50% - 5.5rem);padding:.8rem 2rem;font-size:1.5rem;font-weight:700;font-family:var(--font-1);text-align:center;border-radius:3rem}.modal-card div .modal-btn-cancel{color:rgba(var(--color-bg1-rgb),.8)}.modal-card div .modal-btn-acept{background-color:var(--color-3)}.modal-card div .modal-btn-cancel:hover{color:rgba(var(--color-bg1-rgb),1);font-size:1.6rem}.modal-card div .modal-btn-acept:hover{transform:scale(1.05)}.toast-content{width:100%;height:100vh;position:fixed;display:flex;justify-content:center;top:calc(100% - 12rem);right:0;z-index:3}.toast-content span{display:flex;align-items:center;justify-content:center;width:97%;height:4rem;background-color:rgba(var(--color-4-rgb),1);border-radius:.5rem;font-size:1.3rem;font-family:var(--font-1);text-align:center}