.clock {
  margin: 40px;
  position: relative;
  width: 100px;
  height: 100px;
}

.clock-bg {
  border: 4px solid #aaa;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  text-align: center;
}
.v-clock-dark {
  width: 200px;
  height: 200px;
  background-color: #282828;
  position: relative;
}
.clock-bg-dark {
  margin-top: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  border: 7px solid #282828;
  box-shadow: -4px -4px 10px rgba(67, 67, 67, 0.5),
    inset 4px 4px 10px rgba(0, 0, 0, 0.5),
    inset -4px -4px 10px rgba(67, 67, 67, 0.5), 4px 4px 10px rgba(0, 0, 0, 0.3);
}
.clock-dark {
  // position:absolute;
}
.clock-bg > div {
  height: 96%;
  width: 4px;
  background-color: #aaa;
  position: absolute;
  top: 2%;
  left: 50%;
  margin-left: -2px;
}

.clock-bg > div:nth-child(2) {
  transform: rotate(30deg);
}

.clock-bg > div:nth-child(3) {
  transform: rotate(60deg);
}

.clock-bg > div:nth-child(4) {
  transform: rotate(90deg);
}

.clock-bg > div:nth-child(5) {
  transform: rotate(120deg);
}

.clock-bg > div:nth-child(6) {
  transform: rotate(150deg);
}

.clock-bg-dark > div:nth-child(1) {
  background-color: #1df52f;
}

.clock-bg-dark > div:nth-child(4) {
  background-color: #1df52f;
  transform: rotate(90deg);
}

.clock-bg:after {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  background-color: #fff;
  border-radius: 50%;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.clock-bg-dark:after {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  background-color: #282828;
  border-radius: 50%;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.clock-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.clock-point {
  height: 50%;
  width: 4px;
  position: absolute;
  background-color: #000;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% bottom;
}

.clock-point.clock-point--hour {
  height: 20%;
  width: 6px;
}

.clock-point.clock-point--minute {
  height: 30%;
}

.clock-point.clock-point--second {
  height: 40%;
  width: 2px;
  background-color: #f50;
}