body{
    background-image:url("https://images.unsplash.com/photo-1619983081563-430f63602796?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
.keys{
    width: 150vh;
    min-height: 95vh;
    display:flex;
    align-items: center;
    justify-content: center;
    margin-left: 5rem;
   
}
.key{
    border:4px solid black;
    border-radius:5px ;
    margin: 1rem;
    font-size: 1.5rem;
    padding: 1rem .5rem;
    transition: all .07s;
    width:100px;
    height:4rem;
    text-align: center;
    color: white;
    background: rgba(0, 0, 0 , 0.4);
    text-shadow: 0 0 5px black;
}
kbd{
    margin: 0.7em;
    font-size: 40px;
    font-weight: 700;
    color: white;
    opacity: 1;
}
.sound{
    display: block;
    margin: 0.5rem auto 0.6rem 0.6rem;
    color: gold;
    font-weight: 500;
    opacity: 1;

}
.playing{
    transform: scale(1.1);
    border-color: #ffc600;
    box-shadow: 0 0 10px #ffc600;
}