*
{
	margin:  0 ;
	padding : 0 ;
	box-sizing : border-box;
}
body{
	background-color: #cccccc;


}
.container{
	width : 400px;
	height: 400px;
	border : 0px solid black;
	position : absolute;
	transform : translate(-50% , -50%);
	left:  50%;
	top : 50%;
	border-radius : 50%;
	box-shadow: 15px 15px 30px black,
	            -15px -15px 30px #cccccc;

}
.clock{
	width : 320px;
	height: 320px;
	
	position : absolute;
	transform : translate(-50% , -50%);
	left:  50%;
	top : 50%;
	
	background-size: cover;
	border-radius: 50%;
	box-shadow: inset 10px 10px 20px black;
	           
	display: flex;
	justify-content: center;  
	align-items : center;         
}
.hr{
	width : 150px;
	height : 150px;
	border-radius: 100px;

}
.min{
	width : 205px;
	height : 205px;
	
}
.sec{
	width : 275px;
	height : 275px;
	
}

.hr , .min , .sec {
	
	position:  absolute;
	display:  flex;
	justify-content: center;

}
.clock::before{
	content : ' ';
	height: 8px;
	width : 8px;
	background-color: black;
	border-radius : 50%;
	border : 2px solid red;
}
.hr::before{
	position : absolute;
	content: ' ';
	width:  7px;
	height: 75px;
	background-color: black;
	z-index: 10;
}
.min::before{
	position : absolute;
	content: ' ';
	width:  4px;
	height: 100px;
	background-color: black;
	z-index: 11;
}
.sec::before{
	position : absolute;
	content: ' ';
	width:  2px;
	height: 145px;
	background-color: red;
	z-index: 12;
}