#graph {
    position: relative;
    padding-top:1vw;
    height: 25vw;
    margin-left:auto;
    margin-right:auto;
}


#que{
    position: relative;
    font-family:arial;
    /* font-size: 1.5vw; */
    padding:1vw;
}
#legend {
    position: absolute;
}

.legend span{
    float: left;
    width: 3.5vw;
    height: 0.5vw;
    margin-right: 0.5vw;
    border-radius: 0%;
    border:0vw;
    margin-top:0.175vw;
}

.legend .lim {
    background-color: #83F52C;
    border-radius: 0%;
    width: 3.2vw;
    margin-top: 2.8%;
    height: 0.35vw;
    border: 0vw solid grey;
}  
.legend .blac {
    background-color: black;
    border-radius: 0%;
    width: 3.2vw;
    margin-top: 2.8%;
    height: 0.35vw;
    border: 0vw solid grey;
}
.legend .grey {
    background-color: grey;
    border-radius: 0%;
    width: 3.2vw;
    margin-top: 2.8%;
    height: 0.35vw;
    border: 0vw solid grey;
}  
.legend .vio {
    background-color: darkblue;
    border-radius: 0%;
    width: 3.2vw;
    margin-top: 2.8%;
    height: 0.35vw;
    border: 0vw solid grey;
}  
.legend .blu {
    background-color: #2C9AD1;
    border-radius: 0%;
    width: 3.2vw;
    margin-top: 2.8%;
    height: 0.35vw;
    border: 0vw solid grey;
}
.legend .brow{
    background-color: brown;
    border-radius: 0%;
    width: 3.2vw;
    margin-top: 2.8%;
    height: 0.35vw;
    border: 0vw solid grey;
}

#instruction {
    position: relative;
    margin-top:1vw;
    left: 35%;
    height: 9vw;
}
.buttons {
    display: block;
    width: 100%;
    text-align: center;
    position:relative;
    overflow: auto;
    z-index: 1;  
}

.buttons button{
    z-index: 1;
    width: 15%;
}

#ranger {    
    position: relative;
    /* font-size: 1.5vw; */
    width:40%;
    z-index: 1;
    margin-left:auto;
    margin-right:auto;
}

.slider{
    width:30%;
}