#piano{
    display:flex;
    position:relative;
    width:420px;
    height:200px;
    gap: 1px;
}



.white-key{
    width:60px;
    height:200px;
    object-fit:cover;
    user-select:none;
    cursor: url('https://cdn.cursors-4u.net/previews/heart-with-headphone-9d92a94f-32.webp') 32 32, auto !important;
}
.white-key:hover{
   filter: brightness(150%);
 }
.white-key:active{
    transform:translateY(3px);
}
.black-key{
    position:absolute;
    z-index:10;

    width:40px;
    height:120px;

    background-image:url("black-key.png");
    background-size:100% 100%;
    background-repeat:no-repeat;

     cursor: url('https://cdn.cursors-4u.net/previews/heart-with-headphone-9d92a94f-32.webp') 32 32, auto !important;
}
.black-key:hover{
   filter: brightness(150%);
 }

.black-key:active{
    transform:translateY(2px);
    filter:brightness(0.8);
}

.bk1{left:40px;}
.bk2{left:100px;}
.bk3{left:220px;}
.bk4{left:280px;}
.bk5{left:340px;}



.barra{
     background: linear-gradient(
    to bottom,
      #ffc2d9 0%,
    #ff4b87 45%,
    #ff85b4 100%
  );

  border-top: 1px solid #ffffff;
  border-left: 1px solid  #ffffff;
  border-right: 1px solid #740030;
  border-bottom: 1px solid #740030;


  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(255, 46, 144, 0.904),
    0 0 8px rgba(0, 0, 0, 0.801);
    padding: 10px;
}




.barrapiano{
    border-radius: 40px;
    background:
linear-gradient(
    225deg,
    transparent 47%,
    red 48%,
    orange 52%,
    yellow 56%,
    lime 60%,
    cyan 64%,
    blue 68%,
    magenta 72%,
    transparent 73%
),
linear-gradient(
    to bottom,
    #ffc6e2cc 0%,
    #ff579d 45%,
    #ff004c 100%
);

  border-top: 1px solid #ff195e;
  border-left: 1px solid  #ffffff;
  border-right: 1px solid #740030;
  border-bottom: 1px solid #740030;


  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(255, 46, 144, 0.904),
    0 0 8px rgba(0, 0, 0, 0.801);
    padding: 10px;
}