html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 90px; /* Margin bottom by footer height */
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px; /* Set the fixed height of the footer here */
  /*line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

#roast_level {
  width: 100%;
  height: 20px;
  background: linear-gradient(to right, #D2B48C, #A0522D, #6F4E37, #4B3621);
  border-radius: 10px;
  appearance: none;
}

#roast_level::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: #333;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid white;
}

#roast_level::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #333;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid white;
}

#batch_size {
  width: 100%;
  height: 20px;
  background: #4B3621;
  border-radius: 10px;
  appearance: none;
}