.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: #92e5fc;
    -webkit-box-shadow: 0 0 1rem #92e5fc;
    box-shadow: 0 0 1rem #92e5fc
}

.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 */