#clock--box {
            height: 100px;
            width: 100px;
            background-size: contain;
            background-repeat: no-repeat;
            position: absolute;
            border-radius: 50%;
        }


        #hour--hand,
        #min--hand,
        #sec--hand {
            position: absolute;
            background-color: rgb(0, 255, 0);
            transform-origin: bottom;
        }

        #hour--hand {
            height: 19%;
            width: 3px;
            left: 50%;
            top: 31%;
        }

        #min--hand {
            height: 22%;
            width: 2px;
            left: 50.3%;
            top: 26%;
        }

        #sec--hand {
            height: 27%;
            background-color: rgb(0, 255, 0);
            width: 1px;
            left: 50.5%;
            top: 22%;
            position: relative;
        }

        .date-display {
            margin-top: 30px;
            font-size: 1.5em;
            color: white;
        }

        #radio-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 135px;
  height: 32px;
  background: transparent;
  position: absolute;
  left: 97px;
  top: 80px;
  z-index: 10;
  margin: 0;
  padding: 0;
}
#radio-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  transform: translateY(-2px);
  background: url('radio_knob.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
  border: none;
}
#radio-slider::-moz-range-thumb {
  width: 32px;
  height: 32px;
  transform: translateY(10px);
  background: url('radio_knob.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
  border: none;
}
#radio-slider::-ms-thumb {
  transform: translateY(-2px);
  width: 32px;
  height: 32px;
  background: url('radio_knob.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
  border: none;
}
#radio-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
}
#radio-slider::-ms-fill-lower,
#radio-slider::-ms-fill-upper {
  border-radius: 4px;
}
#radio-slider::-moz-range-track {
  height: 8px;
  border-radius: 4px;
}
#radio-slider:focus {
  outline: none;
}



#color-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 135px;
  height: 32px;
  background: transparent;
  position: absolute;
  left: 97px;
  top: 80px;
  z-index: 10;
  margin: 0;
  padding: 0;
}
#color-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 32px;
  transform: translateY(-2px);
  background: url('radio_knob.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
  border: none;
}
#color-slider::-moz-range-thumb {
  width: 32px;
  height: 32px;
  transform: translateY(10px);
  background: url('radio_knob.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
  border: none;
}
#color-slider::-ms-thumb {
  transform: translateY(-2px);
  width: 32px;
  height: 32px;
  background: url('radio_knob.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
  border: none;
}
#color-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 4px;
}
#color-slider::-ms-fill-lower,
#color-slider::-ms-fill-upper {
  border-radius: 4px;
}
#color-slider::-moz-range-track {
  height: 8px;
  border-radius: 4px;
}
#color-slider:focus {
  outline: none;
}