*,body,html{margin:0;padding:0;box-sizing:border-box;font-family:"Helvetica Neue","Helvetica","Arial",sans-serif}body,html{width:100vw;height:100vh}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fromBottom{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes fromRight{0%{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}.fade-in{animation:fadeIn .5s ease}.from-bottom{animation:fromBottom .5s ease}.from-right{animation:fromRight .5s ease}.App{box-sizing:border-box}.App,.welcome{width:100vw;height:100vh}.welcome{background:url(/static/media/bg.317f557d.jpg) 50%/cover no-repeat #2b2b2b;display:flex;align-items:center;justify-content:center}.login{min-width:29%;color:#fff}@media(max-width:575px)and (orientation:portrait){.login{width:100%;padding:1rem}}.login h2{margin-bottom:1.5rem;text-align:center;font-weight:400}.login form .error-message{font-size:15px;font-weight:700;color:#f35050;margin:20px auto}.login form label{display:block;font-size:13px;margin-bottom:.1rem}.login form input{display:block;border:none;border-bottom:1px solid #fff;background:transparent;outline:none;margin-bottom:1.5rem;width:100%;color:#fff;padding:.3rem 1.3rem .3rem 0}.login form button[type=button]{position:absolute;top:48%;right:36%;cursor:pointer;background:none;border:none;color:#fff;outline:none}@media(max-width:575px)and (orientation:portrait){.login form button[type=button]{right:7%}}.login form button[type=submit]{width:100%;height:2.5rem;color:#fff;background:transparent;border:1px solid #fff;border-radius:50px;font-weight:bolder;margin-bottom:1.5rem;outline:none}.login form button[type=submit]:hover{cursor:pointer}.login .passwd-reset{color:#03af4e}.login p{font-size:13px;text-align:center}.login p:hover{cursor:pointer}.register{min-width:29%;color:#fff}@media(max-width:575px)and (orientation:portrait){.register{width:100%;padding:1rem}}.register h2{margin-bottom:1.5rem;text-align:center;font-weight:400}.register form label{display:block;font-size:13px;margin-bottom:.1rem}.register form .success-message{margin:20px auto;color:#46bd46}.register form .error-message{font-size:15px;font-weight:500;margin:20px auto;color:#8d0808}.register form input{display:block;border:none;border-bottom:1px solid #fff;outline:none;padding:.3rem 0}.register form button,.register form input{background:transparent;margin-bottom:1.5rem;width:100%;color:#fff}.register form button{height:2.5rem;border:1px solid #fff;border-radius:50px;font-weight:bolder}.register form button:hover{cursor:pointer}.register p{font-size:13px;text-align:center}.register p:hover{cursor:pointer}.music-home{height:100vh;width:100vw}.music-home .fixed-bar{display:none}@media(max-width:575px),(max-width:991px)and (orientation:portrait){.music-home .fixed-bar{display:block;height:7%;background-color:#282828}}@media(min-width:768px)and (max-width:991px)and (orientation:portrait){.music-home .fixed-bar{height:10%}}.music-home .fixed-bar section.mobile-nav{display:flex;height:100%;justify-content:center;align-items:center}.music-home .fixed-bar section.mobile-nav a{color:#fff;margin:0 1rem}@media(max-width:991px)and (orientation:portrait){.music-home .fixed-bar section.mobile-nav a{margin:0 2rem}}@media(max-width:575px)and (orientation:portrait){.music-home .fixed-bar section.mobile-nav a{margin:0 1rem}}.music-home .fixed-bar section.mobile-nav a svg{width:1.7rem;height:1.7rem}@media(max-width:991px)and (orientation:portrait){.music-home .fixed-bar section.mobile-nav a svg{width:2.5rem;height:2.5rem}}@media(max-width:575px)and (orientation:portrait){.music-home .fixed-bar section.mobile-nav a svg{width:1.7rem;height:1.7rem}}.lower-div{background-color:#282828;width:100%;height:14%}@media(max-width:991px)and (orientation:portrait){.lower-div{height:15%}}@media(max-width:575px)and (orientation:portrait){.lower-div{height:35%}}.lower-div .music-player{width:100%;height:100%;display:flex;align-items:center}@media(max-width:575px)and (orientation:portrait){.lower-div .music-player{flex-direction:column;align-items:center;justify-content:center}}.lower-div .music-player .left{width:22%;color:#fff;display:flex;cursor:pointer}@media(max-width:575px)and (orientation:portrait){.lower-div .music-player .left{width:50%;margin:.5rem 0}}.lower-div .music-player .left .album-art{width:5rem;height:5rem;padding:.5rem}.lower-div .music-player .left .album-art img{width:100%;height:100%;border:1px solid #fff}.lower-div .music-player .left .track-details{padding:.7rem 0}.lower-div .music-player .left .track-details span{display:block;margin-top:.7rem}.lower-div .music-player .left .track-details span.title{font-size:14px}.lower-div .music-player .left .track-details span.artist{font-size:12px;color:#a0a0a0}.lower-div .music-player .middle{width:56%;display:flex;flex-direction:column;justify-content:center;align-items:center}@media(max-width:575px)and (orientation:portrait){.lower-div .music-player .middle{width:100%}}.lower-div .music-player .middle section.controls{margin:.2rem 0}.lower-div .music-player .middle section.controls div{display:flex;align-items:center}.lower-div .music-player .middle section.controls div button{background:transparent;border:none;margin:0 .4rem;width:1.3rem;height:1.3rem;cursor:pointer}.lower-div .music-player .middle section.controls div button.pause,.lower-div .music-player .middle section.controls div button.play{width:2rem;height:2rem}.lower-div .music-player .middle section.controls div button img{width:100%;height:100%}.lower-div .music-player .middle section.controls div button:active,.lower-div .music-player .middle section.controls div button:focus{outline:none}.lower-div .music-player .middle section.progress{width:100%;display:flex;align-items:center;justify-content:center;margin:.2rem 0}.lower-div .music-player .middle section.progress span{color:#fff;font-size:11px}.lower-div .music-player .middle section.progress span.current-time{margin-right:.5rem}.lower-div .music-player .middle section.progress span.remaining-time{margin-left:.5rem}.lower-div .music-player .middle section.progress .progress-bar-container{background-color:#404040;border:1px solid #282828;border-radius:3px;width:60%;height:.35rem;cursor:pointer}@media(max-width:991px)and (orientation:portrait){.lower-div .music-player .middle section.progress .progress-bar-container{width:65%}}@media(max-width:575px)and (orientation:portrait){.lower-div .music-player .middle section.progress .progress-bar-container{width:80%}}.lower-div .music-player .middle section.progress .progress-bar-container .progress-bar{width:0;height:.2rem;border-radius:3px;background-color:#a0a0a0}.lower-div .music-player .right{width:22%;height:100%}@media(max-width:575px)and (orientation:portrait){.lower-div .music-player .right{width:50%;margin:1rem 0}}.lower-div .music-player .right section{height:100%;display:flex;align-items:center;justify-content:flex-end}.lower-div .music-player .right section button{background:transparent;border:none;width:1.3rem;height:1.3rem;margin-right:.5rem;outline:none;cursor:pointer}.lower-div .music-player .right section button img{width:100%;height:100%}.lower-div .music-player .right section .volume-bar-container{background-color:#404040;border:1px solid #282828;border-radius:3px;margin-right:1rem;width:8rem;height:.35rem;cursor:pointer}@media(max-width:575px)and (orientation:portrait){.lower-div .music-player .right section .volume-bar-container{width:11rem;margin-right:0}}.lower-div .music-player .right section .volume-bar-container .volume-bar{height:.2rem;border-radius:3px;background-color:#a0a0a0}.upper-div{height:86%;width:100%;display:flex}@media(max-width:991px)and (orientation:portrait){.upper-div{height:75%}}@media(max-width:575px)and (orientation:portrait){.upper-div{height:58%}}.upper-div .nav-section{width:13%;background:#000;padding:.5rem 1.5rem}@media(max-width:575px),(max-width:991px)and (orientation:portrait){.upper-div .nav-section{display:none}}.upper-div .nav-section .navigation a{display:block;color:#a0a0a0;text-decoration:none;margin:1.5rem 0;font-size:14px;font-weight:700;transition:color .7s}.upper-div .nav-section .navigation a.search{border-top:1px solid #a0a0a0;border-bottom:1px solid #a0a0a0;padding:.7rem 0;display:flex;align-items:center;justify-content:space-between}.upper-div .nav-section .navigation a.search img{display:inline-block;width:1.5rem}.upper-div .nav-section .navigation a:hover{color:#fff}.upper-div .nav-section .navigation a:active,.upper-div .nav-section .navigation a:focus{outline:none}.upper-div .content-section{background-color:#181818;width:87%;padding:1rem;overflow:hidden;overflow-y:scroll}.upper-div .content-section::-webkit-scrollbar{width:5px}.upper-div .content-section::-webkit-scrollbar-track{box-shadow:inset 0 0 5px grey;border-radius:3px}.upper-div .content-section::-webkit-scrollbar-thumb{background:#606770;border-radius:3px}@media(max-width:575px)and (orientation:portrait),(max-width:991px){.upper-div .content-section{width:100%}}@media(max-width:575px)and (orientation:portrait){.upper-div .content-section{padding:.5rem}}.upper-div .content-section *{box-sizing:border-box}.albums-heading{font-size:2rem;color:#fff;text-align:center;padding:1rem}@media(max-width:575px),(max-width:991px)and (orientation:portrait){.albums-heading{margin-top:1.5rem}}@media(max-width:575px)and (orientation:portrait){.albums-heading{padding-bottom:0}}.albums{display:grid;grid-template-columns:repeat(5,1fr);margin:auto}@media(max-width:991px)and (orientation:portrait){.albums{grid-template-columns:repeat(3,1fr)}}@media(max-width:575px)and (orientation:portrait){.albums{display:block;width:70%}}.loading-indicator-container{display:flex;justify-content:center;align-items:center;height:69vh;width:100%}div.album-container{margin:1.5rem .5rem;cursor:pointer}@media(max-width:575px)and (orientation:portrait){div.album-container{margin:2rem auto}}div.album-container div.album-pic{max-width:12.5rem;height:12.5rem;margin:auto}@media(max-width:575px)and (orientation:portrait){div.album-container div.album-pic{max-width:15rem;height:15rem}}div.album-container div.album-pic img.playlist-img{width:100%;height:100%}div.album-container div.album-name{font-size:14px;color:#fff;text-align:center}.search-box{background-color:#242424;padding:1.5rem}.search-box input,.search-box span{display:block;color:#fff}.search-box input{background-color:transparent;border:none;outline:none;font-size:4rem;font-weight:700;height:5rem;width:100%}@media(max-width:575px)and (orientation:portrait){.search-box input{font-size:2.9rem}}.search-results{color:#fff;margin-top:1rem}.search-results .result-section{border-bottom:1px groove #fff;padding:2rem}.search-results .result-section .heading{text-align:center;text-transform:uppercase;font-size:1.5rem;margin-bottom:1rem}.search-results .result-section .nothing-found{font-size:14px}.settings{padding:2rem}.settings .name{text-align:center;color:#fff;font-size:2rem;font-weight:700;margin:1.8rem 0}.settings button{display:block;margin:1.8rem auto;background-color:#181818;color:#fff;height:3rem;letter-spacing:2px;padding:1rem 1.5rem;border:2px solid #fff;border-radius:2rem;cursor:pointer;transition:background-color .7s}.settings button:hover{background-color:#000}.settings button:active,.settings button:focus{outline:none}.update-details-container{padding:.5rem 1rem}@media(max-width:575px)and (orientation:portrait){.update-details-container{padding:0 0 1rem}}form.update-details{border-bottom:1px solid #fff;margin-bottom:3rem}form.update-details h1{color:#fff;font-size:1.5rem;text-align:center;text-transform:uppercase;margin:1rem 0}form.update-details button{display:block;margin:1rem auto;background-color:#181818;color:#fff;text-transform:uppercase;height:3rem;width:9rem;letter-spacing:2px;padding:1rem;border:2px solid #fff;border-radius:2rem;cursor:pointer;transition:background-color .7s}form.update-details button:hover{background-color:#000}form.update-details button:active,form.update-details button:focus{outline:none}input.update-input{display:block;margin:1rem auto;height:3rem;width:100%;font-size:1.2rem;background:#1f1f1f;border:none;color:#fff;padding:0 1.2rem;outline:none}.playlists-heading{margin:1rem 0}.playlists-heading .playlist-heading{text-align:center;color:#fff;font-size:1.5rem}.playlists-heading .new-playlist-button{display:block;margin:1rem auto;background-color:#329e53;color:#fff;letter-spacing:2px;padding:1rem;width:10rem;border:none;border-radius:2rem;cursor:pointer;outline:none;transition:background-color .7s}.playlists-heading .new-playlist-button:hover{background-color:#2ebd59}.playlists{width:100%}.playlist{display:inline-block;width:17.5%;margin:1rem .8rem}@media(max-width:991px)and (orientation:portrait){.playlist{width:31%;margin:.8rem .5rem}}@media(max-width:575px)and (orientation:portrait){.playlist{width:45%;margin:.8rem .5rem}}.playlist .playlist-icon{border:3px solid #282828;padding:.8rem}.playlist .playlist-icon .playlist-img{width:100%}.playlist .playlist-name{color:#fff;text-align:center}.songs-container{width:100%;padding:1rem .5rem}@media(max-width:575px)and (orientation:portrait){.songs-container{padding:.5rem .2rem}}.songs-container section.song-details-section{display:flex;flex-direction:row;width:100%;margin:1rem auto}.songs-container section.song-details-section div.albumArt-section{width:29%;max-width:200px;margin-right:2rem}@media(max-width:575px)and (orientation:portrait){.songs-container section.song-details-section div.albumArt-section{width:40%}}.songs-container section.song-details-section div.albumArt-section img{width:100%;border-radius:5px}.songs-container section.song-details-section div.details-section{width:75%}.songs-container section.song-details-section div.details-section h1{color:#fff;margin:.7rem 0}.songs-container section.song-details-section div.details-section p{color:#939393;font-size:14px;margin:.7rem 0}.songs-container .loading-indicator-container{display:flex;justify-content:center;align-items:center;height:60vh;width:100%}.songs-container .songs-section{padding:0 .5rem}.single-song{display:flex;justify-content:space-between;color:#fff;width:100%;padding:1.3rem .5rem}.single-song:hover{background-color:#282828}.single-song:hover .left-section .number{display:none}.single-song:hover .left-section .play-button{display:inherit}.single-song:hover .options-section{visibility:visible}.single-song .left-section{width:1.5rem;height:1.5rem;cursor:pointer}.single-song .left-section .number{font-size:14px}.single-song .left-section .play-button{display:none}.single-song .left-section .play-button img{width:100%;height:100%}.single-song .middle-section{width:75%}@media(max-width:575px)and (orientation:portrait){.single-song .middle-section{width:65%}}.single-song .middle-section .title{font-size:14px;margin-bottom:.3rem}.single-song .middle-section .artist{font-size:14px;color:#939393;margin-top:.3rem 0}.single-song .options-section{width:1.3rem;cursor:pointer;visibility:hidden}.single-song .options-section img{width:100%}.single-song .right-section span{font-size:14px;color:#939393}.reset-pw{height:100vh;width:100vw;background:url(/static/media/bg.317f557d.jpg) 50%/cover no-repeat #000;display:flex;align-items:center;justify-content:center}.enter-email{min-width:29%;color:#fff}@media(max-width:575px)and (orientation:portrait){.enter-email{width:100%;padding:1rem}}.enter-email h2{margin-bottom:1.5rem;text-align:center;font-weight:400}.enter-email .error-message{color:#8a0000;margin-bottom:.5rem}.enter-email form label{display:block;font-size:13px;margin-bottom:.1rem}.enter-email form input{display:block;border:none;border-bottom:1px solid #fff;padding:.3rem 0}.enter-email form button,.enter-email form input{background:transparent;outline:none;margin-bottom:1.5rem;width:100%;color:#fff}.enter-email form button{height:2.5rem;border:1px solid #fff;border-radius:50px;font-weight:bolder}.enter-email form button:hover{cursor:pointer}.enter-email p{font-size:13px;text-align:center}.enter-email p:hover{cursor:pointer}.enter-password{min-width:29%;color:#fff}@media(max-width:575px)and (orientation:portrait){.enter-password{width:100%;padding:1rem}}.enter-password h2{margin-bottom:1.5rem;text-align:center;font-weight:400}.enter-password form label{display:block;font-size:13px;margin-bottom:.1rem}.enter-password form input{display:block;border:none;border-bottom:1px solid #fff;padding:.3rem 0}.enter-password form button,.enter-password form input{background:transparent;outline:none;margin-bottom:1.5rem;width:100%;color:#fff}.enter-password form button{height:2.5rem;border:1px solid #fff;border-radius:50px;font-weight:bolder}.enter-password form button:hover{cursor:pointer}.enter-password p{font-size:13px;text-align:center}.enter-password p:hover{cursor:pointer}::placeholder{color:#a0a0a0}.experiments{width:100%;height:100vh;background-color:#add8e6;padding:2rem 0}.experiments .exp-heading{text-align:center}.experiments .tog-button{display:block;width:9rem;height:3rem;margin:1rem auto;cursor:pointer;border:none;border-radius:2rem;background-color:#428d8d;color:#fff;outline:none;transition:background-color .7s}.experiments .tog-button:hover{background-color:#008b8b}.experiments .tog-box{width:15rem;height:15rem;border:1px solid #4682b4;margin:6rem auto;text-align:center}
/*# sourceMappingURL=main.c2d11fa8.chunk.css.map */