.ballet-<uniquifier> {
  font-family: "Ballet", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Clash Display';
  src:
  local(ClashDisplay-Variable),
  url(/fonts/ClashDisplay-Variable.ttf);
  font-weight: 200 700;
  font-style: normal;
}

@font-face {
  font-family: 'FlorDeRuina';
  src:
  local(FlorDeRuina-Flor),
  url(/fonts/FlorDeRuina-Flor.woff2);
  font-weight: 400;
  font-style: normal;
}

body{
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 0;
}

.slider {
  margin : 0px;
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

.slider:focus {
  outline: none;
}

.slider::-webkit-slider-runnable-track{
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #F1F1F1;
    outline: none;
}

.slider::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  background: #f1f1f1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  margin-top: -6px;
  border-radius: 6px;
}

.color-picker {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
}

.color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}
.color-picker::-webkit-color-swatch {
  border: solid 2px #f1f1f1;
  border-radius: 20px;
}