.main{width:100%;overflow-y:scroll}.main .mainContent{color:#fff;padding:1.5rem 2rem 10rem;margin-top:56px}.main .mainContent h1{letter-spacing:0;font-size:1.65rem;font-weight:900}@media (max-width:650px){.main .mainContent{padding:1rem 2rem 10rem .5rem}}.navBar{width:260px;height:100%;padding:10px;background:#040404;display:flex;flex-direction:column}.navBar .logo{padding:.9rem 1rem}.navBar .logo svg{transform:scaleX(-1);max-width:130px}.navBar .logo svg path{fill:#fff}.navBar ul{margin-top:5px}.navBar ul li{color:#b3b3b3;list-style-type:none;font-size:.9rem;border-radius:5px;padding:.5rem;cursor:pointer;transition:color .3s ease-in-out;display:flex;flex-direction:row;align-items:center}.navBar ul li svg{margin-right:15px}.navBar ul li.active{background:#282828;color:#fff}.navBar ul li.active svg{fill:#fff}.navBar ul li:hover{color:#fff}.navBar .cookies{font-size:.6rem;font-family:circular;color:#b3b3b3;text-align:center;margin-top:auto;margin-bottom:100px}.navBar .cookies .cookie{margin:0 auto;width:40px;border-bottom:1px solid transparent;padding-bottom:.1px;display:flex;flex-direction:row;align-items:center;justify-content:center;transition:all}.navBar .cookies .cookie:hover{border-bottom:1px solid #b3b3b3}.navBar .cookies span{line-height:0;padding:10px;font-size:12px}.navBar .cookies hr{width:15px;margin:8px auto}.homeNav{background:rgba(9,9,9,.78);height:60px;width:calc(100% - 200px);padding:.5rem 5rem .5rem 2rem;align-items:center;position:fixed;top:0;z-index:2}.homeNav,.homeNav .nav-buttons{display:flex;justify-content:space-between}.homeNav .nav-buttons{flex-direction:row;width:82px}.homeNav .nav-buttons button{border:0;width:34px;height:34px;border-radius:50%;background:#040404;cursor:pointer}.homeNav .nav-buttons button svg{width:22px;height:22px}.homeNav .nav-buttons button svg path{fill:#9c9c9c}.homeNav .nav-auth{display:flex;flex-direction:row;justify-content:space-between;width:230px}.homeNav .nav-auth button.btn-signup{border:0;background:transparent;color:#fff;font-family:circularbold;font-size:13px;letter-spacing:2px;cursor:pointer}.homeNav .nav-auth button.btn-login{border:0;background:#fff;color:0;border-radius:40px;padding:.75rem 2.4rem;font-family:circularbold;font-size:12px;letter-spacing:2px;cursor:pointer}.card{background:#282828;border-radius:8px;width:165px;height:240px;overflow:hidden;padding:1.25rem 1.25rem .8rem;cursor:pointer;display:flex;flex-direction:column;position:relative}.card:hover .playIcon{opacity:1}.card .cardImage{display:inline-block;height:130px;margin-bottom:15px}.card .cardImage img{width:100%;height:100%;object-fit:cover}.card .cardContent{display:inline-block}.card .cardContent span{font-family:circularbold;font-size:15px}.card .cardContent p{margin-top:10px;font-family:circular;font-size:12px;color:#b3b3b3;line-height:18px}.card .playIcon{width:40px;height:40px;border-radius:50%;overflow:hidden;background:#1db954;display:flex;position:absolute;bottom:1.25rem;right:1.25rem;margin-left:auto;opacity:0;cursor:auto}.card .playIcon svg{margin:auto}.cardMobile{background:transparent;width:140px;height:240px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;position:relative}.cardMobile:hover .playIcon{opacity:1}.cardMobile .cardImage{display:inline-block;height:120px;margin-bottom:15px}.cardMobile .cardImage img{width:100%;height:100%;object-fit:cover}.cardMobile .cardContent{display:inline-block}.cardMobile .cardContent span{font-family:circularbold;font-size:15px}.cardMobile .cardContent p{margin-top:10px;font-family:circular;font-size:12px;color:#b3b3b3;line-height:18px}.cardMobile .playIcon{width:40px;height:40px;border-radius:50%;overflow:hidden;background:#1db954;display:flex;position:absolute;bottom:1.25rem;right:1.25rem;margin-left:auto;opacity:0;cursor:auto}.cardMobile .playIcon svg{margin:auto}.slick-list>.slick-track{margin:0}.category{width:100%;justify-content:left;display:flex;flex-direction:column}.category+.category{margin-top:36px}.category .action-buttons{width:100%;display:flex;justify-content:space-between;margin-bottom:10px}.category .action-buttons button{font-family:circularbold;font-size:12px;letter-spacing:2px;background:transparent;border:0;cursor:pointer;color:#fff}.category .action-buttons button:hover{text-decoration:underline}.category .action-buttons button span{color:#b3b3b3}.category .headerSection{display:flex;flex-direction:column;margin-bottom:20px}.category .headerSection .subText{font-size:.9rem;font-family:circular;letter-spacing:0;color:#b3b3b3}.searchNav{background:rgba(9,9,9,.78);height:60px;width:calc(100% - 200px);padding:.5rem 5rem .5rem 2rem;display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;z-index:2}.searchNav .left-box{display:flex;flex-direction:row}.searchNav .left-box .nav-buttons{display:flex;flex-direction:row;width:82px;margin:auto 0;justify-content:space-between}.searchNav .left-box .nav-buttons button{border:0;width:34px;height:34px;border-radius:50%;background:#040404;cursor:pointer}.searchNav .left-box .nav-buttons button svg{width:22px;height:22px}.searchNav .left-box .nav-buttons button svg path{fill:#9c9c9c}.searchNav .left-box .search-box{margin-left:20px;background:#fff;width:360px;height:40px;padding:0 1rem;align-items:center;border-radius:40px;display:flex;flex-direction:row}.searchNav .left-box .search-box svg{width:26px;height:26px}.searchNav .left-box .search-box svg path{fill:#000}.searchNav .left-box .search-box form{margin-left:10px;width:100%}.searchNav .left-box .search-box form input{border:0;width:100%;font-family:circular}.searchNav .nav-auth{display:flex;flex-direction:row;justify-content:space-between;width:230px}.searchNav .nav-auth button.btn-signup{border:0;background:transparent;color:#fff;font-family:circularbold;font-size:13px;letter-spacing:2px;cursor:pointer}.searchNav .nav-auth button.btn-login{border:0;background:#fff;color:0;border-radius:40px;padding:.75rem 2.4rem;font-family:circularbold;font-size:12px;letter-spacing:2px;cursor:pointer}.search{width:100%;display:flex;flex-direction:column;overflow-y:scroll}.search .mainContent{color:#fff;padding:1.5rem 2rem;margin-top:56px}.search .mainContent h1{letter-spacing:0;font-size:1.65rem;font-weight:900}@media (max-width:650px){.main .mainContent{padding:1.5rem 2rem 10rem .5rem}}.playlist{width:100%;overflow-y:scroll;background-color:#d6d6d6}.playlist,.playlist .mainContent{display:flex;flex-direction:column}.playlist .mainContent{height:100%;background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),color-stop(50%,#121212));color:#fff}.playlist .mainContent h1{letter-spacing:0;font-size:1.65rem;font-weight:900}.playlist .mainContent .boxInfo{padding:56px 2rem 20px;background:hsla(0,0%,39.2%,.1);margin-top:30px;width:100%;text-align:left;display:flex;flex-direction:row}.playlist .mainContent .boxInfo .boxInfoImage{width:230px;height:230px}.playlist .mainContent .boxInfo .boxInfoImage img{height:100%;width:100%;object-fit:cover}.playlist .mainContent .boxInfo .boxInfoDetails{padding:2rem 1.5rem 0}.playlist .mainContent .boxInfo .boxInfoDetails>*{margin-top:20px}.playlist .mainContent .boxInfo .boxInfoDetails:last-child .boxInfoOthersDetails{margin-top:5px}.playlist .mainContent .boxInfo .boxInfoDetails h1{font-size:78px}.playlist .mainContent .boxInfo .boxInfoDetails p,.playlist .mainContent .boxInfo .boxInfoDetails span{font-family:circular}.playlist .mainContent .boxInfo .boxInfoDetails p{font-size:14px}.playlist .mainContent .boxActions{padding:0 2rem;margin:2.2rem 0;width:100%;display:flex;flex-direction:row;align-items:flex-start;position:relative}.playlist .mainContent .boxActions button:first-child{margin-right:20px;background:#1db954;position:absolute;transition:all .1s ease-in-out}.playlist .mainContent .boxActions button:nth-child(2){margin-left:70px}.playlist .mainContent .boxActions button:first-child:hover{width:58px;height:58px}.playlist .mainContent .boxActions button{border:0;width:56px;height:56px;border-radius:50%;background:transparent;cursor:pointer}.playlist .mainContent .boxActions button svg{margin:auto;width:28px;height:28px;fill:hsla(0,0%,100%,.7)}.playlist .mainContent .boxActions button:hover svg{fill:#fff}.playlist .mainContent .boxSongs{background:#121212;padding:0 2rem 10rem;width:100%}@media (max-width:650px){.playlist .mainContent .boxSongs{padding:0}}.playlist .mainContent .boxSongs ul.songList{list-style-type:none}.playlist .mainContent .boxSongs ul.songList li{width:100%;padding:.8rem;display:flex;align-items:center;transition:background .2s ease-in-out}.playlist .mainContent .boxSongs ul.songList li:hover{background:hsla(0,0%,100%,.1)}.playlist .mainContent .boxSongs ul.songList li:hover .songIcon .noteI{display:none}.playlist .mainContent .boxSongs ul.songList li:hover .songIcon .playI{display:block}.playlist .mainContent .boxSongs ul.songList li .songDetails h3{margin:0;font-weight:300;font-size:1rem}.playlist .mainContent .boxSongs ul.songList li .songDetails span{font-family:circular;color:hsla(0,0%,100%,.7);font-size:.9rem}.playlist .mainContent .boxSongs ul.songList li .songTime{font-family:circular;margin-left:auto}.playlist .mainContent .boxSongs ul.songList li .songIcon{padding-right:1rem}.playlist .mainContent .boxSongs ul.songList li .songIcon .noteI{display:block}.playlist .mainContent .boxSongs ul.songList li .songIcon .playI{display:none}.playlist .mainContent .boxSongs ul.songList li .songIcon svg{fill:hsla(0,0%,100%,.7);width:18px;height:18px}@media (max-width:650px){.playlist .mainContent .boxSongs ul.songList li{background:#282828;margin:10px auto;width:95%;border-radius:8px}}.musicControls{background:#282828;text-align:center;height:90px;color:#fff;width:100%;display:flex;align-items:center;justify-content:center;z-index:2;position:fixed;bottom:0;left:0}@font-face{font-family:circular;src:url(/Spotifly/static/media/CircularStd-Book.9e311611.ttf)}@font-face{font-family:circularbold;src:url(/Spotifly/static/media/CircularStd-Bold.145ae1e7.ttf)}*{margin:0;padding:0;outline:0;box-sizing:border-box}#root,body,html{height:100%}html{-webkit-font-smoothing:antialiased!important}body,button,input{font-family:circularbold}a{color:inherit;text-decoration:none}.App{height:100%;background:red;background:#131313;display:flex;flex-direction:row}.outerWrap{background:grey;height:100vh;min-height:100%}@media (max-width:650px){.main .mainContent{padding:1.5rem 2rem 10rem 1rem}}
/*# sourceMappingURL=main.d7b7f372.chunk.css.map */