@import url("https://fonts.googleapis.com/css2?family=Creepster&family=Roboto:wght@700&display=swap");

.range-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.range-slider {
	position: relative;
	width: 100%;
}

.range-slider_input {
	width: 100%;
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	-webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    opacity: 0;
	margin: 0;
    background-color: var(--secondary-color);
}

.range-slider_input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 100px;
  height: 100px;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0;
}

/* .range-slider_input::-moz-range-thumb {
  width: 14vmin;
  height: 14vmin;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0;
} */

.range-slider_thumb {
	width: 4rem;
	border-radius: 30px;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background-color: var(--secondary-color);
    color : white;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 700;
	font-size: 1rem;
	z-index: 2;
}

.range-slider_line {
	height: 0.1rem;
	width: 100%;
	background-color: var(--secondary-color);
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	position: absolute;
	z-index: 1;
}

.range-slider_line-fill {
	position: absolute;
	height: 0.1rem;
	width: 0;
	background-color: var(--secondary-color);
}