body {
    display:flex;
    height: 100vh;
    width: 100vw;
    justify-content: space-around;
    align-items: center;
    font-family: 'Audiowide';
    font-size: 100%;
}

.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;
    text-align: center;
}

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

}

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

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

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

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

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

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

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

@keyframes pianoA {
    0%   {background-color: white;}
    100% {background-color: rgb(0, 0, 255);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(0, 0, 255);border-radius: 100px;height: 300px;}
    
  }

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

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



.rhythm {
    position: absolute;
    font-family: 'Audiowide';
    font-size: 400%;
    list-style-type: none;
}

li a.link {
    color: black;
    text-decoration: none;
    margin: auto;
}
  
li a.link:hover {
    background-color: black;
    color: white;
    border-radius: 15px;
    padding: 40px;
}

.pianoF:hover {
    background-image: url(https://source.unsplash.com/random/?rhythm); 
    width: 100%;
}

.pianoG:hover {
    background-image: url(https://source.unsplash.com/random/?soul);
    width: 100%; 
}

.pianoA:hover {
    background-image: url(https://source.unsplash.com/random/?dancer); 
    width: 100%;
}

.pianoB:hover {
    background-image: url(https://source.unsplash.com/random/?mind); 
    width: 100%;
}

.pianoC:hover {
    background-image: url(https://source.unsplash.com/random/?voice); 
    width: 100%;
}

.pianoD:hover {
    background-image: url(https://source.unsplash.com/random/?air); 
    width: 100%; 
}

.pianoE:hover {
    background-image: url(https://source.unsplash.com/random/?feelings);
    width: 100%;
}