#app{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}nav{padding:30px}nav a{font-weight:700;color:#2c3e50}nav a.router-link-exact-active{color:#42b983}.test-button[data-v-2dfe0987]{width:50px;height:50px}.piano[data-v-2dfe0987]{padding:50px 10px 0 10px;background-color:#363c4a;border-radius:15px 15px 0 0;display:flex;align-items:flex-start;justify-content:center}.key[data-v-2dfe0987]{width:60px;cursor:pointer;transition:all .3s}.white[data-v-2dfe0987]{height:220px;background-color:#fff;border:5px solid #363c4a;border-bottom:5px solid #dfd3d3;z-index:1}.white[data-v-2dfe0987]:active{border-bottom:none;background-color:#dfd3d3}.black[data-v-2dfe0987]{width:30px;height:130px;background-color:#363c4a;z-index:2;margin-left:-15px;margin-right:-15px;border-bottom:5px solid #5d5e67}.black[data-v-2dfe0987]:active{border-bottom:none}