/* piano */

.pianopiano {
  display:flex;
  height: 50vh;
  width: 90vw;
  justify-content: space-around;
  align-items: center;
}

.pianoF {
  height: 100vh;
  width: 12.5%;
  /* border: solid 2px black; */
  animation-name: pianoF;
  animation-duration: 0.2s;
  border-radius: 100px;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.pianoG {
  height: 100vh;
  width: 12.5%;
  /* border: solid 2px black; */
  animation-name: pianoG;
  animation-duration: 0.2s;
  border-radius: 20px;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0.6s;
  animation-direction: alternate;

}

.pianoA {
  height: 100vh;
  width: 12.5%;
  /* border: solid 2px black; */
  animation-name: pianoA;
  animation-duration: 0.2s;
  border-radius: 20px;
  animation-iteration-count: infinite;
  animation-delay: 0.9s;
  animation-direction: alternate;
  
}

.pianoB {
  height: 100vh;
  width: 12.5%;
  /* border: solid 2px black; */
  animation-name: pianoB;
  animation-duration: 0.2s;
  border-radius: 20px;
  animation-iteration-count: infinite;
  animation-delay: 1.2s;
  animation-direction: alternate;
  
 
}

.pianoC {
  height: 100vh;
  width: 12.5%;
  /* border: solid 2px black; */
  animation-name: pianoC;
  animation-duration: 0.2s;
  border-radius: 20px;
  animation-iteration-count: infinite;
  animation-delay: 1.5s;
  animation-direction: alternate;
  
}

.pianoD {
  height: 100vh;
  width: 12.5%;
  /* border: solid 2px black; */
  animation-name: pianoD;
  animation-duration: 0.2s;
  border-radius: 20px;
  animation-iteration-count: infinite;
  animation-delay: 1.8s;
  animation-direction: alternate;
  
}

.pianoE {
  height: 100vh;
  width: 12.5%;
  /* border: solid 2px black; */
  animation-name: pianoE;
  animation-duration: 0.2s;
  border-radius: 20px;
  animation-iteration-count: infinite;
  animation-delay: 2.1s;
  animation-direction: alternate;

}

@keyframes pianoF {
  0%   {background-color: white;}
  100% {background-color: rgb(33, 50, 116);height: 300px;}
  
}

@keyframes pianoG {
  0%   {background-color: white;}
  100% {background-color: rgb(27, 99, 206);border-radius: 100px;height: 300px;}
  
}

@keyframes pianoA {
  0%   {background-color: white;}
  100% {background-color: rgb(33, 50, 116);border-radius: 100px;height: 300px;}
  
}

@keyframes pianoB {
  0%   {background-color: white;}
  100% {background-color: rgb(0, 0, 255);border-radius: 100px;height: 300px;}
  
}

@keyframes pianoC {
  0%   {background-color: white;}
  100% {background-color: rgb(33, 50, 116);border-radius: 100px;height: 300px;}
  
}

@keyframes pianoD {
  0%   {background-color: white;}
  100% {background-color: rgb(27, 99, 206);border-radius: 100px;height: 300px;}
  
}

@keyframes pianoE {
  0%   {background-color: white;}
  100% {background-color: rgb(33, 50, 116);border-radius: 100px;height: 300px;}
  
}