@import url(https://fonts.googleapis.com/css?family=Muli:400,400i,500,700,800&display=swap);a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}.App{font-family:Muli,sans-serif}.soundroom{display:flex;align-items:center;justify-content:center;flex-direction:column;background:-webkit-gradient(linear,left top,left bottom,from(#1d8dd5),to(#907f75));background:linear-gradient(#1d8dd5,#907f75);height:100vh;color:#fff;text-align:center;font-size:15px}.soundroom h2{font-size:28px;font-weight:700;position:absolute;top:5vh}.nav-bar{display:flex;flex-flow:row nowrap;justify-content:space-between;align-items:center;font-size:12px;width:90%;margin-bottom:10px}button{background-color:transparent;border:none}.nav-bar>button{width:120px;color:#fff}.nav-bar>.left{text-align:left}.nav-bar>.right{text-align:right}.nav-bar>.current-page{font-size:16px;font-weight:500;text-align:center;width:150px}.song{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid}.song img{width:25px;-webkit-transition:all .2s;transition:all .2s}.song img:hover{-webkit-transform:scale(1.05);transform:scale(1.05);cursor:pointer}.spotify-player{position:absolute;bottom:0;justify-content:space-between;text-align:center;width:100%;padding:10px;box-shadow:0 0 10px rgba(0,0,0,.247);-webkit-animation:pause-slide-up 2s;animation:pause-slide-up 2s}.song-info,.spotify-player{display:flex;align-items:center;flex-flow:row nowrap}.song-info>img{width:60px;box-shadow:0 5px 20px rgba(0,0,0,.35)}.song-title-artist{display:flex;align-items:flex-start;flex-direction:column;margin-left:10px;text-align:left}.song-title-artist h4{font-size:16px;font-weight:700;margin-bottom:3px}.song-info p{font-size:12px;line-height:1.3}.player-controls{display:flex;align-items:center;justify-content:center;flex-direction:row nowrap}.player-controls .next,.player-controls .previous{width:25px}.player-controls .pause,.player-controls .play{width:50px}.player-controls .btn{-webkit-transition:all .3s;transition:all .3s}.player-controls .btn:hover{-webkit-transform:scale(1.05);transform:scale(1.05);cursor:pointer}.playlist{display:flex;flex-flow:column nowrap;height:65vh;margin:0 10px;width:90vw;overflow:scroll;border:1px solid}.playlist .song img{width:25px;-webkit-transition:all .2s;transition:all .2s;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.playlist .empty-msg{align-self:center;margin-top:30px}.playlist-builder{display:flex;flex-flow:column nowrap;height:65vh;margin:0 10px;width:90vw}.search-bar{display:flex;padding:10px;border:2px solid;margin-bottom:10px}.search-bar input:first-of-type{align-self:auto;background-color:transparent;color:#fff;border:none;border-bottom:2px solid;margin-right:5px;width:100%;font-size:20px}::-webkit-input-placeholder{color:#fff;opacity:.6}::-moz-placeholder{color:#fff;opacity:.6}:-ms-input-placeholder{color:#fff;opacity:.6}::-ms-input-placeholder{color:#fff;opacity:.6}::placeholder{color:#fff;opacity:.6}#search-type,.search-bar input:nth-of-type(2){background:-webkit-gradient(linear,left top,left bottom,from(#6dbaeb),to(#1d8dd5));background:linear-gradient(#6dbaeb,#1d8dd5);color:#fff;margin-left:5px;border:1px solid #fff;border-radius:5px;padding:0 7px;font-size:12px;text-shadow:0 0 3px rgba(0,0,0,.2)}.search-results{width:100%}.search-results,.soundroom-requests{display:flex;flex-flow:column nowrap;overflow:scroll}.soundroom-requests{height:65vh;margin:0 10px;width:90vw;border:1px solid}.soundroom-request-nav{display:flex;border-bottom:1px solid #fff}.soundroom-request-nav>*{flex:1 1;padding:8px 0}.soundroom-request-nav>.active{background-color:#fff;color:#1d8dd5}.soundroom-request-nav>p:first-child{border-right:1px solid #fff}.request-link{display:flex;flex-direction:column;align-items:center;padding:30px 20px}.request-link>img{width:160px;border:2px solid #000;margin-bottom:20px}.request-link>a{width:100%;word-wrap:break-word}.hide-page{display:none}@media only screen and (min-width:900px){.soundroom{flex-direction:row;justify-content:space-around}.soundroom>*{width:25%}.hide-page{display:inline;display:initial}.nav-bar{display:none}.spotify-player{left:0;width:25%;min-width:300px}}.request-page{display:flex;align-items:center;justify-content:center;flex-direction:column;background:-webkit-gradient(linear,left top,left bottom,from(#1d8dd5),to(#907f75));background:linear-gradient(#1d8dd5,#907f75);height:100vh;color:#fff;text-align:center;font-size:15px}.request-page>h3{position:relative;bottom:30px;font-size:20px;margin:0 20px}.request-page>.search-container{display:flex;flex-flow:column nowrap;height:65vh;margin:0 10px;width:90vw}@-webkit-keyframes banner{0%{top:-20px}to{top:0}}@keyframes banner{0%{top:-20px}to{top:0}}@-webkit-keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@-webkit-keyframes expand{0%{-webkit-transform:scaleX(0);transform:scaleX(0)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes expand{0%{-webkit-transform:scaleX(0);transform:scaleX(0)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@-webkit-keyframes pause-slide-up{0%{bottom:-80px}50%{bottom:-80px}to{bottom:0}}@keyframes pause-slide-up{0%{bottom:-80px}50%{bottom:-80px}to{bottom:0}}.landing-page{display:flex;align-items:center;flex-direction:column;background:url(https://images.unsplash.com/photo-1535083252457-6080fe29be45?auto=format&fit=crop&ixid=eyJhcHBfaWQiOjEyMDd9&ixlib=rb-1.2.1&q=60&w=800) fixed;background-size:auto;background-repeat:no-repeat;height:100vh;color:#fff}.landing-page>.logo{margin-top:20vh}.landing-page>.logo>h1{font-size:50px;font-weight:800;color:#fff}.landing-page>.logo img{width:40px;margin:0 -5px -1px}.landing-page a{color:#fff}#sign-in-btn{display:flex;align-items:center;padding:10px 15px;margin:30px 0;cursor:pointer;border:1px solid;border-radius:10px;-webkit-transition:all .3s;transition:all .3s}#sign-in-btn>img{margin-left:5px;width:80px}#sign-in-btn:hover{background-color:hsla(0,0%,100%,.05)}@media only screen and (min-width:640px){.landing-page{background-size:130%;background-repeat:no-repeat}.logo>h1{font-size:65px}.logo img{width:50px;margin:0 -7px -1px}}@media only screen and (min-width:900px){.landing-page{background-size:120%;background-position:0 -130px;background-repeat:no-repeat}.logo>h1{font-size:65px}.logo img{width:50px;margin:0 -7px -1px}}@media only screen and (min-width:1140px){.landing-page{background-size:cover;background-position:0 -150px;background-repeat:no-repeat}.logo>h1{font-size:65px}.logo img{width:50px;margin:0 -7px -1px}}.user-page{display:flex;align-items:center;justify-content:center;flex-direction:column;background:-webkit-gradient(linear,left top,left bottom,from(#1d8dd5),to(#907f75));background:linear-gradient(#1d8dd5,#907f75);height:100vh;color:#fff;text-align:center;font-size:15px}.user-page a{color:#fff}#need-premium{position:absolute;top:0;width:100%;padding:7px 0;font-size:12px;background-color:#d83232;-webkit-animation:banner .6s;animation:banner .6s;box-shadow:0 0 10px rgba(0,0,0,.1)}.user-identity{display:flex;align-items:center;margin-bottom:10vh;-webkit-animation:fade-in 2s;animation:fade-in 2s}.user-page h3{font-weight:600;font-size:30px}.user-page img{width:40px;border-radius:50%;margin-right:10px}.user-page button{background-color:transparent;width:20%;min-width:200px;padding:10px 20px;cursor:pointer;border:1px solid;border-radius:10px;-webkit-transition:all .3s;transition:all .3s;color:#fff;font-size:15px;-webkit-animation:fade-in 2s;animation:fade-in 2s;margin:8px 0}.user-page button:hover{background-color:hsla(0,0%,100%,.05)}.user-page button:focus{outline:none}.user-page label{font-size:20px;-webkit-animation:fade-in 2s;animation:fade-in 2s}.user-page input{margin-bottom:10vh;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:70vw;margin-top:10px;font-size:24px;background-color:transparent;color:#fff;border:none;border-bottom:1px solid;-webkit-transition:all 1s;transition:all 1s;-webkit-animation:expand 1.3s;animation:expand 1.3s}.user-page input:focus{outline:none;box-shadow:transparent}.user-page p{text-decoration:underline;font-size:12px}@media only screen and (min-width:420px){.user-page label{font-size:26px}.user-page input{font-size:30px}}@media only screen and (min-width:900px){.user-page input{max-width:620px}}@media only screen and (min-width:1140px){.user-page h3{font-weight:600;font-size:34px}.user-page img{width:50px}.user-page button{font-size:18px}.user-page label{font-size:30px}.user-page input{font-size:34px}}
/*# sourceMappingURL=main.133ce540.chunk.css.map */