.ReactPiano__Keyboard{position:relative;display:flex}.ReactPiano__Key{display:flex}.ReactPiano__Key--accidental{background:#555;border:1px solid #fff;border-top-color:transparent;border-radius:0 0 4px 4px;cursor:pointer;height:66%;z-index:1;position:absolute;top:0}.ReactPiano__Key--natural{background:#f6f5f3;border:1px solid #888;border-radius:0 0 6px 6px;cursor:pointer;z-index:0;flex:1 1;margin-right:1px}.ReactPiano__Key--natural:last-child{margin-right:0}.ReactPiano__Key--active{background:#3ac8da}.ReactPiano__Key--active.ReactPiano__Key--accidental{border:1px solid #fff;border-top-color:#3ac8da;height:65%}.ReactPiano__Key--active.ReactPiano__Key--natural{border:1px solid #3ac8da;height:98%}.ReactPiano__Key--disabled.ReactPiano__Key{cursor:progress}.ReactPiano__Key--disabled.ReactPiano__Key--accidental{background:#ddd;border:1px solid #999}.ReactPiano__Key--disabled.ReactPiano__Key--natural{background:#eee;border:1px solid #aaa}.ReactPiano__NoteLabelContainer{flex:1 1;align-self:flex-end}.ReactPiano__NoteLabel{font-size:12px;text-align:center;text-transform:capitalize;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ReactPiano__NoteLabel--accidental{color:#f8e8d5;margin-bottom:3px}.ReactPiano__NoteLabel--natural{color:#888;margin-bottom:3px}.ReactPiano__NoteLabel--natural.ReactPiano__NoteLabel--active{color:#f8e8d5}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}.App{text-align:center}.App-logo{-webkit-animation:App-logo-spin 20s linear infinite;animation:App-logo-spin 20s linear infinite;height:40vmin;pointer-events:none}.App-header{background-color:#282c34;min-height:130vh;indexdisplay: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)}}.page-container{background-image:-webkit-gradient(linear,left top,left bottom,from(#081b33),to(#2f4562));background-image:-webkit-linear-gradient(#081b33,#2f4562);background-image:linear-gradient(#081b33,#2f4562);height:contain;min-height:115vh;color:#fff}.container{width:80%;margin:auto;display:flex;flex-direction:column;align-items:center}.fretboard-section{display:flex;flex-direction:row}.headstock-main{display:flex}.scale-controls{display:flex;flex-direction:row;justify-content:space-around}button{max-width:200px}hr.divider{width:80%;margin:40px}.single-chord-list{display:flex;flex-direction:row;width:100%;justify-content:space-around}.singlechord{display:flex;flex-direction:column;align-items:center}.chord-section-controls{display:flex;flex-direction:7abcff row;justify-content:center}.scaletypes-container{display:flex}.selected{box-shadow:-1px 0 25px 7px #171517}.chord-section,.fretboard-section{color:#000!important;width:100%;display:flex;flex-direction:column}.hecrnt{border-radius:15px;padding:20px}