body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.now-playing__year{font-size:1.5em;margin-bottom:.3em;cursor:pointer}.now-playing__artist{margin-top:.2em;margin-bottom:.2em;font-size:.8em}.now-playing__name{margin-top:.5em;font-size:.8em}.now-playing__img{text-align:center}.now-playing__img img{max-width:300px}.progress{border:1px solid #eee;height:6px;border-radius:3px;overflow:hidden;max-width:400px;margin-bottom:.7em}.progress__bar{background-color:#eee;height:4px}@media (max-width:1080px){.game-logo{width:60px}.title-container h3{font-size:1em}.subtitle{font-size:.5em}.now-playing__img img{max-width:275px}.progress{max-width:350px}.btn{font-size:2.5vmin}.now-playing__year{font-size:1.8em}.now-playing__artist{font-size:1em}.now-playing__name{font-size:1em;overflow-x:auto;white-space:nowrap;max-width:300px;justify-content:flex-start}}@media (max-width:480px){.game-logo{width:50px}.title-container h3{font-size:.8em}.subtitle{font-size:.4em}.now-playing__img img{max-width:250px}.progress{max-width:300px}.btn{font-size:2vmin}.input-wrapper{align-items:stretch}.button-wrapper,.input-wrapper{flex-direction:column}}.App{text-align:center}.App-logo{animation:App-logo-spin 20s linear infinite;height:40vmin;pointer-events:none}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}body{background-color:#333;color:#eee;font-family:Helvetica,Arial;font-size:3vmin}.hidden{display:none}.btn{background-color:initial;border-radius:2em;border:.2em solid #fff;color:#fff;cursor:pointer;font-size:3vmin;padding:.7em 1.5em;text-transform:uppercase;transition:all .25s ease;margin:2em}.btn:hover{background:#4e5564;font-size:3.5vmin}.btn--login{margin:0 auto}.background{left:0;right:0;top:0;bottom:0;background-size:cover;background-position:50%;filter:blur(8em) opacity(.6);position:absolute;pointer-events:none}.main-wrapper{margin:0 auto;position:relative;z-index:1;max-width:400px}.container,.main-wrapper{align-items:center;height:100%;justify-content:center}.container{display:flex}.main-container{flex:1 1}.button-wrapper{display:flex;justify-content:center;grid-gap:20px;gap:20px}.forward-icon,.play-icon{cursor:pointer}.forward-icon:hover,.play-icon:hover{transform:scale(1.1)}.input-wrapper{display:flex;align-items:center;border:3px solid #fff;border-radius:20px;padding:5px;margin-top:1em;margin-bottom:.8em}.input-wrapper input{border:none;outline:none;background:none;flex:1 1;padding:5px;color:#fff;text-align:center;font-size:large}.header-left{left:20px}.header-left,.header-right{position:absolute;top:20px;display:flex;align-items:center;z-index:1000}.header-right{right:20px}.settings{transition:transform .4s ease-in-out;cursor:pointer}.settings:hover{transform:rotate(90deg)}.shake-interfere{animation:jump-shaking 1s infinite}.interfere{cursor:pointer}body{font-family:sans-serif}div{text-align:center}@keyframes jump-shaking{0%{transform:translateX(0)}25%{transform:translateY(-9px)}35%{transform:translateY(-9px) rotate(17deg)}55%{transform:translateY(-9px) rotate(-17deg)}65%{transform:translateY(-9px) rotate(17deg)}75%{transform:translateY(-9px) rotate(-17deg)}to{transform:translateY(0) rotate(0)}}.game,.start-page{display:flex;flex-direction:column;align-items:center;width:100%}.game-logo{width:80px;margin-right:10px}.title-container{display:flex;flex-direction:column;text-align:left}.title-container h3{margin:0;font-size:1.2em}.subtitle{font-size:.6em}.main-title{display:flex;flex-direction:column;text-align:left;margin-top:.2em}.main-title h3{margin:0;font-size:1.2em}.main-subtitle{font-size:.6em}.player{max-width:400px;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center}.timeline{width:100%;margin-top:0}.main-logo{width:20%}.settings-menu{position:fixed;top:0;right:-100%;width:100%;height:100%;background-color:#000;overflow-x:hidden;transition:right .5s;z-index:999;display:flex;align-items:center;justify-content:center}.settings-menu.open{right:0}.settings-option{display:flex;align-items:center;margin-bottom:10px}.settings-option label{margin-right:10px;color:#fff}.toggle-switch{position:relative;width:40px;height:20px}.checkbox-wrapper-44 input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper-44 *,.checkbox-wrapper-44 :after,.checkbox-wrapper-44 :before{box-sizing:border-box}.checkbox-wrapper-44 .toggleButton{cursor:pointer;display:block;transform-origin:50% 50%;transform-style:preserve-3d;transition:transform .14s ease}.checkbox-wrapper-44 .toggleButton:active{transform:rotateX(30deg)}.checkbox-wrapper-44 .toggleButton input+div{border:3px solid hsla(0,0%,100%,.2);border-radius:50%;position:relative;width:44px;height:44px}.checkbox-wrapper-44 .toggleButton input+div svg{fill:none;stroke-width:3.6;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;width:44px;height:44px;display:block;position:absolute;left:-3px;top:-3px;right:-3px;bottom:-3px;z-index:1;stroke-dashoffset:124.6;stroke-dasharray:0 162.6 133 29.6;transition:all .4s ease 0s}.checkbox-wrapper-44 .toggleButton input+div:after,.checkbox-wrapper-44 .toggleButton input+div:before{content:"";width:3px;height:16px;background:#fff;position:absolute;left:50%;top:50%;border-radius:5px}.checkbox-wrapper-44 .toggleButton input+div:before{opacity:0;transform:scale(.3) translate(-50%,-50%) rotate(45deg);animation:bounceInBefore-44 .3s linear .3s forwards}.checkbox-wrapper-44 .toggleButton input+div:after{opacity:0;transform:scale(.3) translate(-50%,-50%) rotate(-45deg);animation:bounceInAfter-44 .3s linear .3s forwards}.checkbox-wrapper-44 .toggleButton input:checked+div svg{stroke-dashoffset:162.6;stroke-dasharray:0 162.6 28 134.6;transition:all .4s ease .2s}.checkbox-wrapper-44 .toggleButton input:checked+div:before{opacity:0;transform:scale(.3) translate(-50%,-50%) rotate(45deg);animation:bounceInBeforeDont-44 .3s linear 0s forwards}.checkbox-wrapper-44 .toggleButton input:checked+div:after{opacity:0;transform:scale(.3) translate(-50%,-50%) rotate(-45deg);animation:bounceInAfterDont-44 .3s linear 0s forwards}@keyframes bounceInBefore-44{0%{opacity:0;transform:scale(.3) translate(-50%,-50%) rotate(45deg)}50%{opacity:.9;transform:scale(1.1) translate(-50%,-50%) rotate(45deg)}80%{opacity:1;transform:scale(.89) translate(-50%,-50%) rotate(45deg)}to{opacity:1;transform:scale(1) translate(-50%,-50%) rotate(45deg)}}@keyframes bounceInAfter-44{0%{opacity:0;transform:scale(.3) translate(-50%,-50%) rotate(-45deg)}50%{opacity:.9;transform:scale(1.1) translate(-50%,-50%) rotate(-45deg)}80%{opacity:1;transform:scale(.89) translate(-50%,-50%) rotate(-45deg)}to{opacity:1;transform:scale(1) translate(-50%,-50%) rotate(-45deg)}}@keyframes bounceInBeforeDont-44{0%{opacity:1;transform:scale(1) translate(-50%,-50%) rotate(45deg)}to{opacity:0;transform:scale(.3) translate(-50%,-50%) rotate(45deg)}}@keyframes bounceInAfterDont-44{0%{opacity:1;transform:scale(1) translate(-50%,-50%) rotate(-45deg)}to{opacity:0;transform:scale(.3) translate(-50%,-50%) rotate(-45deg)}}@media (max-width:1080px){.button-wrapper{display:block}.forward-icon,.play-icon{margin-left:.2em;margin-right:.2em}.input-wrapper{flex-direction:unset}.game{margin-top:5em}.main-logo{width:40%}.btn{margin:1.5em}.timeline{margin-top:0}}@media (max-width:480px){.main-logo{width:60%}.btn{font-size:4vmin}}.timeline-container{display:flex;overflow-x:auto;justify-content:flex-start;padding:10px;background-color:rgba(40,44,52,0);white-space:nowrap}.timeline-year{display:inline-block;color:#fff;border:3px solid;border-radius:20px;transition:background-color .3s;margin:5px;padding:15px}@media (max-width:1080px){.timeline-container{max-width:700px}}@media (max-width:480px){.timeline-container{max-width:350px}}
/*# sourceMappingURL=main.8d085cf6.chunk.css.map */