/* From Uiverse.io by FColombati */ 
.rangeWrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
}

[type="range"].kawaii {
  --base: #fe8ce4;
  --light: color-mix(in sRGB, var(--base) 60%, #fff);
  --lighter: color-mix(in sRGB, var(--base) 30%, #fff);
  --dark: color-mix(in sRGB, var(--base) 95%, #000);
  --transparent: color-mix(in sRGB, var(--base) 0%, #0000);
  appearance: none;
  font-size: 1em;
  width: 20em;
  height: 2em;
  border: 0.5em solid #fff;
  border-radius: 2em;
  box-shadow:
    0 0 1em #0001,
    0 0.25em 0.5em #0001;
  overflow: hidden;
}

[type="range"].kawaii::-webkit-slider-runnable-track {
  background:
    radial-gradient(
      circle at 0.75em 0.6em,
      var(--light) calc(0.2em - 1px),
      #0000 0.2em
    ),
    radial-gradient(
      circle at 1.25em 0.6em,
      var(--light) calc(0.2em - 1px),
      #0000 0.2em
    ),
    radial-gradient(
      circle at 5em 0.6em,
      var(--light) calc(0.2em - 1px),
      #0000 0.2em
    ),
    linear-gradient(var(--light) 0 0) 1.25em 0.4em / 3.75em calc(0.4em - 0.5px)
      no-repeat,
    linear-gradient(90deg, var(--base), var(--transparent) 1em),
    linear-gradient(#0000 70%, var(--dark) 80%),
    var(--base);
  border-radius: 2em;
  height: 100%;
  overflow: hidden;
}

[type="range"].kawaii::-webkit-slider-thumb {
  appearance: none;
  height: 2em;
  width: 2em;
  color: var(--lighter);
  background:
    radial-gradient(
      circle at 0.75em 0.6em,
      var(--light) calc(0.2em - 1px),
      #0000 0.2em
    ),
    linear-gradient(90deg, #0000 0.75em, var(--base) 0) 0 0 / 100% 50% no-repeat;
  border-radius: 50%;
  box-shadow:
    inset -0.5em 0 0.5em -0.25em var(--base),
    1em 0 0 0.25em,
    2em 0 0 0.25em,
    3em 0 0 0.25em,
    4em 0 0 0.25em,
    5em 0 0 0.25em,
    6em 0 0 0.25em,
    7em 0 0 0.25em,
    8em 0 0 0.25em,
    9em 0 0 0.25em,
    10em 0 0 0.25em,
    11em 0 0 0.25em,
    12em 0 0 0.25em,
    12em 0 0 0.25em,
    13em 0 0 0.25em,
    14em 0 0 0.25em,
    15em 0 0 0.25em,
    16em 0 0 0.25em,
    17em 0 0 0.25em,
    18em 0 0 0.25em,
    19em 0 0 0.25em;
}

[type="range"].kawaii::-moz-range-track {
  background:
    radial-gradient(
      circle at 0.75em 30%,
      var(--light) calc(0.2em - 1px),
      #0000 0.2em
    ),
    radial-gradient(
      circle at 1.5em 30%,
      var(--light) calc(0.2em - 1px),
      #0000 0.2em
    ),
    radial-gradient(
      circle at 5.5em 30%,
      var(--light) calc(0.2em - 1px),
      #0000 0.2em
    ),
    linear-gradient(var(--light) 0 0) 1.5em calc(15% + 0.18em) / 4em
      calc(0.4em - 0.5px) no-repeat,
    linear-gradient(90deg, var(--base), var(--transparent) 1em),
    linear-gradient(var(--transparent) 70%, var(--dark) 80%),
    var(--base);
  border-radius: 2em;
  height: 100%;
  overflow: hidden;
}

[type="range"].kawaii::-moz-range-thumb {
  appearance: none;
  height: 2em;
  width: 2em;
  border: 0;
  color: var(--lighter);
  background:
    radial-gradient(
      circle at 0.75em 0.6em,
      var(--light) calc(0.2em - 1px),
      #0000 0.2em
    ),
    linear-gradient(90deg, var(--transparent) 0.75em, var(--base) 0) 0 0 / 100%
      50% no-repeat;
  border-radius: 50% 0 50% 50% 0;
  box-shadow:
    inset -0.5em 0 0.5em -0.25em var(--base),
    1em 0 0 0.25em,
    2em 0 0 0.25em,
    3em 0 0 0.25em,
    4em 0 0 0.25em,
    5em 0 0 0.25em,
    6em 0 0 0.25em,
    7em 0 0 0.25em,
    8em 0 0 0.25em,
    9em 0 0 0.25em,
    10em 0 0 0.25em,
    11em 0 0 0.25em,
    12em 0 0 0.25em,
    12em 0 0 0.25em,
    13em 0 0 0.25em,
    14em 0 0 0.25em,
    15em 0 0 0.25em,
    16em 0 0 0.25em,
    17em 0 0 0.25em,
    18em 0 0 0.25em,
    19em 0 0 0.25em;
}