body{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;background:linear-gradient(135deg,#ce9ffc,#7367f0)}.container{display:flex;position:relative}.key{border:1px solid black;align-content:end;text-align:center;-webkit-user-select:none;user-select:none;cursor:pointer}.white-key{width:50px;height:200px;background-color:#fff}.black-key{height:100px;width:25px;background-color:#000;color:#fff;position:absolute;left:40px;font-size:.6em}[data-note="C#4"]{left:40px}[data-note="D#4"]{left:90px}[data-note="F#4"]{left:192px}[data-note="G#4"]{left:250px}[data-note="A#4"]{left:300px}.key:hover,.key.active{background-color:#a2c4e6}.black-key.pressed{background-color: #a2c4e6}