body{
    margin:0;
    padding:0;
    font-family:arial, sans-serif;
    width:100%;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /*background:linear-gradient(180deg, #eee 0%, #fff 100%);*/
    background:linear-gradient(180deg, #000 0%, #333 100%);
    font-family: verdana, sans-serif;
    font-size:0.9vw;
    overflow:hidden;
}

.instructions{
    position:absolute;
    bottom:5vh;
    left:50%;
    transform:translateX(-50%) scale(1);
    background: #5d9612;
    padding:0.6vw;
    border-radius:8px;
    box-shadow: 0px 4px 4px rgba(0,0,0,0.5);
    color:white;
    transition: 0.5s all;
    display:flex;
    align-items:center;
}
.instructions > span{
    font-size:1.6vw;
    margin-right:0.3vw;
}
.instructions-hide{
    opacity:0;
}

.instruments-container{
    position: relative;
    width:100vw;
    height:100vh;
    overflow:hidden;
    display:flex;
    justify-content: center;
    align-items:center;
}

.keyboard{    
    width:20vw;
}

.ib{
    display:inline-block;
    vertical-align:top;
}

.voice-level-meter{
    width:4vw;
    height:8vw;
    background:#ccc;
    display:inline-block;
    position: relative;
}
.voice-level-meter > div{
    background:red;
    width:100%;
    position:absolute;
    bottom:0;
}

.voice-filter-meter{
    width:4vw;
    height:8vw;
    background:#ccc;
    display:inline-block;
    position: relative;
}
.voice-filter-meter > div{
    background:#0066ff;
    width:100%;
    position:absolute;
    bottom:0;
}

.meter-container{
    border-radius:1vw;
    padding:1vw;
    border:1px solid #ccc;
    display:inline-block;
}

input[type=range] {
    
}