html{
     background: #018ded url("https://i.picsum.photos/id/881/1500/1000.jpg?blur=5&hmac=wSpZ-UlEtKsvnxXigvyNIbudlXANuQMJpe19ZvEjebw");
     background-size: cover;
     font-family: 'helvetica neue';
     text-align: center;
     font-size: 10px;
}
body{
      font-size: 2rem;
      display: flex;
      flex: 1;
      min-height: 100vh;
      align-items: center;
}
.clock{
      height: 30rem;
      width: 30rem;
      border: 25px solid #fff;  
      border-radius: 50%;
      margin: 50px auto;   position: relative;   
      padding: 2rem; 
      box-shadow: 0 0 0px 4px rgba(0, 0, 0, 0.1),
       inset 0 0 3px #efefef, 
       inset 0 0 10px #000,
       0 0 10px rgba(0, 0, 0, 0.2);         
}
.clock-face{
       height: 100%;
       width: 100%;       
       position: relative;
       transform:translate(-3px);          
}
.hand{
      height: 10px;
      width: 45%;
      background: #000;  
      position: absolute;
      top: 50%;
      transform-origin: 100%; 
      transform: rotate(90deg);
      transition: all 0.05s;  
      transition-timing-function: cubic-bezier(0.1, 0.7, 0.58 ,1);           
}