#title{
    font-size: 4rem;
    justify-self: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: black;  
}
body{
    height: 100vh;
    background-image: url("./images/Piano.jpg");
}
button {
        border: 2px solid;
        width: 80px;
        display: inline-flex;
        justify-content: center;
        align-items: flex-end;
        font-size: 2REM;
        background-color: aqua;
    }


.white{
    
    color: black;
    height: 500px;
    border-radius: 20px;
}

.wBack{
background-image: radial-gradient(antiquewhite 70%, black);
}

.bBack {
background-image: radial-gradient(black 75%, antiquewhite);
}

.black{
    color: antiquewhite;
    height: 300px;
    border: solid 1px antiquewhite;
    border-radius: 20px;
}
.white-keys{
    display: flex;
    z-index: -1;
    justify-self: center;
    
}
.black-keys{
    top: -70px;
    display: flex;
    z-index: 1;
    justify-self: center;
    position: absolute;
    padding-top: 300px;
    padding-left: 10px;
    
}

#Db4 {
    margin-right: 80px;
}

#Ab4 {
    margin-right: 80px;;
}

#Db5 {
    margin-right: 80px;
}

#DJ {
    display: flex;
    font-size: 2rem;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border-radius: 50px;
    height: 50px;
    align-items: center;
    background-image: url("./images/DJ.jpg");
    color: none;
    text-decoration: none;
    
}

.pressed {
    background-image: radial-gradient(orange 80%, antiquewhite);
}