body{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;background:linear-gradient(135deg,#13f1fc,#0470dc)}h1{background:#959595;background:linear-gradient(to right,#959595,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.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;font-size:.8em}[data-note="C#4"]{left:40px}[data-note="D#4"]{left:92px}[data-note="F#4"]{left:192px}[data-note="G#4"]{left:250px}[data-note="A#4"]{left:300px}