body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#2e343c;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0;overflow:hidden}.reload{opacity:0!important}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.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)}}.header{border-bottom:1px solid #464a53;height:82px;justify-content:space-between;margin:0 6%}.container-title,.header{align-items:center;display:flex}.title{color:#f5f6fa;font-size:32px;font-weight:600;margin:0;text-transform:uppercase;-webkit-user-select:none;user-select:none}.multicolor{-webkit-text-fill-color:transparent;background:-webkit-linear-gradient(#fc5c65,#fd9644,#fed330,#26de81,#45aaf2,#4b7bec,#a55eea);background-clip:text;-webkit-background-clip:text}.container-button,.container-button-item{align-items:center;display:flex}.container-button-item{cursor:pointer;justify-content:center;margin-left:22px}.container-button-item>svg{color:#f5f6fa;font-size:22px}.container-button-item:hover>svg{color:#dcdde1}.rotate-icon{transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s}.rotate{-webkit-transform:rotate(1turn);transform:rotate(1turn)}@media screen and (min-width:768px) and (max-width:1024px){.header{height:72px;margin:0 4%}.title{font-size:24px}.container-button-item{margin-left:20px}.container-button-item>svg{font-size:18px}}@media screen and (max-width:768px){.header{height:62px;margin:0 2%}.title{font-size:20px}.container-button-item{margin-left:18px}.container-button-item>svg{font-size:16px}}.content{min-height:calc(100vh - 547px);padding:0 14%}.content,.content-center{align-items:center;display:flex;justify-content:center}.content-center{flex-wrap:wrap;height:100%;width:100%}.container-text-note{align-items:center;display:flex;justify-content:center;min-height:48px;transition:opacity .2s ease}.text-note{color:#f5f6fa;font-size:28px;text-align:center;transition:font-size .2s ease;transition:color .2s ease;-webkit-user-select:none;user-select:none}.current{font-size:38px!important}.passed{color:#464a53!important}.current.B{color:#eb3b5a!important}.current.A{color:#fa8231!important}.current.G{color:#f7b731!important}.current.F{color:#20bf6b!important}.current.E{color:#2d98da!important}.current.D{color:#3867d6!important}.current.C{color:#8854d0!important}@media screen and (min-width:768px) and (max-width:1024px){.content{min-height:calc(100vh - 509px);padding:0 6%}.container-text-note{min-height:44px}.text-note{font-size:26px}.current{font-size:36px!important}}@media screen and (max-width:768px){.content{min-height:calc(100vh - 443px);padding:0 2%}.container-text-note{min-height:38px}.text-note{font-size:22px}.current{font-size:28px!important}}.piano{bottom:0;display:flex;flex-direction:column;height:464px;left:0;position:fixed;width:30vw;z-index:99}@media screen and (min-width:768px) and (max-width:1024px){.piano{height:436px}}@media screen and (max-width:768px){.piano{height:380px}}.whitekey{align-items:center;background-color:#f5f6fa;border-bottom:1px solid #dcdde1;border-right:2px solid #dcdde1;border-top:1px solid #dcdde1;color:#dcdde1;display:flex;height:64px;justify-content:flex-end;width:100%}.whitekey>span{font-size:48px;margin-right:40px;-webkit-transform:rotate(270deg);transform:rotate(270deg);-webkit-user-select:none;user-select:none}.whitekey.B{border-top:2px solid #dcdde1;border-top-right-radius:10px}.whitekey.C{border-bottom:2px solid #dcdde1;border-bottom-right-radius:10px}.active.B{background-color:#fc5c65!important;color:#eb3b5a!important}.active.A{background-color:#fd9644!important;color:#fa8231!important}.active.G{background-color:#fed330!important;color:#f7b731!important}.active.F{background-color:#26de81!important;color:#20bf6b!important}.active.E{background-color:#45aaf2!important;color:#2d98da!important}.active.D{background-color:#4b7bec!important;color:#3867d6!important}.active.C{background-color:#a55eea!important;color:#8854d0!important}.fade-reload{transition:background-color .2s ease,color .2s ease}@media screen and (min-width:768px) and (max-width:1024px){.whitekey{height:60px;width:100%}.whitekey>span{font-size:42px;margin-right:36px}}@media screen and (max-width:768px){.whitekey{height:52px;width:100%}.whitekey>span{font-size:36px;margin-right:26px}}.blackkey{background:#2f3640;border:2px solid #353b48;border-bottom-right-radius:10px;border-top-right-radius:10px;height:50px;left:0;position:absolute;width:50%}.pos1{top:40px}.pos2{top:106px}.pos3{top:172px}.pos4{top:304px}.pos5{top:370px}@media screen and (min-width:768px) and (max-width:1024px){.blackkey{height:48px;width:50%}.pos1{top:36px}.pos2{top:99px}.pos3{top:162px}.pos4{top:284px}.pos5{top:347px}}@media screen and (max-width:768px){.blackkey{height:40px;width:36%}.pos1{top:32px}.pos2{top:86px}.pos3{top:140px}.pos4{top:249px}.pos5{top:303px}}.note{align-items:center;bottom:0;height:464px;justify-content:center;position:fixed;transition:opacity .1s ease;width:100vw}.n,.note{display:flex}.n{border-radius:10px;height:64px;position:absolute}.nB{background:#fc5c65;top:2px}.nA{background:#fd9644;top:68px}.nG{background:#fed330;top:134px}.nF{background:#26de81;top:200px}.nE{background:#45aaf2;top:266px}.nD{background:#4b7bec;top:332px}.nC{background:#a55eea;top:398px}.s1{right:-10vw;width:10vw}.s2{right:-20vw;width:20vw}.s3{right:-30vw;width:30vw}.s4{right:-40vw;width:40vw}.s5{right:-50vw;width:50vw}.s6{right:-60vw;width:60vw}.s7{right:-70vw;width:70vw}.s8{right:-80vw;width:80vw}.s9{right:-90vw;width:90vw}@media screen and (min-width:768px) and (max-width:1024px){.note{height:436px}.n{height:60px}.nB{top:2px}.nA{top:64px}.nG{top:126px}.nF{top:188px}.nE{top:250px}.nD{top:312px}.nC{top:374px}}@media screen and (max-width:768px){.note{height:380px}.n{height:52px}.nB{top:2px}.nA{top:56px}.nG{top:110px}.nF{top:164px}.nE{top:218px}.nD{top:272px}.nC{top:326px}}.welcome-overlay{align-items:center;-webkit-animation:overlay-fade-in .4s ease;animation:overlay-fade-in .4s ease;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:rgba(46,52,60,.75);display:flex;inset:0;justify-content:center;position:fixed;z-index:1000}@-webkit-keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}.welcome-modal{-webkit-animation:modal-pop-in .4s cubic-bezier(.34,1.56,.64,1);animation:modal-pop-in .4s cubic-bezier(.34,1.56,.64,1);background:#363c45;border:1px solid #464a53;border-radius:20px;margin:0 16px;max-width:460px;overflow:hidden;padding:52px 48px 44px;position:relative;text-align:center;width:90%}@-webkit-keyframes modal-pop-in{0%{opacity:0;-webkit-transform:scale(.88) translateY(20px);transform:scale(.88) translateY(20px)}to{opacity:1;-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@keyframes modal-pop-in{0%{opacity:0;-webkit-transform:scale(.88) translateY(20px);transform:scale(.88) translateY(20px)}to{opacity:1;-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}.welcome-title{color:#f5f6fa;font-size:42px;font-weight:600;letter-spacing:1px;margin:0 0 16px;text-transform:uppercase}.welcome-multicolor{-webkit-text-fill-color:transparent;background:linear-gradient(90deg,#fc5c65,#fd9644,#fed330,#26de81,#45aaf2,#4b7bec,#a55eea);background-clip:text;-webkit-background-clip:text}.welcome-subtitle{color:#aaadb8;font-size:15px;line-height:1.65;margin:0 0 36px}.welcome-cta{background-color:#363c45;border:1px solid #464a53;border-radius:50px;color:#f5f6fa;cursor:pointer;display:inline-block;font-size:14px;letter-spacing:.5px;padding:14px 36px;transition:box-shadow .15s ease,opacity .15s ease,-webkit-transform .15s ease;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease,-webkit-transform .15s ease}.welcome-cta>svg{font-size:14px;margin-right:16px;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.welcome-cta:hover{background-color:#464a53;transition:background-color .5s ease}.welcome-cta:active{opacity:.9;-webkit-transform:translateY(0);transform:translateY(0)}
/*# sourceMappingURL=main.6d0dcba5.css.map*/