body{margin:0;font-family:spotify-circular,Roboto,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--spotify_green:#1db954;--spotify_black:#191414;--spotify_white:#fff;--spotify_light_gray:#222327;--spotify_dark_gray:#181818;--spotify_gray:#282828;--spotify_medium_gray:#404040;--spotify_text_gray:#939393;--error_red:rgba(182,7,7,0.788);--glue-font-weight-normal:400;--glue-font-weight-bold:700;--glue-font-weight-black:900;background-color:var(--spotify_black)}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@font-face{font-family:spotify-circular;src:url(https://open.scdn.co/cdn/fonts/CircularSpUIv3T-Light.afd9ab26.woff2) format("woff2"),url(https://open.scdn.co/cdn/fonts/CircularSpUIv3T-Light.2a78c017.woff) format("woff"),url(https://open.scdn.co/cdn/fonts/CircularSpUIv3T-Light.89e4be2e.ttf) format("truetype");font-weight:200;font-style:normal;font-display:swap}@font-face{font-family:spotify-circular;src:url(https://open.scdn.co/cdn/fonts/CircularSpUIv3T-Book.3466e0ec.woff2) format("woff2"),url(https://open.scdn.co/cdn/fonts/CircularSpUIv3T-Book.ea8d19db.woff) format("woff"),url(https://open.scdn.co/cdn/fonts/CircularSpUIv3T-Book.a357677a.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:spotify-circular;src:url(https://open.scdn.co/cdn/fonts/CircularSpUIv3T-Bold.8d0a45cc.woff2) format("woff2"),url(https://open.scdn.co/cdn/fonts/CircularSpUIv3T-Bold.10e93738.woff) format("woff"),url(https://open.scdn.co/cdn/fonts/CircularSpUIv3T-Bold.7eb7d0f7.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:spotify-circular;src:url(https://open.scdn.co/cdn/fonts/CircularSpUIv3T-Black.c21e63c5.woff2) format("woff2"),url(https://open.scdn.co/cdn/fonts/CircularSpUIv3T-Black.effa986f.woff) format("woff"),url(https://open.scdn.co/cdn/fonts/CircularSpUIv3T-Black.ce8ef887.ttf) format("truetype");font-weight:900;font-style:normal;font-display:swap}.header{width:100vw;position:fixed;top:0;left:0;display:flex;justify-content:flex-start}.header-name{position:absolute;left:2rem}.header-name:hover{cursor:pointer}.header-code{text-align:center;flex:1 1}.header-code,.header-person-icon{color:var(--spotify_white);font-weight:300}.header-person-icon{display:flex;font-size:1.75rem;position:absolute;right:2rem;top:.85rem;justify-content:center;align-items:center;line-height:2rem}.header-person-icon svg{margin:0 0 0 .5rem;fill:var(--spotify_white);height:1.75rem;padding:0;position:relative;top:-1px}@media screen and (max-width:860px){.header-code{max-width:50vw;margin:.5rem auto;align-self:center;font-size:1rem}}.button{border-radius:10rem;padding:.6rem;letter-spacing:2px;font-size:.9rem;text-transform:uppercase;font-weight:600;-webkit-transition:all .175s ease;transition:all .175s ease;outline:none;box-sizing:border-box;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;display:flex;align-items:center}.button,.button div{text-align:center;justify-content:center}.button div{align-self:center;line-height:1.1rem;margin:auto;align-content:center}.button:hover{-webkit-backface-visibility:hidden;backface-visibility:hidden;cursor:pointer;-webkit-transform:scale(1.05);transform:scale(1.05);-webkit-filter:brightness(110%);filter:brightness(110%)}.button-green{background:var(--spotify_green);color:var(--spotify_white);border:1px solid var(--spotify_green)}.button-white{background:var(--spotify_white);border:1px solid var(--spotify_white)}.button-transparent{background-color:var(--spotify_black);color:var(--spotify_white);border:1px solid #888}.button-transparent:hover{border:1px solid var(--spotify_white)}.lds-ellipsis{display:inline-block;position:relative;width:24px;height:12px}.lds-ellipsis div{position:absolute;top:4.95px;width:3.9px;height:3.9px;border-radius:50%;background:#fff;-webkit-animation-timing-function:cubic-bezier(0,1,1,0);animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:first-child{left:2.4px;-webkit-animation:lds-ellipsis1 .6s infinite;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:2.4px}.lds-ellipsis div:nth-child(2),.lds-ellipsis div:nth-child(3){-webkit-animation:lds-ellipsis2 .6s infinite;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:9.6px}.lds-ellipsis div:nth-child(4){left:16.8px;-webkit-animation:lds-ellipsis3 .6s infinite;animation:lds-ellipsis3 .6s infinite}@-webkit-keyframes lds-ellipsis1{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes lds-ellipsis1{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes lds-ellipsis3{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(0);transform:scale(0)}}@keyframes lds-ellipsis3{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(0);transform:scale(0)}}@-webkit-keyframes lds-ellipsis2{0%{-webkit-transform:translate(0);transform:translate(0)}to{-webkit-transform:translate(7.2px);transform:translate(7.2px)}}@keyframes lds-ellipsis2{0%{-webkit-transform:translate(0);transform:translate(0)}to{-webkit-transform:translate(7.2px);transform:translate(7.2px)}}.start{justify-content:center;position:relative}.start,.start-buttons{display:flex;flex-direction:column}.start-buttons>:first-child{margin-bottom:3rem}.join-button{display:flex;position:relative;align-items:center}.join-button button{width:100%;z-index:2;position:absolute}.join-button.show button{width:19%;letter-spacing:0}.start-error{min-width:240px;position:absolute;align-self:center;text-align:center;bottom:0;-webkit-transform:translateY(200%);transform:translateY(200%);padding:1rem;color:var(--error_red);border-radius:3px;box-sizing:content-box}@media screen and (max-width:780px){.start-buttons{margin-bottom:4rem}.start-error{-webkit-transform:translateY(100%);transform:translateY(100%)}}@-webkit-keyframes rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotation{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.text-input{background:var(--spotify_gray);padding:.5rem 1rem .5rem 15%;border:none;outline:none;color:var(--spotify_white);border-radius:4px;position:absolute;z-index:1;left:10%;width:80%;box-sizing:border-box;opacity:0;-webkit-transition:.2s ease;transition:.2s ease}.text-input.visible{width:90%;opacity:1}.search-input{display:flex;align-items:center;width:100%;padding:0 .75rem;margin:.25rem 0;position:-webkit-sticky;position:sticky;top:4rem}.search-input input{width:100%;border-radius:5px;border:none;outline:none;color:var(--spotify_text_gray);padding:10px;-webkit-transition:.15s ease;transition:.15s ease;background-color:var(--spotify_gray);caret-color:var(--spotify_green)}.search-input input:focus{background-color:hsla(0,0%,78.4%,.2)}.search-input input:focus,.search-input input:focus+button{color:var(--spotify_white)}.search-input button{position:absolute;right:1.3rem;background-color:transparent;color:var(--spotify_text_gray);border:none;outline:none;padding:0;top:0;bottom:0;margin:auto 0}.search-input button:hover{cursor:pointer}@media screen and (max-width:860px){.search-input{box-sizing:border-box}}.search{width:100%;display:flex;flex-direction:column;align-items:center}.host-content{display:grid;grid-template-columns:10fr 8fr;grid-template-rows:1fr;width:95vw;height:88vh;padding:12vh 3.5vh 0 1.5vh}@media screen and (max-width:860px){.host-content{display:flex;flex-direction:column;height:auto;width:100vw;padding:12vh 0 20vh}}.host-track-list{list-style:none;padding:0;width:100%;margin:0}.host-track-list li{font-size:.9rem;margin:0;padding:.8rem .5rem .75rem .75rem;display:grid;grid-template-columns:8fr 5fr 2fr 1fr 1fr;grid-template-rows:1fr;justify-content:space-around;align-items:center;position:relative}.host-track-list li:first-of-type{font-size:.75rem;color:var(--spotify_text_gray)}.host-track-list li:not(:first-of-type){border-top:1px solid var(--spotify_gray)}.host-track-list li:not(:first-of-type).track-list-item:hover{background-color:var(--spotify_gray)}.host-track-list li:not(:first-of-type).track-list-item:hover button{display:inline;display:initial}.host-track-list li button{position:relative;display:none;background:none;border:none;fill:var(--spotify_text_gray);height:.75rem;width:.75rem;padding:3px;box-sizing:content-box;margin:0;line-height:.75rem;outline:none}.host-track-list li button:hover{cursor:pointer;fill:var(--spotify_white);-webkit-transform:scale(1.1);transform:scale(1.1)}.host-track-list li button:before{font-size:.5rem}.host-track-list li button:last-of-type{height:1.1rem;width:1.1rem;padding:0}@media screen and (max-width:860px){.host-track-list li{margin:0 .75rem}}.album-tilt{height:50vw;width:50vw;max-height:65vh;max-width:65vh}.album-tilt img{object-fit:cover;width:100%;height:100%}@media screen and (max-width:860px){.album-tilt{width:80vw;height:80vw}}.player-loading-overlay{top:0;left:0;position:fixed;width:100vw;height:100vh;z-index:999;opacity:1;background-color:hsla(0,0%,100%,.1);-webkit-backdrop-filter:grayscale(.5) blur(1.2px);backdrop-filter:grayscale(.5) blur(1.2px);-webkit-transition:opacity .25s ease;transition:opacity .25s ease}.player-loading-overlay.disabled{opacity:0}.player{display:flex;flex-direction:column;align-items:center;width:100%}.player h3,.player p{margin-bottom:0}.player p{margin-top:.5rem}@media screen and (max-width:860px){.player{margin-bottom:1rem}}.player-controller{display:flex;flex-direction:column;justify-content:space-between;width:60vh;max-width:100vw;margin-top:.25rem;padding:1rem;box-sizing:border-box}@media screen and (max-width:860px){.player-controller{background-color:var(--spotify_gray);position:fixed;bottom:0;width:100vw;z-index:999}}.player-controller-controlls{display:flex;width:80%;margin:0 auto;justify-content:space-evenly}.player-controll-connect{position:relative;display:flex;justify-content:center;align-items:center}.player-controll-connect>div{position:absolute;background-color:var(--spotify_gray);border-radius:5px;-webkit-transform:translateY(-100%);transform:translateY(-100%);box-shadow:0 4px 20px 4px rgba(0,0,0,.5);top:-1rem;min-width:220px;display:block}.player-controll-connect>div:before{bottom:-20px;left:calc(50% - 10px);border:10px solid transparent;border-top-color:#282828;position:absolute;content:""}.player-controll-connect>div ul{list-style:none;margin:0;padding:0}.player-controll-connect>div ul li{overflow:hidden}.player-controll-connect>div ul li:first-of-type{border-top-left-radius:5px;border-top-right-radius:5px}.player-controll-connect>div ul li:last-of-type{border-bottom-left-radius:5px;border-bottom-right-radius:5px}.player-controll-connect>div ul .loading{display:flex;justify-content:center;padding:1rem}.player-controll-connect>div button{min-width:100%;outline:none;background:none;border:none;padding:1rem 2rem 1rem 1rem;margin:0;display:flex;align-items:center;justify-content:flex-start;text-align:left;color:var(--spotify_white)}.player-controll-connect>div button.device-active{color:var(--spotify_green)}.player-controll-connect>div button.device-active svg{stroke:var(--spotify_green)}.player-controll-connect>div button.device-active svg .icon-fill{fill:var(--spotify_green)}.player-controll-connect>div button.device-restricted{color:var(--spotify_text_gray)}.player-controll-connect>div button.device-restricted svg{stroke:var(--spotify_text_gray)}.player-controll-connect>div button.device-restricted svg .icon-fill{fill:var(--spotify_text_gray)}.player-controll-connect>div button:hover{background-color:var(--spotify_medium_gray);cursor:pointer}.player-controll-connect>div button svg{fill:none;height:2rem;width:2rem;stroke:var(--spotify_white)}.player-controll-connect>div button svg .icon-fill{fill:var(--spotify_white)}.player-controll-connect>div button p{letter-spacing:1px;margin:0 0 0 1rem;font-size:.9rem;font-weight:700;white-space:nowrap;max-width:280px;text-overflow:ellipsis;overflow:hidden}.player-controll-button{outline:none;background:none;color:var(--spotify_white);border:none;padding:10px;display:flex;justify-content:center;align-items:center;border-radius:50%}.player-controll-button:hover{cursor:pointer;-webkit-filter:brightness(140%);filter:brightness(140%)}.player-controll-button svg{stroke:var(--spotify_text_gray)}.player-controll-button svg:not(.icon-connect){width:.9rem}.player-controll-button svg.icon-connect{fill:none;width:1rem}.player-controll-button .icon-fill{fill:var(--spotify_text_gray)}.player-controll-button.circle{border:1px solid var(--spotify_text_gray);padding:12px}.player-controll-button.circle:hover{-webkit-transform:scale(1.04);transform:scale(1.04)}.player-controll-button.play svg{position:relative;left:1px}.progress-bar-container{position:relative;width:90%;align-self:center;display:flex;justify-content:center;margin:1rem 0 .5rem}.progress-bar-container>div:not(:nth-of-type(2)){position:absolute;font-size:.5rem;top:-6px}.progress-bar-container>div:first-of-type{left:-18px;text-align:left}.progress-bar-container>div:last-of-type{right:-18px;text-align:right}.progress-bar{position:relative;width:90%;height:5px;background-color:var(--spotify_medium_gray);border-radius:3px}.progress-bar:before{content:"";position:absolute;top:-4px;height:14px;width:100%}.progress-bar div{background-color:var(--spotify_text_gray);position:absolute;-webkit-transform-origin:left;transform-origin:left;height:5px;top:0;left:0;content:"";border-radius:3px}.progress-bar:hover{cursor:pointer}.progress-bar:hover div{background-color:var(--spotify_green)}.progress-bar:hover div:after{position:absolute;right:-6px;top:-3px;content:"";border-radius:50%;height:12px;width:12px;padding:0;margin:0;background-color:var(--spotify_text_gray)}.spectator{width:100vw;align-self:flex-start;margin-top:4rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.list-container{width:100%;max-height:calc(100vh - 8rem);overflow:scroll;position:relative;scroll-behavior:smooth}.list-container:after{content:"";position:fixed;bottom:0;width:100%;height:5rem;background-image:-webkit-gradient(linear,left bottom,left top,from(#000),to(transparent));background-image:linear-gradient(0deg,#000,transparent)}.track-list{list-style:none;padding:0 0 4rem;margin:0;width:100%}.track-list li{margin:0;padding:.8rem .5rem;display:grid;grid-template-columns:6vh 6fr 3fr;grid-template-rows:1fr;justify-content:space-around}.track-list li:not(:first-of-type){border-top:1px solid var(--spotify_gray)}.track-list li:hover{background-color:var(--spotify_gray)}.track-list li>div:nth-of-type(2){display:flex;align-items:center;justify-content:space-between}.track-list li>div:nth-of-type(2)>div{margin-left:.5rem;font-size:.85rem;color:var(--spotify_text_gray)}@media screen and (max-width:860px){.track-list li{margin:0 .75rem}}.track-list img{height:6vh;width:6vh;max-width:6rem;max-height:6rem}.track-list .track-names{padding-left:.7rem;display:flex;flex-direction:column;justify-content:center}.track-list .track-names h3{text-align:left;margin:0;font-size:.8rem}.track-list .track-names div:last-of-type{font-size:.6rem;color:var(--spotify_text_gray)}.track-list .track-names div:last-of-type,.track-list .track-names h3{max-width:45vw;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.track-list button,.track-list div:last-of-type{color:var(--spotify_white)}.track-list button{font-size:1.5rem;background:none;border:none;margin:0 .25rem 0 auto;display:flex;align-items:center;padding:0;outline:none}.track-list button:hover{cursor:pointer}.track-list button svg{height:1.5rem;fill:var(--spotify_white);-webkit-transition:.25s ease;transition:.25s ease}.track-list button svg:active{-webkit-transform:scale(1.2);transform:scale(1.2)}.App{display:flex;justify-content:center;align-items:center;min-height:80vh;color:#fff;overflow:hidden}.green{color:var(--spotify_green)}.white{color:#fff}.gray{color:var(--spotify_gray)}.xs{font-size:.5rem}.s{font-size:1rem}.m{font-size:2rem}.l{font-size:3rem}.xl{font-size:4rem}
/*# sourceMappingURL=main.72ee45bc.chunk.css.map */