body {
  background-color: black;
}
#clock {
  height: 500px;
  width: 500px;
  border-radius: 50%;
  border: 1px solid black;
  position: relative;
  background-color: red;
}

/* .hour {
  width: 250px;
  border-bottom: solid 3px black;
  position: absolute;
  top: 49%;
  animation: spin 4s linear;
} */

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(120deg);
  }
}

@keyframes spin {
  0% {
    transform: rotateZ(0);
  }
  50% {
    transform: rotateZ(120deg);
  }
}

.tick {
  background-color: black;
  height: 20px;
  width: 5px;
  position: absolute;
}

.tick-long {
  height: 60px;
  background-color: black;
  width: 5px;
  position: absolute;
}

.oneEleven {
  /* ~6.7% */
  top: 33.5px;
}

.twoTen {
  /* 25% */
  top: 125px;
}

.threeNine {
  /* 50% */
  top: 250px;
}

.fourEight {
  /* 25% */
  bottom: 125px;
}

.fiveSeven {
  /* ~6.7% */
  bottom: 33.5px;
}

#one {
  right: 125px;
  transform: rotate(30deg);
  transform-origin: top right;
}

#two {
  /* ~93.3% */
  right: 33.5px;
  transform: rotate(60deg);
  transform-origin: top right;
}

#three {
  right: 0px;
  transform: rotate(90deg);
  transform-origin: top right;
}

#four {
  right: 33.5px;
  transform: rotate(120deg);
  transform-origin: left;
}

#five {
  right: 125px;
  transform: rotate(150deg);
  transform-origin: right;
}

#six {
  left: 250px;
  bottom: 0px;
}

#seven {
  left: 125px;
  transform: rotate(-150deg);
  transform-origin: left;
}

#eight {
  left: 33.5px;
  transform: rotate(-120deg);
  transform-origin: right;
}

#nine {
  left: 0px;
  transform: rotate(-90deg);
  transform-origin: top left;
}

#ten {
  left: 33.5px;
  transform: rotate(-60deg);
  transform-origin: top left;
}

#eleven {
  left: 125px;
  transform: rotate(-30deg);
  transform-origin: top left;
}

#twelve {
  left: 250px;
  top: 0px;
}