.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:#130f0d}#piano{width:100%;max-width:600px;height:300px;margin:16px auto;border-radius:20px 20px 8px 8px;overflow:hidden;background:black;-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 #824601}#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:#fd951f;-webkit-box-shadow:0 0 1rem #fd951f;box-shadow:0 0 1rem #fd951f}.key{-webkit-transition:-webkit-transform 80ms ease;transition:-webkit-transform 80ms ease;transition:transform 80ms ease;transition:transform 80ms ease, -webkit-transform 80ms ease}
/*# sourceMappingURL=main.css.map */