* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     background: #000;
     font-family: sans-serif;
     overflow: hidden;
 }

 .piano-hero {
     display: flex;
     width: 100vw;
     height: 100vh;
     position: relative;
     border-top: 20px solid #222;
 }

 .white-key {
     flex: 1;
     background: linear-gradient(#eee, #fff);
     border: 1px solid #000;
     cursor: pointer;
     z-index: 1;
     border-radius: 0 0 5px 5px;
 }

 .white-key:active {
     background: #ddd;
 }

 .black-key {
     width: 3vw;
     height: 60vh;
     background: linear-gradient(#444, #000);
     position: absolute;
     z-index: 2;
     margin-left: -1.5vw;
     border-radius: 0 0 3px 3px;
     cursor: pointer;
 }

 .black-key:active {
     background: #222;
 }

 .db1 {
     left: 7.14%;
 }

 .eb1 {
     left: 14.28%;
 }

 .gb1 {
     left: 28.56%;
 }

 .ab1 {
     left: 35.70%;
 }

 .bb1 {
     left: 42.84%;
 }

 .db2 {
     left: 57.12%;
 }

 .eb2 {
     left: 64.26%;
 }

 .gb2 {
     left: 78.54%;
 }

 .ab2 {
     left: 85.68%;
 }

 .bb2 {
     left: 92.82%;
 }

 h1 {
     position: absolute;
     top: 5%;
     left: 50%;
     transform: translateX(-50%);
     color: rgba(0, 0, 0, 0.2);
     font-size: 10vw;
     pointer-events: none;
     z-index: 100;
     text-transform: uppercase;
 }