*, *::before, *::after{
    box-sizing: border-box;
}

body{
    background-color: rgb(51, 51, 192);
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.keyorders{
    position: absolute;
    
    top: 8px;
    border: 2px solid grey;
    color: #050554;
    background-color: #e3dbeb;
    font-family: 'Titillium Web', sans-serif;
    font-family: 'Updock', cursive;
    font-weight: bold;
    font-size: large;
}
.piano{
    display: flex;
}
.key{
    
    border: 1px solid rgb(114, 19, 19);
    border-radius: 5px;
    
}
.white{
    width: 112px;
    height: 396px;
  background-color: azure;
   
}
.white.active{
background-color: rgb(86, 153, 211);
}
.black{
    width: 56px;
    height: 245px;
  background-color: rgb(8, 10, 10);
  
  margin-left: -30px;
  margin-right: -30px;
  z-index: 1;
  border-radius: 15px;

}

.black.active{
    background-color: rgb(92, 95, 97);
    }