@font-face{font-family:"Montserrat";src:url(/static/media/Montserrat-Regular.3cd78665.ttf);font-weight:400;font-style:normal}@font-face{font-family:"Montserrat";src:url(/static/media/Montserrat-Bold.079ca05d.ttf);font-weight:700;font-style:normal}body{margin:0;font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;line-height:1.4;font-size:1rem}b,h1,h2,h3,strong{font-weight:700;text-transform:uppercase}*{box-sizing:border-box}.App{text-align:center;background-color:#282c34}.App-logo{height:40vmin;pointer-events:none}.App-header{background-color:#282c34;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;padding:4rem;overflow-y:hidden;max-width:1280px;margin-left:auto;margin-right:auto}@media screen and (max-width:1023px){.App-header{padding:2rem}}.App-link{color:#61dafb}.loader-wrapper{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.6);z-index:999}.loader-wrapper .loader-text{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:33;max-width:9.375rem}.loader-wrapper .loader{position:absolute;width:180px;height:180px;border-radius:50%;background:linear-gradient(#f07e6e,#84cdfa,#5ad1cd);-webkit-animation:animate 1.2s linear infinite;animation:animate 1.2s linear infinite;left:calc(50% - 90px);top:calc(50% - 90px)}@-webkit-keyframes animate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes animate{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.loader-wrapper .loader span{position:absolute;width:100%;height:100%;border-radius:50%;background:linear-gradient(#f07e6e,#84cdfa,#5ad1cd);top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.loader-wrapper .loader span:first-child{-webkit-filter:blur(5px);filter:blur(5px)}.loader-wrapper .loader span:nth-child(2){-webkit-filter:blur(10px);filter:blur(10px)}.loader-wrapper .loader span:nth-child(3){-webkit-filter:blur(25px);filter:blur(25px)}.loader-wrapper .loader span:nth-child(4){-webkit-filter:blur(50px);filter:blur(50px)}.loader-wrapper .loader :after{content:"";position:absolute;top:10px;left:10px;right:10px;bottom:10px;background:#f1f1f1;border:10px solid #fff;border-radius:50%}.btn{font-size:14px;line-height:1;border-radius:500px;padding:16px 24px 18px;transition-property:background-color,border-color,color,box-shadow,-webkit-filter;transition-property:background-color,border-color,color,box-shadow,filter;transition-property:background-color,border-color,color,box-shadow,filter,-webkit-filter;transition-duration:.3s;border-width:0;letter-spacing:2px;min-width:160px;text-transform:uppercase;white-space:normal;display:inline-block;margin-bottom:0;font-weight:700;text-align:center;vertical-align:middle;touch-action:manipulation;cursor:pointer;background-image:none;border:1px solid transparent;text-decoration:none}.btn--loginApp-link{color:#fff;background-color:#1db954;min-width:250px}.btn--loginApp-link:hover{background-color:#1ed760}.welcome{max-width:650px;margin-left:auto;margin-right:auto}.user-playing__wrapper{height:25vh;padding:2rem 0}@media screen and (min-width:1024px){.user-playing__wrapper{padding:2rem 4rem;display:flex}}.now-playing__wrapper{width:50%;padding-right:2rem;display:none}@media screen and (min-width:1024px){.now-playing__wrapper{display:flex}}.now-playing__side{align-self:top;text-align:center;width:100%}@media screen and (min-width:1024px){.now-playing__side{text-align:left;width:50%}}.now-playing__playing{font-size:1.25rem;margin-top:0}.now-playing__name{font-size:1.125rem;font-weight:700}.now-playing__artist,.now-playing__status{margin-bottom:1em}.now-playing__status ul{padding-left:0;margin-top:0;list-style:none}.now-playing__status li{padding-bottom:1rem}.now-playing__img{padding-right:2rem;width:50%}@media screen and (max-width:1023px){.now-playing__img{display:none}}.now-playing__img img{width:100%;max-height:100%;object-fit:contain;object-position:left}.user__wrapper{display:flex}@media screen and (min-width:1024px){.user__wrapper{width:50%;padding-left:2rem}}@media screen and (max-width:1023px){.now-playing__artist,.now-playing__name{display:none}}.playlists{padding:2rem 0;border-bottom:1px solid #0f1726}.playlists__wrapper{height:calc(75vh - 4rem);overflow-y:scroll;-webkit-overflow-scrolling:touch;text-align:left;-ms-overflow-style:none;scrollbar-width:none}@media screen and (min-width:1024px){.playlists__wrapper{padding:2rem 4rem}}.playlists__items{display:flex;flex-wrap:wrap}.playlists__wrapper::-webkit-scrollbar{display:none}.playlists__wrapper .playlists__item{display:flex;padding-left:0;padding-right:0;width:100%}@media screen and (min-width:1024px){.playlists__wrapper .playlists__item{padding-right:2rem;width:50%}.playlists__wrapper .playlists__item:nth-child(2n){padding-left:2rem;padding-right:0}}.playlists__wrapper .playlists__item:not(:last-child){padding-bottom:2rem}.playlists__wrapper .playlists__item .playlists__item-img,.playlists__wrapper .playlists__item .playlists__item-info{width:50%}.playlists__wrapper .playlists__item .playlists__item-img a{display:block;padding-bottom:100%;background-size:cover;background-position:50%}.playlists__wrapper .playlists__item .playlists__item-img img{width:100%;height:240px;object-fit:cover}.playlists__wrapper .playlists__item .playlists__item-info{padding-left:1rem}.playlists__wrapper .playlists__item .playlists__item-info h3{margin-top:0;word-break:break-word}.playlists__wrapper .playlists__item .playlists__item-info p{word-break:break-word}.playlists__wrapper .playlists__item .playlists__item-info p a,.playlists__wrapper .playlists__item .playlists__item-info p a:visited{color:#fff}.playlists__actions{padding-bottom:2rem;display:flex;justify-content:space-between}@media screen and (max-width:767px){.playlists__actions{flex-wrap:wrap}.playlists__actions .btn{margin-bottom:2rem}}.popup{position:fixed;top:0;left:0;right:0;bottom:0;max-height:100vh;overflow-y:scroll;-webkit-overflow-scrolling:touch;text-align:left;-ms-overflow-style:none;scrollbar-width:none;padding:4rem;background-color:#282c34}@media screen and (max-width:767px){.popup{padding:4rem 2rem}}.popup .close-popup{position:fixed;top:2rem;right:4rem;cursor:pointer}@media screen and (min-width:768px){.popup .popup-playlists-wrapper{display:grid;grid-template-columns:repeat(2,1fr);grid-column-gap:2rem}}.popup .popup-playlist-item{max-height:6.25rem;display:flex;margin-bottom:2rem;background-color:initial;transition:.4s;cursor:pointer}.popup .popup-playlist-item.active,.popup .popup-playlist-item:hover{background-color:#191f2b}.popup .popup-playlist-item .image{background-size:cover;background-position:50%;width:6.25rem;height:6.25rem;flex-shrink:0}.popup .popup-playlist-item .name{padding-left:2rem;align-self:center;font-weight:700}.popup .popup-actions{margin-bottom:2rem}@media screen and (min-width:1024px){.popup .popup-actions{display:flex;justify-content:space-between}}@media screen and (max-width:1023px){.popup .popup-actions .btn{display:block;margin-bottom:1rem}}