body{
    display: flex;
    justify-content: center;
  /* align-items: center; */
  background: #091921;
 /* min-height: 100vh; */
 
 
  
 
 
}

#clock{
     display: flex;
    /* align-items: center;
    justify-content: center;
    left: 33%; */ 
   position: absolute;
    margin-top: 60px;
    /* height: 420px; */
    height: 35vw;
    width: 35vw;
    
    
    background-image: url('clock.png') ;
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 4px solid #091921;
    box-shadow: 0 -15px 7px  rgb(255, 255, 255,0.05),
                inset 0 -15px 15px  rgb(255, 255, 255,0.05),
                0 15px 15px  rgb(0, 0, 0,0.3),
                inset 0 15px 15px  rgb(0, 0, 0,0.3);

    
 
}

#hour,#minute,#second{
    position: absolute;
    transform-origin: bottom;
    opacity: 0.8;
   
    /* tranform origin property rotates from bottom */
    
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

#hour{
    
    width: 9px;
    height: 26%;
    top: 24%;
    left: 50%;
    background-color: #ff105e;
    border-radius: 6px 6px 0  0;
    
   
     
}

#minute{
    
    width: 6px;
    height: 29%;
    top: 21%;
    left: 50.2%;
    background-color: white;
    border-radius: 6px 6px 0  0;
    
    
     
}


#second{
    
    width: 2px;
    height: 34%;
    top: 16%;
    left: 50.7%;
    background-color: white;
    border-radius: 6px 6px 0  0;
    
     
}

#center{
    /* height: 19px;
    width: 18px; */
    width: 1.5vw;
    height: 1.5vw;
    background-color: white;
    border-radius: 50%;
    position: absolute; 
    top: 48%;
    left: 48.9%;
    
}