button {
    padding: 0.5rem 1rem 0.5rem 1rem;
    margin: 2px;
    font-size: 1rem;
    border-radius: 10px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 35px;
  background: #dddddd;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 70px;
  border: 0;
  background: var(--clockface);
}

.slider::-moz-range-thumb {
  width: 70px;
  height: 70px;
  border: 0;
  background: var(--clockface);
}

.x {
  background: url('../img/icons/home.svg');
}

:root {
  --clockface: url('../img/clock/0oclock.svg');
}
[clock="0"] {
  --clockface: url('../img/clock/0oclock.svg');
}
[clock="1"] {
  --clockface: url('../img/clock/1oclock.svg');
}
[clock="2"] {
  --clockface: url('../img/clock/2oclock.svg');
}
[clock="3"] {
  --clockface: url('../img/clock/3oclock.svg');
}
[clock="4"] {
  --clockface: url('../img/clock/4oclock.svg');
}
[clock="5"] {
  --clockface: url('../img/clock/5oclock.svg');
}
[clock="6"] {
  --clockface: url('../img/clock/6oclock.svg');
}
[clock="7"] {
  --clockface: url('../img/clock/7oclock.svg');
}
[clock="8"] {
  --clockface: url('../img/clock/8oclock.svg');
}
[clock="9"] {
  --clockface: url('../img/clock/9oclock.svg');
}
[clock="10"] {
  --clockface: url('../img/clock/10oclock.svg');
}
[clock="11"] {
  --clockface: url('../img/clock/11oclock.svg');
}