@import url(https://fonts.googleapis.com/css?family=Nunito:400,700);body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(217deg,rgb(144 229 255/80%),rgba(255,0,0,0) 90.71%),linear-gradient(127deg,rgb(255 195 213/80%),rgb(34 78 34/0) 70.71%),linear-gradient(336deg,rgba(241,232,105,.8),rgba(0,0,255,0) 70.71%);background-repeat:no-repeat;background-attachment:fixed;height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.key{float:left;position:relative;display:flex;align-items:flex-end;justify-content:center;cursor:pointer}.key span{font-size:.5rem;font-family:monospace;padding-bottom:4px}.white{height:4.59rem;width:1.96154rem;z-index:1;border-top:0 solid #aaa;border-bottom:0 solid #aaa;border-left:.03825rem solid #aaa;background-color:#fff}.black{height:2.5245rem;width:1.07885rem;z-index:2;border:.03825rem solid #222;border-top-width:0;background-color:#1c1c1c;border-bottom-right-radius:2px;border-bottom-left-radius:2px}.a,.b,.black,.d,.e,.g{margin:0 0 0 -.57767rem}.keyboard>.note:last-child{border-right:0 solid #aaa}.keyboard>.white:first-child{border-left:0 solid #aaa}.keyboard{box-shadow:0 0 0 5px #fc5185;border-radius:10px;overflow:hidden}.keyboard .highlight{background-color:#f0f7b3}*{font-family:Nunito}.App{text-align:center;height:100vh}.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{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}@-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)}}.score-container{border:2px solid #ff0}.black{margin-bottom:1rem}.row-controls>div:nth-of-type(2){flex:1 0 auto;width:6rem;cursor:pointer}.abcjs-inline-midi{height:100%;padding:0;align-items:center;justify-content:center;border-radius:0;background-color:#2fd566}.abcjs-midi-clock,.abcjs-midi-progress-background,.abcjs-midi-reset{display:none!important}span.row-controls div.abcjs-inline-midi button.abcjs-midi-start{width:100%;height:100%;display:inline-block;margin-right:0;float:none;cursor:pointer}.newcard-enter{opacity:0;-webkit-transform:translateY(-120%);transform:translateY(-120%)}.newcard-enter-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.newcard-enter-active,.newcard-exit{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.newcard-exit-active{opacity:0;-webkit-transform:translateY(120%);transform:translateY(120%);-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.card-enter{opacity:0;-webkit-transform:translateY(-120%);transform:translateY(-120%)}.card-enter-active,.card-exit{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}.card-exit-active{opacity:0;-webkit-transform:translateY(120%);transform:translateY(120%)}.row-enter{opacity:0;max-height:0}.row-enter-active{-webkit-transition:all .2s ease-in;transition:all .2s ease-in}.row-enter-active,.row-exit{opacity:1;max-height:11rem}.row-exit-active{opacity:0;max-height:0;-webkit-transition:all .2s ease-in;transition:all .2s ease-in}
/*# sourceMappingURL=main.35a6566f.chunk.css.map */