body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  background-color: rgb(97, 126, 97);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 7rem;
}

.clock {
  background-color: rgb(218, 218, 223);
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
  position: relative;
}

.hour-hand {
  width: 0.3rem;
  height: 3.6rem;
  background-color: black;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: rotate(47deg);
  transform-origin: 100% 100%;
  transition: rotate cubic-bezier(0.28, 2.71, 0.39, 2.71);
}

.minute-hand {
  width: 0.2rem;
  height: 5rem;
  background-color: black;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: rotate(180deg);
  transform-origin: 100% 100%;
  transition: rotate cubic-bezier(0.28, 2.71, 0.39, 2.71);
}

.seconds-hand {
  width: 0.1rem;
  height: 5.6rem;
  background-color: black;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: rotate(deg);
  transform-origin: 100% 100%;
  transition: rotate cubic-bezier(0.28, 2.71, 0.39, 2.71);
}


.middle-circle {
    width: 10px;
    height: 10px;
    background-color: blue;
    position: absolute; 
    bottom: 50%;
    left: 50%;
    border-radius: 50%; 
}


.analog-clock {
    font-size: 2rem;
    font-family:Arial, Helvetica, sans-serif;
}