/* CSS files add styling rules to your content */
@font-face {
  font-family: 'BricolageGrostesque';
  src: url('BricolageGrostesque-Regular.woff2') format('woff2');
}


body {
  marin-top: 20px;
  background-color: white;
  overflow: hidden;
}

h1 {
  color: #373fff;
}

.container {
  display: flex;
  justify-content: center;
  gap: 50px;
  font-family: BricolageGrostesque;
  color: white;
}

.slider {
  display: flex;
  gap: 10px;
  align-items: center;
}

input {
  appearance: none;
  height: 0.1rem;
  border-radius: 1rem;
  background: white;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  transition: .5s;
  transition-timing-function: cubic-bezier(.73,2,.25,-0.7);
}

input[type="range"]:active::-webkit-slider-thumb {
  transition-timing-function: linear;
  transform: scale(1.1, 0.7);
}

/*Firefox support*/
input[type="range"]::-moz-range-thumb {
  appearance: none;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  transition: .5s;
}

input[type="range"]::-moz-range-thumb {
  aspect-ratio: 1 / 1;
  border: 0.1rem solid #fff;
  border-radius: 50%;
  background: radial-gradient(circle at 70% 30%, #fff, transparent 25%),
    radial-gradient(circle at 60% 55%, transparent 60%, rgba(255, 0, 255, 0.8) 100%),
    radial-gradient(circle at 50% 50%, transparent 40%, rgba(0, 255, 255, 0.2) 60%, transparent 68%),
    radial-gradient(circle at 50% 55%, transparent 35%, rgba(255, 255, 0, 0.2) 45%, transparent 55%),
    rgba(17,21,28, 0.5);
}

input[type="range"]:active::-moz-range-thumb {
  animation: none;
  transform: scale(1.1, 0.7);
}

/*Cursor*/