body {
  background-color: black;
  color: white;
}
.clock {
  width: 90vh;
  height: 90vh;
  border: 1px solid #333;
  border-radius: 50%;
  position: relative;
  margin: 50px auto;
  background-image: url('Face.png');
  background-size: cover;
  background-position: center;
  box-shadow: 0px 4px 5px 2px rgb(0 0 0 / 50%);
}

.hand {
  width: 45%;
  margin-left: 5%;
  height: 6px;
  background-color: #333;
  position: absolute;
  top: 50%;
  transform-origin: 100%;
  transform: rotate(90deg);
}
.hour-hand {
  z-index: 3;
  height: 6%;
  background-image: url('Hour.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position-y: -0px;
  background-position-x: 50%;
  top: 47%;
  left: 0%;
}
.minute-hand {
  z-index: 4;
  height: 11%;
  background-image: url('Minute.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position-y: 50%;
  background-position-x: 0px;
  top: 44.5%;
  left: 0%;
}
.second-hand {
  z-index: 2;
  height: 10%;
  background-image: url('Second.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  background-position-y: 50%;
  background-position-x: 0px;
  top: 70%;
  left: 0%;
}
.center-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 5%;
  width: 5%;
  background-color: black;
  border-radius: 50%;
  z-index: 10;
}
.center-dot2 {
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translate(-50%, -50%);
  height: 2%;
  width: 2%;
  background-color: black;
  border-radius: 50%;
  z-index: 10;
}
.bla-bla-bla {
  width: 600px;
  margin: auto;
  font-size: 20px;
  text-align: center;
}