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

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #b694945c;
}

.clock.dark {
  width: 21.875rem;
  height: 21.875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.75rem solid rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6));
  box-shadow: inset 0.375rem 0.375rem 0.5rem black,
    inset -0.375rem -0.375rem 0.5rem black;
}

.clock.dark::before {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: linear-gradient(90deg, black, white);
  border-radius: 50%;
  z-index: 15;
}

.clock .hour,
.clock .minute,
.clock .second {
  position: absolute;
}

.clock .hour,
.clock .hour .hr {
  height: 10rem;
  width: 10rem;
}

.clock .minute,
.clock .minute .min {
  height: 11.875rem;
  width: 11.875rem;
}

.clock .second,
.clock .second .sec {
  height: 14.375rem;
  width: 14.375rem;
}

.clock .hour .hr,
.clock .minute .min,
.clock .second .sec {
  display: flex;
  justify-content: center;
  position: absolute;
  border-radius: 50%;
}

.clock.dark .hour .hr::before {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 5rem;
  background: goldenrod;
  z-index: 10;
  border-radius: 0.625rem;
}

.clock.dark .minute .min::before {
  content: "";
  position: absolute;
  width: 0.25rem;
  height: 5.625rem;
  background: rgb(218, 9, 62);
  z-index: 11;
  border-radius: 0.5rem;
}

.clock.dark .second .sec::before {
  content: "";
  position: absolute;
  width: 0.188rem;
  height: 8.75rem;
  background: linear-gradient(90deg, black, white);
  z-index: 12;
  border-radius: 0.125rem;
}

i {
  position: absolute;
  top: 7%;
  right: 7%;
  font-size: 3rem;
  cursor: pointer;
  color: orange;
}

/* -------------------------------------------------- */

.clock {
  width: 21.875rem;
  height: 21.875rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 0.75rem solid #ededed;
  border-radius: 50%;
  background: linear-gradient(145deg, #d5d5d5, #fefefe);
  box-shadow: inset 0.15rem 0.15rem 0.5rem rgb(4, 197, 181),
    inset -0.15rem -0.15rem 0.5rem rgb(6, 226, 229);
}

.clock .clock-bg img {
  width: 100%;
  height: 100%;
}

.clock::before {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  background: #3497cc;
  border-radius: 50%;
  z-index: 15;
}

.clock .hour .hr::before {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 5rem;
  background: #ff3d68;
  z-index: 10;
  border-radius: 0.625rem;
}

.clock .minute .min::before {
  content: "";
  position: absolute;
  width: 0.25rem;
  height: 5.625rem;
  background: #30303b;
  z-index: 11;
  border-radius: 0.5rem;
}

.clock .second .sec::before {
  content: "";
  position: absolute;
  width: 0.188rem;
  height: 8.75rem;
  background: #3497cc;
  z-index: 12;
  border-radius: 0.125rem;
}