:root{font-family:Satoshi,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;display:flex;justify-content:center;align-items:center;height:100vh;text-align:center}body{transition:background-color .3s ease}#chord{font-size:100px;height:150px;font-weight:500;opacity:.8}#notes{font-size:50px;height:75px;font-weight:500;opacity:.5}.keys{width:1092px;padding:2px 0 0 2px;overflow:hidden;background:#000;border-radius:0 0 4px 4px;margin-top:50px}.key{float:left;position:relative;width:50px;height:180px;margin:0 2px 2px 0;background:#fff;border-radius:0 0 4px 4px}.key.black{width:0;margin:0;z-index:2}.key.black:after{content:"";position:absolute;top:-2px;left:-16px;display:block;width:32px;height:117px;background:#000;border-radius:0 0 4px 4px;box-shadow:1px 1px #555,2px 2px #555}.key.black1:after{left:-20px}.key.black3:after{left:-16px}.key.black.pressed:after{background-color:#5c5c5c}.key.pressed{background:#ccc;box-shadow:inset 3px 2px 3px #999,inset -3px 2px 3px #999}