@charset "UTF-8"


#octave-piano .spacer {
   margin-bottom:2em;
}#octave-piano #displaybutton{font-size:18px;width:160px;height:40px;background-color:#00c;color:#fff;border-radius:5px;margin-left:50px;margin-top:10px;margin-bottom:2em;border:none}#octave-piano #clefbutton{font-size:18px;width:140px;height:40px;background-color:#f39;color:#fff;border-radius:5px;margin-top:10px;border:none}#octave-piano .staff{position:relative;width:100%;height:5em;margin-left:10px}#octave-piano .G-clef{position:absolute;left:-40px;top:-81px;width:120px;height:220px}#octave-piano .G-clef svg{width:110%;height:110%}#octave-piano .F-clef{position:absolute;left:-30px;top:-80px;width:120px;height:220px}#octave-piano .F-clef svg{width:100%;height:100%}#octave-piano .line{border-top:2px solid #000;width:105%;height:1em}#octave-piano .line:nth-child(1) {top:20px}#octave-piano .line:nth-child(2) {top:35px}#octave-piano .line:nth-child(3) {top:50px}#octave-piano .line:nth-child(4) {top:65px}#octave-piano .line:nth-child(5) {top:80px}#octave-piano .note{position:absolute;width:16px;height:14px;background:#000;border-radius:50%;transition:opacity .3s}#octave-piano .keyboard{width:180%;position:relative;margin-left:10px;margin-top:2em}#octave-piano #keyboardG{display:block}#octave-piano #keyboardF{display:none}#octave-piano .whitekey{position:relative;width:6%;height:240px;text-align:center;display:inline-block;border:1px solid #000;z-index:1}#octave-piano .whitekey:hover{background-color:#eee}#octave-piano .blackkey{position:absolute;width:5%;height:140px;text-align:center;display:inline-block;margin-left:-2.5%;background-color:#000;color:#fff;z-index:2;box-sizing:border-box}#octave-piano .blackkey:hover{background-color:#666}#octave-piano .keyboard .text{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);font-size:14px}#octave-piano .blackkey .text{position:absolute;bottom:5px;left:0;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center}#octave-piano .whitekey .text{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);font-size:14px}#octave-piano .blackkey .label{position:absolute;bottom:10px;left:50%;width:50%;display:flex;flex-direction:column;align-items:center;font-size:14px;line-height:1.1}#octave-piano .blackkey .label span{position:static;transform:none;white-space:nowrap}#octave-piano .is-clicked{color:transparent}#octave-piano .ledger{position:absolute;width:30px;height:2px;background:#000}#octave-piano .blackkey .sharp{position:absolute;left:-14px;top:-6px;font-size:14px}#octave-piano .note .sharp{position:absolute;left:-16px;top:-6px;font-size:24px}