*{
    box-sizing: border-box;
}

.set {
    background: #008080;
}

ul {
    height: 18em;
    width: 34em;
    margin: 5em auto;
    padding: 3em 0 0 3em;
    position: absolute;
    top: 50%;
    left: 0%;
    right: 0;
    border: 1px solid #011316;
    border-radius: 1em;
    background: linear-gradient(to bottom right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5) inset, 0 1px rgba(212, 152, 125, 0.2) inset, 0 5px 15px rgba(0, 0, 0, 0.5);
}

li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    float: left;
}

ul .white {
    height: 13em;
    width: 4em;
    z-index: 1;
    border-left: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    border-radius: 0 0 5px 5px;
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 0 0 5px #ccc inset, 0 0 3px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom, #eee 0%, #fff 100%);
}

ul .white:active {
    border-top: 1px solid #777;
    border-left: 1px solid #999;
    border-bottom: 1px solid #999;
    box-shadow: 2px 0 3px rgba(0, 0, 0, 0.1) inset, -5px 5px 20px rgba(0, 0, 0, 0.2) inset, 0 0 3px rgba(0, 0, 0, 0.2);
    background: linear-gradient(to bottom, #fff 0%, #e9e9e9 100%);
}

.black {
    height: 8em;
    width: 2em;
    margin: 0 0 0 -1em;
    z-index: 2;
    border: 1px solid #000;
    border-radius: 0 0 3px 3px;
    box-shadow: -1px -1px 2px rgba(255, 255, 255, 0.2) inset, 0 -5px 2px 3px rgba(0, 0, 0, 0.6) inset, 0 2px 4px rgba(0, 0, 0, 0.5);
    background: linear-gradient(45deg, #222 0%, #555 100%);
}

.black:active {
    box-shadow: -1px -1px 2px rgba(255, 255, 255, 0.2) inset, 0 -2px 2px 3px rgba(0, 0, 0, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
    background: linear-gradient(to right, #444 0%, #222 100%);
}


  /* Add margin to white keys that have black keys on the left */
.a,.b,.g,.d,.e {
    margin:0 0 0 -1em
}


  /* First and last white keys with rounded edges */
ul li:first-child {
    border-radius: 5px 0 5px 5px; /* First white key (C4) */
}

ul li:last-child {
    border-radius: 0 5px 5px 5px; /* Last white key (B4) */
}

.item-buttons{
    
}

.Piano-btn {
    background-color: #175357;
    /*border-color: linear-gradient(to right, #444 0%, #222 100%);*/
    color: #fff;
    border-radius: 20px;
    position: relative;

}

#oct {
    vertical-align: middle;
    top: -20px;
    right: 120px;
}

#inst{
    top: -20px;
    right: -10px;
}

#hide {
    top: -20px;
    right: -14%;
    z-index: 2;
}

#hidden {
    position: -webkit-sticky;
    top: 355px;
    right: -11%;
    z-index: 2;
}

#keyboard{
    position: absolute;
}