#piano{margin:auto;background:#000;border-radius:8px;width:95vw;position:absolute}#piano #screen-wrapper{width:100%;color:#fbfcf9;display:flex;justify-content:center;margin-bottom:-5vw}#piano #screen-wrapper #screen{min-width:40%;color:#333;background:#a3c4cb;padding:5px 20px;border-radius:10px;margin:20px;display:flex;justify-content:space-around}#piano #screen-wrapper #screen .sustain,#piano #screen-wrapper #screen .transposition{font-size:.7em}#piano #keys{margin:auto;position:relative;top:5vw;width:93.6vw}#piano #keys .legend-wrapper{background:#111}#piano #keys .legend{color:#fbfcf9;background:#224;line-height:1.2em;display:inline-block;transition:margin .25s;padding:5px 0;border-top-left-radius:4px;border-top-right-radius:4px;border:1px solid #ffe;border-bottom:0}#piano #keys .legend .legend-row.black{padding-left:.9vw}#piano #keys .legend:last-child{margin-right:-2px}#piano #keys .legend span{display:inline-block;text-align:center;width:1.8vw;transition:opacity .1s}#piano #keys .legend span.hide{opacity:.05}@media screen and (max-width:800px){#piano #keys .legend span{font-size:14px}}@media screen and (max-width:600px){#piano #keys .legend span{font-size:12px}}@media screen and (max-width:400px){#piano #keys .legend span{font-size:10px}}#piano #keys .key-row{display:flex;flex-wrap:nowrap;margin:auto}#piano #keys .key-row.black{padding-left:.6vw;position:relative;top:-10vw}#piano #keys .key{border:.5px solid #68767c;border-top:0;border-right:0;width:1.8vw;height:10vw;border-bottom-left-radius:3px;border-bottom-right-radius:3px;transition:background-color .1s;cursor:pointer}#piano #keys .key.white{background:#fbfcf9}#piano #keys .key.white:hover{background:#d5e7c1}#piano #keys .key.black{background:#0c1d24;box-shadow:inset -1px -2px 4px rgba(0,0,0,.5);height:6.5vw;width:1.2vw;margin-left:.6vw}#piano #keys .key.black:hover{background:#718273}#piano #keys .key.black.s1,#piano #keys .key.black.s6{margin-left:2.4vw}.columns{display:flex;flex-flow:row}.columns>*{margin-left:1em}code{white-space:nowrap;background:#0a3f5e;color:#a3c4cb;display:block;padding:.5em}.instruments{display:flex;flex-wrap:wrap;justify-content:space-between}.instruments>div{padding-left:2em;min-width:25%}.instruments li{cursor:pointer}@media screen and (max-width:900px){#piano{transform:scale(1)}}