#ctable {
  margin-left: auto;
  margin-right: auto;
  position:relative;
  top:10px;
}

td {
  padding : 10px;
}
 
.clock {
  width: 310px;
  height: 310px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(/images/clock.png);
  background-size: cover;
  border: 4px;
  box-shadow: 0em 20px 20px rgba(0, 0, 0, 0.3),
              inset 0em 10px 10px rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  border: 5px solid black;
}

.clock:after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background: rgb(200, 200, 200);
  border-radius: 50%;
}
.clock-hand {
    transition: transform 1s ease-out;
    transform-origin: bottom center; /* Ensure this matches your current rotation point */
}
.clock .hourHand {
  width: 180px;
  height: 180px;
} 

.clock .minuteHand {
  width: 220px;
  height: 220px;
}

.clock .secondHand {
  width: 270px;
  height: 270px; 
}

.hourHand, .minuteHand, .secondHand {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  position: absolute;
}

.hourHand:after {
  content: '';
  position: absolute;
  width: 5.5px;
  height: 90px;
  background: #727272;
  border-radius: 2.75px;
}

.minuteHand:after {
  cursor: pointer;
  content: '';
  position: absolute;
  width: 3.5px;
  height: 110px;
  background: #727272;
  border-radius: 1.75px;
}

.secondHand:after {
  content: '';
  position: absolute;
  width: 1.5px;
  height: 135px;
  background: #ff7272;; 
  border-radius: 0.75px;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0;
}

.content-wrapper {
  flex: 1; /* This makes the content area grow to fill available space */
}

.footer {
  margin-top: auto; /* This pushes the footer to the bottom */
  width: 100%;
  text-align: center;
}