body{
  background-color: #8EC5FC;
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}
.circle {
  float: left;
  width: 400px;
  height: 400px;
  margin: 20px;
  shape-outside: circle();
  clip-path: circle();
  border-radius: 100%;
  border-style: solid;
  border-width: 20px;
  border-color: black;
  background: white;
  justify-content: center;
  align-items: center;
  display: flex;
}
#dot{
  float: left;
  width: 30px;
  height: 30px;
  margin: 20px;
  shape-outside: circle();
  clip-path: circle();
  background: black;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  z-index: 10;
}
.clock {
  justify-content: center;
  align-items: center;
  display: flex;
  margin-top: 20em;
  position: relative;
}

.hands{     
    border-radius: 50%;
    position: absolute;
}
#hour-hand{
    position: absolute;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 50%, black 50%);
    height: 300px;
    width: 5;
    z-index: 2;
    transform : rotate(0deg);
}


#min-hand{
    position: absolute;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 50%, black 50%);
    transform : rotate(0deg);
    height: 360px;
    width: 7px;
    z-index: 6;
}
#sec-hand{
    position: absolute;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 50%, red 50%);
    transform-origin: rotate(0deg) ;
    height: 400px;
    width: 3px;
    z-index: 7;
}