:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;background-color:#fff;text-align:center}.pianoElement{border-radius:10px;width:fit-content;background-color:#181818;padding:50px 20px 10px;display:flex;flex-direction:column;margin:auto;justify-content:center}.button{display:flex;flex-direction:column;margin-top:10px;height:60px;-webkit-user-select:none;user-select:none}.button img{margin:auto;width:45px;transition:width .2s}.button img:hover{width:50px}.button img:active{width:47px}.pianoStripe{width:100%;height:10px}#button{display:flex;position:relative;bottom:30px;align-items:center}#pianoButton{background-color:#575757;width:30px;height:15px}#light{width:10px;height:10px;background-color:#da5959;margin-left:10px;border-radius:100%}#red{background-color:#7e0000}#gray{background-color:#575757;display:flex;position:relative;bottom:10px}.pianoKeyboard{padding:0 4px;background-color:#999;width:fit-content;display:flex;-webkit-user-select:none;user-select:none;margin:auto;justify-content:center;gap:3px}.keyWrapper{display:flex}.black{z-index:10;position:absolute;padding:0 4px 2px;transform:translate(17px)}.white{z-index:9;position:relative}.closestMatch{padding:10px;margin:auto;display:flex;flex-direction:column}.closestMatch h1,.closestMatch h2,.closestMatch h3{margin:0}.closestMatch .grayText{color:#535353}.chordDisplay .otherMatches{background-color:#ddd;border-radius:10px;max-height:107px;overflow-y:auto;margin:auto;text-align:center;width:525px}.chordDisplay .otherMatches ul{margin:0;list-style-type:none;padding:0!important}.chordDisplay .otherMatches li{cursor:pointer;margin:3px auto;color:#575757}.chordDisplay .otherMatches li:hover{color:#000}.chordDisplay .otherMatches h3{margin:5px}.checkbox{width:fit-content;margin:10px auto;display:flex;align-content:center;gap:5px}.checkbox input[type=checkbox]{width:15px;margin:0}#morebutton{background-color:#fff;border-radius:10px;padding:10px;cursor:pointer;color:#1d2847}.chordDisplasy{background-color:#fff;border-radius:10px;margin:10px auto auto;width:515px;height:89px;display:flex;justify-content:space-between;text-align:center;justify-content:center;align-items:center;padding:20px}.chordDisplasy .otherMatches{text-align:center;width:40%}.chordDisplasy .otherMatches ul{list-style-type:none;padding:0!important}.chordDisplasy h1,.chordDisplasy h2,.chordDisplasy h3{margin:0}.chordDisplasy .grayText{color:#535353}.buttons{display:flex;gap:10px;width:fit-content;margin:auto}@media only screen and (max-width:600px){.pianoKeyboard{justify-content:left}.chordDisplay .otherMatches{width:454px}.octave2{display:none}}@media only screen and (max-width:490px){.pianoKeyboard{width:216px;justify-content:left}.chordDisplay .otherMatches{width:244px}.octave1{display:none}}