@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap";:root{--white:#fff;--translucent-white:#fff3;--sunglow:#ffca3a;--brick-red:#d1495b;--metallic-seaweed:#00798c;--indigo-dye:#003d5b;--cyan-process:#01baef;--green-blue-crayola:#1982c4;--azure:#3a86ff;--african-violet:#aa7bc3;--translucent-african-violet:#aa7bc333;--sizzling-red:#ff595e;--davys-grey:#46494c;--translucent-davys-grey:#46494ccc;--yellow-green:#8ac926;--default-border-radius:4px}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--cyan-process);color:var(--white);margin:0;padding:0;font-family:Open Sans,sans-serif;font-size:14px}a{color:inherit}.option-block{border:1px solid var(--white);background-color:var(--translucent-white);border-radius:var(--default-border-radius);padding:10px}.option-block-separator{text-align:center;margin:10px 0;display:block}button{height:40px;color:var(--davys-grey);cursor:pointer;border:none;border-radius:2px;padding:0 10px;font-weight:700}button:focus{outline:none}.Home .option-block{text-align:right}.Home .option-block p{text-align:left}.Home p{margin:0}.Create-Or-Select-Playlist .option{background-color:var(--translucent-white);border:1px solid var(--translucent-white)}.Create-Or-Select-Playlist .playlists-container{flex-direction:column;display:flex}.playlists-container span,.playlists-container button{height:40px;color:inherit;border-radius:var(--default-border-radius);text-align:center;margin-bottom:5px;font-weight:700;line-height:40px}.playlists-container button{border:1px solid var(--indigo-dye);color:var(--metallic-seaweed);background-color:#0000}.Create-Or-Select-Playlist .playlists-container span{border:1px solid var(--african-violet);background-color:var(--translucent-african-violet);color:var(--african-violet)}.Create-Playlist{flex-direction:column;display:flex}.Create-Playlist input{height:28px;margin:10px 0;padding:4px 8px}.Create-Playlist button{background-color:var(--yellow-green);border:1px solid var(--yellow-green);width:150px;color:var(--white);margin:10px auto}.Result{justify-content:space-between;align-items:center;margin-bottom:5px;display:flex}.Result>*{display:block}.Result button{background-color:var(--yellow-green)}.Result .preview-control{margin:0 5px 0 auto}.Search-container{box-sizing:border-box;background-color:var(--translucent-white);border-radius:var(--default-border-radius);width:100vw;max-width:980px;padding:10px}.Search-ResultList{max-height:80vh;overflow:scroll}.Search-Input-container{width:100%;margin-bottom:10px;display:flex}.Search-Input-container input{width:calc(100% - 40px)}.Search-Input-container button{flex-basis:40px}.reset-search-button{color:var(--white);background-color:#0000;align-items:center;font-size:22px;display:flex}.Manage-Tracks{border:1px solid var(--white);background-color:var(--translucent-white);border-radius:var(--default-border-radius);text-align:center;padding:10px}.Manage-Tracks .track{text-align:left;border-bottom:1px solid var(--white);justify-content:space-between;align-items:center;width:100%;display:flex}.Manage-Tracks>button{background-color:var(--african-violet);color:var(--white);border:none;margin-top:10px}.Manage-Tracks .trash-button{color:var(--brick-red);background-color:#0000;border:none}.search-pop-in{justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:absolute;top:0;left:0}.Search-container{z-index:1;max-width:980px;position:relative}.search-overlay{background-color:var(--translucent-davys-grey);z-index:0;width:100vw;height:100vh;position:absolute}.Player-container{text-align:center;flex-direction:column;margin-bottom:35px;display:flex}.Player-container .current-track{font-size:24px}.Player-container .controls-container{justify-content:center;margin-top:10px;display:flex}.Player-container .controls-container button{background-color:var(--translucent-white);border:1px solid var(--white);color:var(--white)}.Player-container .controls-container button:first-child{margin-right:5px}.Session-Step{grid-column-gap:20px;grid-template:"controls qrcode""challengers qrcode"/auto 20%;display:grid}.Session-Step>.controls-container{flex-direction:column;grid-area:controls;justify-content:center;align-items:center;display:flex}.controls-container .session-actions{justify-content:space-evenly;width:100%;display:flex}.session-actions .start-session-btn{background-color:var(--yellow-green);color:var(--white)}.session-actions .close-session-btn{background-color:var(--brick-red);color:var(--white)}.challenge-button{color:var(--white)}.challenge-button-wrong,.challenge-button-half{margin-right:10px}.challenge-button-wrong{background-color:var(--sizzling-red)}.challenge-button-half{background-color:var(--azure)}.challenge-button-full{background-color:var(--green-blue-crayola)}.Session-Step .QRCode{text-align:center;grid-area:qrcode}.QRCode a{text-align:center;align-items:center;display:inline-flex}.QRCode a svg{margin-left:4px}@media (max-width:980px){.Session-Step{flex-direction:column;display:flex}.QRCode canvas{display:none}}.challenger-list{grid-area:challengers}.challenger-list p{grid-area:challengers;justify-content:flex-start;align-items:center;display:flex}p.active-challenger{text-align:center;border-radius:4px;justify-content:center;padding:5px;font-weight:700}.challenger-list p.first{font-size:16px;font-weight:700}.challenger-list span:last-child{margin:0 0 0 auto}.challenger-list svg{color:var(--sunglow);margin-right:5px;font-size:20px}.steps-navigation-container{justify-content:space-between;margin-top:10px;display:flex}.steps-navigation-container .previous-step-button{margin:0 auto 0 0}.steps-navigation-container .next-step-button{margin:0 0 0 auto}.steps-navigation-container button{background-color:var(--sunglow);border:1px solid var(--sunglow);align-items:center;display:flex}.App{width:100vw;max-width:980px;margin:0 auto}.App-header,h1{box-sizing:border-box;height:40px;line-height:40px}h1{margin:0}.Session{width:100%;max-width:980px;height:calc(100vh - 50px);overflow:hidden}.Join-Session-Form{flex-direction:column;display:flex}.Join-Session-Form .option-block{flex-direction:column;display:flex;position:relative}.Join-Session-Form .option-block h2{margin:0 0 10px}.Join-Session-Form input{box-sizing:border-box;height:40px;margin-bottom:15px;padding:4px 8px;line-height:40px}.Join-Session-Form .colors{flex-wrap:wrap;justify-content:space-between;display:flex}.colors button{flex-basis:40px}.Join-Session-Form>button{background-color:var(--yellow-green);width:150px;color:var(--white);align-self:center;margin:15px auto 0}.Join-Session-Form>button[disabled]{background-color:var(--translucent-white);color:var(--davys-grey);cursor:not-allowed}.Join-Session-Form select{box-sizing:border-box;height:40px;padding:4px}.Session-challenge-button,.Session .challenger-list-wrapper{width:100vw;max-width:980px}.Session-challenge-button{box-sizing:border-box;height:66.6667dvh;max-height:980px;padding:0}.Session-leave-button{text-align:center;background-color:var(--brick-red);color:var(--white);margin:20px auto 0}.Play .challenger-list-wrapper{will-change:top;background-color:var(--indigo-dye);max-width:980px;height:100vh;transition:top .4s;position:fixed;top:calc(100dvh - 40px);left:0}.Play .challenger-list-wrapper.open{top:0}.challenger-list-opener{background-color:var(--indigo-dye);box-sizing:border-box;border-top-left-radius:var(--default-border-radius);border-top-right-radius:var(--default-border-radius);justify-content:space-between;align-items:center;width:100%;height:40px;padding:10px;line-height:40px;display:flex}.Play .challenger-list{max-height:calc(100vh - 40px);padding:0 10px 10px;overflow:scroll}@media (min-width:980px){.challenger-list-opener{display:none}.Play .challenger-list-wrapper{position:initial;top:initial;background-color:#0000;max-width:980px;height:auto}.Session-challenge-button,.Session .challenger-list-wrapper{margin-left:0}}.Board{grid-column-gap:20px;grid-template:"gif qrcode""track qrcode""challengers qrcode"/auto 20%;width:100vw;max-width:980px;display:grid}.Board .gif{text-align:center;grid-area:gif;margin:0 auto}.Board .track{background-color:var(--translucent-white);border:1px solid var(--white);border-radius:var(--default-border-radius);text-align:center;grid-area:track;padding:10px}.Board .track span{display:block}.Board .track span:first-child{font-size:18px}.Board .challengers{grid-area:challengers}.Board .active-challenger{border:3px solid var(--white)}.Board .qrcode{grid-area:qrcode}