body {
  background-color: #ffffff;
  background-image: url("https://cdn.pixabay.com/photo/2013/07/12/18/31/yoga-153436_640.png");
  overflow: hidden;
}

.range__wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 560px;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 0 100px rgba(0, 0, 0, 0.2);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  overflow: hidden;
}

.range__input {
  display: none;
}

.range__slider {
  position: absolute;
  left: 0;
  top: 0;
}

.range__slider__path {
  fill: #1215a1;
}

.range__marks__path {
  fill: none;
  stroke: inherit;
  stroke-width: 1px;
}

.range__marks__pink {
  stroke: #1215a1;
}

.range__marks__white {
  stroke: white;
}

.range__values {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.range__value {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  padding: 40px 30px;
}

.range__value--top {
  position: absolute;
  bottom: 100%;
  color: #1215a1;
}

.range__value--bottom {
  color: white;
}

.range__value__number {
  font-size: 70px;
  margin: 0 10px;
}

.range__value__number--top {
  transform-origin: 100% 100%;
}

.range__value__number--bottom {
  transform-origin: 100% 0;
}

.range__value__text {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  text-transform: uppercase;
}
.range__value__text span:first-child {
  margin-bottom: 3px;
}

.range__value__text--top {
  align-self: flex-end;
  margin-bottom: 13px;
}

.range__value__text--bottom {
  margin-top: 10px;
}
menu, article, aside, details, footer, header, nav, section {
    display: block;
    margin-top: -20px;
}