body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100%;
  background-color: #181a1b;
  color: #c8c3bc;
}

#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

h1 {
  width: 100%;
  text-align: center;
  margin: 10px;
  color: #e8e6e3;
}
#effort h1 {
  margin-top: 0px;
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  header {
      background-image: url('/logo_original-wide-color-small.png');
      width: 100%;
      height: 50px;
      background-size: 237px 36px;
      background-repeat: no-repeat;
      background-position: center;
    }
}

section {
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 20px;
  border-bottom: #383c3f;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

#sliders {
  display: flex;
  flex-direction: column;
  column-gap: 20px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.slider-container {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  width: 90%;
}

.slider-label {
  flex: 1;
  text-align: left;
  margin-bottom: 5px;
  margin-left: 10px;
  width: 35%;
}

.slider {
  /* flex: 1; */
  -webkit-appearance: none;
  /* Override default CSS styles */
  appearance: none;
  width: 65%;
  /* Specified to be the full width of the flex-item */
  height: 15px;
  border-radius: 5px;
  background: #292d2e;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
  /* Fully opaque on hover */
}

.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 */
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
  /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px;
  /* Set a specific slider handle width */
  height: 25px;
  /* Slider handle height */
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
  /* Cursor on hover */
}

.slider-value {
  flex: 0 0 20%;
  /* Do not grow, do not shrink, start at 20% width */
  text-align: left;
  margin-left: 20px;
  font-weight: bold;
}

.metrics {
  display: flex;
  flex-direction: row;
  column-gap: 20px;
  justify-content: center;
  width: 100%;
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #c8c3bc;
}

.value {
  font-size: 2.5em;
  color: #c8c3bc;
}

.unit {
  font-size: 0.85em;
  color: #c8c3bc;
}

#distance-walked {
  padding-top: 15px;
}

/* Style the map container to have a specific size */
#map {
  width: 100%;
  flex: 0 1 250px;

}