body{
   padding:0px;
   margin:2%;
   height:100vh;
   background-image: url('images/bgimg2.jpg');
   background-size:cover;
   background-repeat:no-repeat;
   overflow:hidden;
}

.clock{
 position: relative;
 width:600px;
 height:600px;
 margin:10% auto;
 border-radius:50%;
 border:2px solid blue;
 background-color:#fff;
 box-shadow:1px 1px 10px dodgerblue;
 z-indent:1;
 top:5%;

}
.numbers{
 position: relative;
 font-size:26px;
 font-weight:bold;
 height:500px;
 margin:9% auto;
 color:red;
 font-weight: bold;
 text-shadow: 1px 1px 2px grey;
 z-indent:2;
}
.twelve{
 position:absolute;
 top:-8%;
 left:50%;
 transform: translateX(-50%);
}

.one{
 position:absolute;
 top:5%;
 right:18%;
}

.eleven{
 position:absolute;
 top:5%;
 left:18%;
}

.ten{
 position:absolute;
 top:25%;
 left:5%;
}

.two{
 position:absolute;
 top:25%;
 right:5%;
}

.nine{
 position:absolute;
 top:50%;
 left:2%;
 transform: translateY(-50%);
}

.three{
 position:absolute;
 top:50%;
 right:2%;
 transform: translateY(-50%);
}

.eight{
 position:absolute;
 top:70%;
 left:6%;
}

.four{
 position:absolute;
 top:70%;
 right:6%;
}

.seven{
 position:absolute;
 top:90%;
 left:20%;
}

.five{
 position:absolute;
 top:90%;
 right:20%;
}
.six{
 position:absolute;
 bottom:-8%;
 left:50%;
 transform: translateX(-50%);
}

.logo-style{
position:absolute;
width:90px;
z-indent:3;
left:50%;
top:15%;
transform: translateX(-50%);
}

.center-hand{
position:absolute;
width:23px;
height:23px;
border-radius:50%;
background-color:grey;
top:50%;
left:50%;
z-index :5;
transform:translate(-50%,-50%);
}

.time-hands{
position:relative;
width:10px;
height:150px;
top:-65%;
left:50%;
transform:translate(-50%,-50%);
}

.minute-hand{
position:absolute;
width:10px;
height:220px;
top:-40%;
background-color:blue;
border-radius:5px 5px 0px 0px;
transform-origin:bottom;
transform: rotate(0deg);
}

.hour-hand{
position:absolute;
width:10px;
height:130px;
top:20%;
transform: rotate(0deg);
background-color:green;
border-radius:5px 5px 0px 0px;
transform-origin:bottom;
transform: rotate(0deg);
}

.second-hand{
position:absolute;
width:10px;
height:180px;
top:-13%;
background-color:brown;
border-radius:5px 5px 0px 0px;
transform-origin:bottom;
transform: rotate(0deg);
}