body {
  margin: 0;
}

.clock {
  align-items: center;
  background: radial-gradient(#EADDA6 15%, transparent 0), radial-gradient(#EADDA6 15%, transparent 0);
  background-color: #FFFAE2;
  background-position: 0px 0px, 40px 40px;
  background-size: 80px 80px;
  height: 100vh;
  display: flex;
  justify-content: center;
  width: 100%;
}

.clock-face {
  background-color: #FFFAE2;
  border: 5px solid #EADDA6;
  border-radius: 50%;
  height: 400px;
  position: relative;
  width: 400px;
}

.hand {
  background: #7FB285;
  border-radius: 2px;
  height: 5px;
  position: absolute;
  top: 50%;
  transform: rotate(90deg);
  transform-origin: 100%;
  transition: all 0.05s;
  transition-timing-function: cubic-bezier(0.83, 1.44, 1, 1);
}

.hour-hand {
  left: 25%;
  width: 25%;
}

.min-hand {
  left: 15%;
  width: 35%;
}

.sec-hand {
  left: 5%;
  width: 45%;
}