.black{
    box-shadow:1px 0 #777,
    0 2px 0 #777,    0 3px 0 #666,
    0 4px 0 #555,    0 5px 0 #444,
    0 6px 1px rgba(0,0,0,0.1),    0 0 5px rgba(0,0,0,0.1),
    0 1px 3px rgba(0,0,0,0.3),    0 3px 5px rgba(0,0,0,0.2),
    0 5px 10px rgba(0,0,0,0.25),    0 10px 10px rgba(0,0,0,0.2),
    0 20px 20px rgba(0,0,0,0.15);

    -webkit-box-shadow:1px 0 #777,
    0 2px 0 #777,0 3px 0 #666,    0 4px 0 #555,0 5px 0 #444,
    0 6px 1px rgba(0,0,0,0.1),    0 0 5px rgba(0,0,0,0.1),
    0 1px 3px rgba(0,0,0,0.3),    0 3px 5px rgba(0,0,0,0.2),
    0 5px 10px rgba(0,0,0,0.25),    0 10px 10px rgba(0,0,0,0.2),
    0 20px 20px rgba(0,0,0,0.15);

    -moz-box-shadow:1px 0 #777,
    0 2px 0 #777,0 3px 0 #666,    0 4px 0 #555,0 5px 0 #444,
    0 6px 1px rgba(0,0,0,0.1),    0 0 5px rgba(0,0,0,0.1),
    0 1px 3px rgba(0,0,0,0.3),    0 3px 5px rgba(0,0,0,0.2),
    0 5px 10px rgba(0,0,0,0.25),    0 10px 10px rgba(0,0,0,0.2),
    0 20px 20px rgba(0,0,0,0.15);

    -ms-box-shadow:1px 0 #777,
    0 2px 0 #777,0 3px 0 #666,    0 4px 0 #555,0 5px 0 #444,
    0 6px 1px rgba(0,0,0,0.1),    0 0 5px rgba(0,0,0,0.1),
    0 1px 3px rgba(0,0,0,0.3),    0 3px 5px rgba(0,0,0,0.2),
    0 5px 10px rgba(0,0,0,0.25),    0 10px 10px rgba(0,0,0,0.2),
    0 20px 20px rgba(0,0,0,0.15)
}
   
.black:active{
    box-shadow:1px 0 #555,
    0 1px 0 #555,0 1px 0 #444,0 2px 0 #333;
    
    -webkit-box-shadow:1px 0 #555,
    0 1px 0 #555,   0 1px 0 #444,    0 2px 0 #333;
    
    -moz-box-shadow:1px 0 #555,
    0 1px 0 #555,0 1px 0 #444,0 2px 0 #333;
    
    -ms-box-shadow:1px 0 #555,
    0 1px 0 #555,0 1px 0 #444,0 2px 0 #333
}
    
.white:active{
box-shadow:-1px 0 15px rgba(0,0,0,0.7)inset;

-webkit-box-shadow:-1px 0 15px rgba(0,0,0,0.7) inset;

-moz-box-shadow:-1px 0 15px rgba(0,0,0,0.7) inset;

-ms-box-shadow:-1px 0 15px rgba(0,0,0,0.7) inset}

*{margin:0;padding:0;
  -webkit-box-sizing:border-box;box-sizing:border-box}
  body{background-color:#222}
  #piano{
      width:100%;max-width:600px;height:300px;margin:16px auto;
      border-radius:20px 20px 8px 8px;overflow:hidden;
      background:rgba(84, 167, 206, 0.253);
      -webkit-box-shadow:0px 0px 10px 10px rgba(0,0,0,0.12);
      box-shadow:0px 0px 10px 10px rgba(0,0,0,0.12);
      border:1px solid #f1f1f1}
      
   #piano-container{
      width:95%;height:230px;margin:60px auto 0 auto;
      display:-webkit-box;display:-ms-flexbox;display:flex}
      
   #piano-container li{
       width:14.28%;height:100%;list-style-type:none;
       position:relative;display:-webkit-box;
       display:-ms-flexbox;display:flex}
       
.white{
    width:100%;height:100%;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.5);
    box-shadow:0 1px 1px rgba(0,0,0,0.5);position:relative;z-index:1;
    background:#f0f0f9}.black{position:absolute;right:-35%;z-index:2;width:70%;
    height:120px;background:#000}.playing{-webkit-transform:scale(0.98);
    transform:scale(0.98);border-color:#f1f1f1;-webkit-box-shadow:0 0 1rem #f1f1f1;
    box-shadow:0 0 1rem #f1f1f1}.key{-webkit-transition:-webkit-transform 80ms ease;
    transition:-webkit-transform 80ms ease;transition:transform 80ms ease;
    transition:transform 80ms ease, -webkit-transform 80ms ease}