body {
  background-color: white;
}
.clock{
  background-image: radial-gradient( red, black);
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
  box-shadow: 2px 2px 51px grey;
  border: 2px solid white;
}
.head-clock{
  width: 10.3rem;
  height: 18rem;
  margin-left: 40vw;
  margin-top: 20vh;
  background-image: radial-gradient(black,grey, black);
  border-radius: 5%;
  padding-top: 1rem;
}
.twelve{
  margin-left: 4.5rem;
  position: absolute;
  color: white;
}
.nine{
  margin-left: 0rem;
  margin-top: 4.5rem;
  position: absolute;
  color: white;
}
.three{
  margin-left: 9.5rem;
  margin-top: 4.5rem;
  position: absolute;
  color: white;
}
.six{
  margin-left: 4.5rem;
  margin-top: 9em;
  position: absolute;
  color: white;
}
.secound{
  width: 5rem;
  height: 1.5px;
  position: absolute;
  color: white;
  background-color: white;
  margin-left: 5rem;
  margin-top: 5rem;
  transform-origin: 0% 0%;
  transform: rotate(270deg);
}
.minute{
  width: 4rem;
  height: 3px;
  position: absolute;
  color: white;
  background-color: white;
  margin-left: 5rem;
  margin-top: 5rem;
  transform: rotate(270deg);
  transform-origin: 0% 0%;
}
.hour{
  width: 3rem;
  height: 3px;
  position: absolute;
  color: white;
  background-color: white;
  margin-left: 5rem;
  margin-top: 5rem;
  transform: rotate(0deg);
  transform-origin: 0% 0%;
}
.middle-circle{
  background-color: black;
  width: 1rem;
  height: 1rem;
  margin-left: 4.5rem;
  margin-top: 4.5rem;
  position: absolute;
  color: white;
  background-color: white;
  border-radius: 50%;
}
.pend_niddle{
    width: 0.3rem;
    height: 6rem;
    background-color: white;
    border-radius: 17%;
    transform-origin: 0% 0%;
    position: absolute;
}
.pend {
  margin-left: 5rem;
  position: absolute;
}
.pend_circle{
    width: 1rem;
    height: 1rem;
    background-image: radial-gradient( red, black);
    border-radius: 50%;
    transform-origin: 0% 0%;
    margin-top: 5.7rem;
    position: absolute;
    margin-left: -0.35rem;
}
.pendilum { 
  transition-duration: 1s;
}