.piano-container{
  z-index: 0;
  height: 45%;
  position: absolute;
  bottom: 1%;
  left: 30%;
  right: 30%;
  outline: solid;
}

.white-key{
    border:none;
    outline: solid 1px black;
    width: calc(100% / 7);
    bottom: 0;
    background-color: white;
    height: 100%;
}

.black-key{
    border: none;
    z-index: 1;
    width: calc(60% / 7);
    height: 70%; 
    background-color: rgb(0, 0, 0);
    position:absolute;
    transform: translate(-50%); 
    top: 0;
    color: white;
    border-bottom-right-radius: 10px; 
    border-bottom-left-radius:  10px;     
  
}

.clicked{

  background-color: rgb(196, 196, 196);
}

.black-key.clicked{
  background-color: rgb(61, 61, 61);
}

@media (max-width: 768px) { 
 .piano-container{
  right: 2%;
  left: 2%;
 }
}