html {
  text-align: center;
  font-size: 10px;
  background: rgb(255, 255, 255);
  background: -moz-radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(228, 228, 228, 1) 100%);
  background: -webkit-radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(228, 228, 228, 1) 100%);
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(228, 228, 228, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e4e4e4", GradientType=1);
  background-image: url("./images/1722.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

body {
  font-family: helvetica, arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex: 1;
  font-size: 2em;
  align-items: center;
}

.clock {
  width: 30rem;
  height: 30rem;
  border: 10px solid #ccc;
  border-radius: 50%;
  padding: 2em;
  margin: 20px auto;
  background: rgb(87, 87, 87);
  zoom: 45%;
  position: absolute;
  top: 10%;
  right: 10%;

  background: rgb(255, 255, 255);
  background: -moz-radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(228, 228, 228, 1) 100%);
  background: -webkit-radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(228, 228, 228, 1) 100%);
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(228, 228, 228, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e4e4e4", GradientType=1);
}

.hand {
  top: 50%;
  background: #2af598;
  width: 50%;
  height: 6px;
  position: absolute;
  transform: rotate(90deg);
  transform-origin: 100%;
  transition: all 0.05s;
  transition-timing-function: cubic-bezier(0.38, 1.66, 1, 1);
  border-radius: 32%;
}

.clockface {
  width: 100%;
  height: 100%;
  position: relative;
}

.secondhand {
  height: 4px;
}

.hourhand {
  width: 34%;
  transform-origin: 100%;
  height: 8px;
  top: 48%;
  left: 17%;
}

.minutehand {
  height: 6px;
}

.cent {
  width: 11%;
  height: 11%;
  color: brown;
  top: 45%;
  position: absolute;
  background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
  border-radius: 50%;
  left: 45%;
}

.nine {
  left: 0;
  top: 43%;
  position: absolute;
  font-size: 2em;
}

.nine {
  left: 0;
  top: 43%;
  position: absolute;
  font-size: 2em;
}

.three {
  right: 0;
  top: 43%;
  position: absolute;
  font-size: 2em;
}

.six {

  position: absolute;
  bottom: 0;
  left: 45%;
  font-size: 2em;
}

.twelve {
  position: absolute;
  top: 0;
  left: 45%;
  font-size: 2em;
}