.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@-webkit-keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes App-logo-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-attachment:fixed;background-position:50%;background-repeat:no-repeat;background-size:cover;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}@-webkit-keyframes rotor-pod{0%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}to{-webkit-transform:rotateY(1turn);transform:rotateY(1turn)}}@keyframes rotor-pod{0%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}to{-webkit-transform:rotateY(1turn);transform:rotateY(1turn)}}.App{-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-name:rotor-pod;animation-name:rotor-pod;-webkit-animation-play-state:running;animation-play-state:running;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;background:#dcdcdc;box-shadow:0 0 12px 2px #000;margin:1% auto 0;padding:20px 10px 5px;width:-webkit-min-content;width:min-content}.App,.screen-container{background-size:cover;border-radius:20px;position:relative;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out}.screen-container{background-image:url(/static/media/background.4de78327673dce67efa4.jpg);background-position:50%;background-repeat:no-repeat;height:350px;margin:0 auto;overflow:hidden;width:350px}.buttons-container{align-items:center;background-color:#fff;border:1px solid grey;border-radius:50%;display:flex;height:260px;justify-content:center;margin:10px auto 0;position:relative;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;width:260px}.center-circle{background-color:#5a5a5a;border:none;border-radius:inherit;color:#fff;height:50%}.center-circle,.menu-button{align-items:center;display:flex;justify-content:center;outline:none;width:50%}.menu-button{background-color:initial;border:none;border-radius:37% 37% 0 0;color:#4e4e4e;font-size:30px;height:25%;position:absolute;top:0}.left-button{border:none;border-radius:37% 0 0 37%;left:0}.left-button,.right-button{align-items:center;background-color:initial;color:#4e4e4e;display:flex;font-size:30px;height:50%;justify-content:center;outline:none;position:absolute;width:25%}.right-button{border:none;border-radius:0 37% 37% 0;right:0}.play-pause{align-items:center;background-color:initial;border:none;border-radius:0 0 37% 37%;bottom:0;color:#4e4e4e;display:flex;font-size:30px;height:25%;justify-content:center;outline:none;position:absolute;width:50%}.screen-menu{background-color:#fff;box-shadow:none;height:100%;left:0;overflow-x:hidden;position:absolute;transition:width .2s ease-in-out;width:0;z-index:5}.width-50{box-shadow:0 0 12px 1px #525252!important;width:50%!important}.screen-menu>div{align-items:center;border:1px solid #bebebe;box-sizing:border-box;display:flex;height:20%;justify-content:center;white-space:nowrap;width:100%}.screen-menu p{font-size:20px;overflow-wrap:normal}.screen-menu>.selected{background-color:#5959ff}.app-logo{background-color:#ff1d58;color:#fff;font-size:large}.screen-game{background-color:hsla(0,0%,100%,.9)}.screen-game,.screen-music{box-sizing:border-box;height:100%;overflow:hidden;width:100%}.screen-music{background-color:#ffb500}.screen-coverflow,.screen-setting{background-color:hsla(0,0%,100%,.9);box-sizing:border-box;height:100%;overflow:hidden;width:100%}.screen-music>h2{background-color:#424242;color:#fff!important;margin:0 0 10px;padding:10px}.song-image{border-radius:20px;box-shadow:0 0 12px 5px grey;height:50%;margin-left:auto;margin-right:auto;width:50%}.song-image>img{border-radius:inherit;height:100%;width:100%}#audio{outline:none}.screen-music-instruction>p{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:highlight;animation-name:highlight;-webkit-animation-play-state:running;animation-play-state:running;margin:0}@-webkit-keyframes background-gradient-animation{0%{background-color:#ff1d58}20%{background-color:#f75990}40%{background-color:#fff685}60%{background-color:#0df}80%{background-color:#0049b7}to{background-color:#ff1d58}}@keyframes background-gradient-animation{0%{background-color:#ff1d58}20%{background-color:#f75990}40%{background-color:#fff685}60%{background-color:#0df}80%{background-color:#0049b7}to{background-color:#ff1d58}}.colored{-webkit-animation-duration:5s;animation-duration:5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:background-gradient-animation;animation-name:background-gradient-animation;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:.9;transition:background-color .2s ease-in-out}.colored,.colored svg{color:#fff}.colored .center-circle{background-color:#000}.screen-game>div{color:red;font-size:180px}.screen-game h1{margin:0}.screen-game>div>svg{-webkit-box-reflect:below -68px -webkit-gradient(linear,right top,right bottom,from(transparent),to(hsla(0,0%,100%,.4)))}.screen-setting>h1{margin:0}.screen-setting>div{color:#868686;font-size:150px}.screen-setting>div>svg{-webkit-box-reflect:below 0 -webkit-gradient(linear,right top,right bottom,from(transparent),to(hsla(0,0%,100%,.4)))}.screen-coverflow>h1{margin:0}.screen-coverflow>div{color:#ff9100;font-size:150px}.screen-coverflow>div>svg{-webkit-box-reflect:below 0 -webkit-gradient(linear,right top,right bottom,from(transparent),to(hsla(0,0%,100%,.4)))}.artists-screen>h1{margin:0}.artists-screen>div{color:#ae00ff;font-size:180px}.artists-screen>div>svg{-webkit-box-reflect:below 0 -webkit-gradient(linear,right top,right bottom,from(transparent),to(hsla(0,0%,100%,.4)))}.albums-screen>h1{margin:0}.albums-screen>div{color:#ae00ff;font-size:180px}.albums-screen>div>svg{-webkit-box-reflect:below 0 -webkit-gradient(linear,right top,right bottom,from(transparent),to(hsla(0,0%,100%,.4)))}
/*# sourceMappingURL=main.762a82e8.css.map*/