*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
}

#clock {
  width: 99.9%;
  height: 99.9%;
  background: radial-gradient(
    circle,
    rgb(184, 176, 176) 0%,
    rgb(141, 132, 135) 100%
  );
  border: 5px solid #5a2a05;
  border-radius: 50%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#hour {
  width: 25%;
  height: 8px;
  background: linear-gradient(to right, #105809, #291303);
  border-radius: 5px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  position: absolute;
  left: 25%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: right center;
}

#minute {
  width: 35%;
  height: 6px;
  background: linear-gradient(to right, #8232a7, #291303);
  border-radius: 5px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  position: absolute;
  left: 15%;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: right center;
}

#second {
  width: 40%;
  height: 4px;
  background: linear-gradient(to right, #1762ac, #291303);
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: right center;
}

#center-dot {
  width: 10%;
  height: 10%;
  background: radial-gradient(
    circle,
    rgb(132, 117, 110) 0%,
    rgba(41, 19, 3, 1) 100%
  );
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  z-index: 1;
}