/*
body {
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

#piano-disabled{
  background-image:url("/img/piano-disabled.png");
  background-repeat: no-repeat;
  width:311px;
  height:315px;
  display: block;
  position: absolute;
}
#piano-enabled{
  background-image:url("/img/piano-enabled.png");
  background-repeat: no-repeat;
  width:311px;
  height:315px;
  display: block;
  position: absolute;
}
*/
#btnPiano {
  background-image: url("/files/pau/tools/piano/img/piano-disabled.png");
            width: 310px;
            height: 320px;
            background-color: lightgray;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-image 1s ease-in-out;

            position: absolute;
            margin-left:68px;
            margin-top:-7px;
        }

#piano {
  width: 85%;
  max-width: 960px;
  position: relative;
}

.key {
  position: absolute;
  border-radius: 2px;
  cursor: pointer;
  z-index: 1;
}

.white-key {
  background-color: white;
  width: 3.4%;
  height: calc(85% - 30px);
  margin-left: -17%; /* Adjust for overlapping */
  top: 30px;
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.2);


}

.black-key {
  background-color: black;
  color: white;
  text-align: center;
  line-height: 1.6em; /* Center text vertically */
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.6);
  z-index: 2;


}

/* White keys layout */
.key.white-key {
  left: calc((n - 1) * 3.4%);
}

/* Black keys layout */
.key.black-key {
  width: 25%;
  height: 50%;
  margin-left: -17%; /* Adjust for overlapping */
  top: 10px;
}

/* Visual feedback for playing keys */
.playing {
  transform: scale(0.98);
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.4);
}