body {
    margin-top: 150px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

h1 {
    text-align: center;
    transform: skewX(-14deg);
    color:rgb(165, 132, 40); 
}

p { text-align: center; }

#omnichord-frame {
    margin-left: 100px;
    width: 85vw;
    height: 62vh;
    padding: 10px;
    padding-left: 20px;
    border: 1px solid black;
    transform: skewX(14deg);
    background-image: linear-gradient(to bottom, rgb(233, 225, 211), rgb(148, 140, 118));
    border-radius: 30px;
}

#keys {
    float: left;
}

.key-label {
    display: inline-block;
    width: 72px;
    padding: 10px;
    transform: skewX(-14deg);
}

.key {
    font-size: 20px;
    text-align: center;
    border: 1px solid black;
    display: inline-block;
    padding: 10px;
    padding-top: 20px;
    width: 50px;
    height: 36px;
    border-radius: 5px;
    margin: 10px;
}

.key:hover {
    filter: brightness(85%);
    cursor:pointer;
}

.key:active, .key.active {
    filter: brightness(50%);
}

.sliderbar:hover, .sliderbar.active {
    filter: brightness(80%);
    transition: 0.3s;
}

.type-label {
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    transform: skewX(-14deg);
    width: 50px;
}

#head { margin-left: 100px; }

.color0 { background-image: linear-gradient(to bottom, #eee, rgb(255, 253, 109) 50%) }
.color1 { background-image: linear-gradient(to bottom, #eee, rgb(109, 255, 133) 50%) }
.color2 { background-image: linear-gradient(to bottom, #eee, rgb(98, 224, 104) 50%) }
.color3 { background-image: linear-gradient(to bottom, #eee, rgb(255, 109, 109) 50%) }
.color4 { background-image: linear-gradient(to bottom, #eee, rgb(109, 136, 255) 50%) }
.color5 { background-image: linear-gradient(to bottom, #eee, rgb(255, 187, 109) 50%) }
.color6 { background-image: linear-gradient(to bottom, #eee, rgb(182, 212, 219) 50%) }
.color7 { background-image: linear-gradient(to bottom, #eee, rgb(91, 214, 91) 50%) }
.color8 { background-image: linear-gradient(to bottom, #eee, rgb(255, 109, 153) 50%) }
.color9 { background-image: linear-gradient(to bottom, #eee, rgb(109, 214, 240) 50%) }
.color10 { background-image: linear-gradient(to bottom, #eee, rgb(216, 163, 94) 50%) }
.color11 { background-image: linear-gradient(to bottom, #eee, rgb(195, 225, 236) 50%) }

.key .hint {
    color: #888;
}

#slider {
    float: right;
}

.sliderbar {
    background-image: linear-gradient(to bottom, rgb(233, 223, 205), rgb(231, 193, 78) 50%);
    border: 1px solid black;
    margin: 15px;
    height: 30px;
    padding-top: 10px;
    text-align: center;
    border-radius: 5px;
    width: 300px;
}

div.text, #settings {
    transform: skewX(-14deg);
}

label { margin: 10px; }