.clock-tittle{
    text-align: center;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(140deg, #40b8ff 20%, #00ff97 43%, #ff007c);
    -webkit-background-clip: text;
    background-clip: text;
}
.clock {
    background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
  width: 20rem;
  height: 20rem;
  position: relative;
  border-radius: 50%;
  border: 2px solid grey;
  margin: 0px auto;
}

.hand {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 4px;
  transform-origin: 0;
}

.sec {
  width: 40%;
  background: black;
  z-index: 3;
}

.sec::before {
  content: "";
  position: absolute;
  left: 100%;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid black;
  top: -8px;
}

.min {
  width: 33%;
  background: hsla(0, 78%, 45%, 0.773);
}

.hour {
  width: 25%;
  background-color: blueviolet;
}

.hour::before {
    content: "";
    position: absolute;
    left: 100%;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid blueviolet;
    top: -8px;
  }

  .min::before {
    content: "";
    position: absolute;
    left: 100%;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid hsla(0, 78%, 45%, 0.773);;
    top: -8px;
  }

  .dot{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    background: black;
    border-radius: 50%;
    transform: translate(-50%,-50%);
    z-index: 11;
  }