html{
    display:block; 
    width: 100%; 
    height: 100%; 
    padding: 0px; 
    margin: 0px
}

body{
    display:block; 
    width: 100%; 
    height: 100%; 
    padding: 0px; 
    margin: 0px
}

.container {
    margin: 50px;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 50% 50%;
    grid-template-rows: 80% 20%;
    grid-template-areas:
        "display display"
        "control control";
}

.display {
    grid-area: display;

}

.controls {
    grid-area: control;
    justify-self: center;
    align-self: center;
}

input[type="range"] {
  display: block;
  -webkit-appearance: none;
  background-color: #bdc3c7;
  width: 300px;
  height: 5px;
  border-radius: 5px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  outline: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #e74c3c;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid white;
  cursor: pointer;
  transition: .3s ease-in-out;
}​
  input[type="range"]::-webkit-slider-thumb:hover {
    background-color: white;
    border: 2px solid #e74c3c;
  }
  input[type="range"]::-webkit-slider-thumb:active {
    background-color: #0080a7;
  }