style.css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height:100vh;
    display:flex;
    justify-content: center;
    align-items:center;
    background-image:url('image/victorian-gaab88c7a8_1920.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
}
.container{
       /* border:2px solid rgb(201, 31, 31); */
       text-align: center;
       text-transform: uppercase;

}
.container h1{
    font-family: 'Courier New', Courier, monospace;
    /* border:2px solid rgb(201, 31, 31); */
    padding-bottom:3rem;
    font-size:3rem;
}
.key-container{
    /* border:2px solid rgb(0, 0, 0); */
    display: flex;
    flex-wrap: wrap;
    min-width:300px;
    height:fit-content;
    justify-content: space-evenly;
   
}
.key{
border:2px solid rgb(255, 255, 255);
width:70px;
height:70px;
margin-right:1rem;
display: flex;
flex-direction: column;
margin:0.5rem;
transition: all 0.3s;
box-shadow:0px 0px 10px 2px rgb(0, 0, 0);
}
.play{
    transform:scale(1.3);
    border: 2px solid rgb(255, 219, 14);
    box-shadow:0px 0px 10px 2px yellow;
    color:aqua;
    }


.key kbd{
    /* border:2px solid rgb(140, 232, 28); */
    text-align: center ;
    font-size:2rem;
    /* color:aqua; */
}
.sound{
    /* border:2px solid rgb(232, 0, 0); */
    text-align: center;
    text-transform: capitalize;
    font-weight:300;
    color:#ffffff;
}