#range{
    background-color:#0096FF ;
    width:430px;
    height:62px;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-top:5rem;
    border-radius: 10px;
    border: 3px solid white
}
input[type ='range']{
    display:block;
}
input[type ='range']::-webkit-slider-runnable-track {
    height:12px;
    background-color:gray;
    border-radius:100px;
    border:2px solid white
}
input[type ='range']::-webkit-slider-thumb {
    height:20px;
    width:30px;
    margin-top:-4px;
    pointer-events: auto;
}

#slider{
    overflow:hidden;
    color:black;
    background-color:black;
}


@media only screen 
and (min-width : 280px) and (max-width:500px) {
  #range{
      width:220px;
  }
  #input-field{
    width:200px;
  }
  #generator{
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  button{
    margin-top:2rem;
    margin-left: 0;
  }
}