tonestyle.css

#mySidenav {
    position:fixed;
}
#mySidenav a {
  position: absolute; /* Position them relative to the browser window */
  left: -150px; /* Position them outside of the screen */
  transition: 0.3s; /* Add transition on hover */
  padding: 15px; /* 15px padding */
  width: 150px; /* Set a specific width */
  text-decoration: none; /* Remove underline */
  font-size: 20px; /* Increase font size */
  color: white; /* White text color */
  border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
  z-index:1;
}

#mySidenav a:hover {
  left: -10px; /* On mouse-over, make the elements appear as they should */
}

/* The about link: 20px from the top with a green background */
#ToneGen {
  top: 20px;
  background-color: #1560FB;
}

#DataAn {
  top: 80px;
  background-color: #231F20; /* Blue */
}

#phpTests {
  top: 140px;
  background-color: #807E7F; /* Red */
}

#contact {
  top: 200px;
  background-color: #041E42 /* Light Black */
}
    #toggle {
    text-decoration:none;
    margin:auto;
    border:0;
    padding:0;
    background:none;
    display:inline-block;
    width:100%;
    height:100%;
    font-family: 'Audiowide';
    font-size:50px;
    color:white;
    outline:none
}

#rouse {
    margin:auto;
    text-align:center;
    width:250px;
    height:75px;
    background-color:#3333ff;
    outline:none;
}
#controls {
    margin:auto;
    text-align:center;
    width:auto;
    height:auto;
    padding-top:40px;
    outline:none;
    border:none;
}
.frequency {
    text-decoration:none;
    text-align:center;
    margin:auto;
    border:none;
    padding:0;
    font-family: 'Audiowide';
    font-size:20px;
    outline:none;
}
input{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

}
.butt {
    text-decoration:none;
    text-align:center;
    margin:auto;
    border:none;
    padding:8px;
    font-family: 'Audiowide';
    font-size:12px;
    color:white;
    outline:none;
    background-color:#3333ff;
    border-radius:4px;
}
.adjustments {
    padding-bottom:30px;
}
#curve_chart {
    margin:auto;
}
#freqRange {
    width:400px;
}
#freqRange2 {
    width:400px;
}
#freqRange3 {
    width:400px;
}


.slidecontainer {
    width: 100%; /* Width of the outside container */
  }

  /* The slider itself */
  .slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
  }

  /* Mouse-over effects */
  .slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
  }

  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #807E7F; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }

  .slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #807E7F; /* Green background */
    cursor: pointer; /* Cursor on hover */
  }