.outer_face {   position: relative;  width: 180px; /* width of clock */   height: 180px; /* height of clock */    
border-radius: 200px; /* clock round corner radius */   background: white;  box-shadow: inset 0 0 10px gray;  border: 0 solid gray; /* thickness of outer border */ } 

.outer_face::before, .outer_face::after, .outer_face .marker { /* time markers syle */    content: "";    position: absolute;    width: 8px; /* width of 12-6 and 3-9 markers */    height: 100%;    background: black;    z-index: 0;    left: 50%;    margin-left: -4px; /* set this value of 1/2 marker width */    top: 0    }
.outer_face::after {    -moz-transform: rotate(90deg);    -ms-transform: rotate(90deg);    -webkit-transform: rotate(90deg);    transform: rotate(90deg)    }

.outer_face .marker {    background: gray;    width: 6px; /* width of all other markers */    margin-left: -3px /* set this value of 1/2 marker width */    }

.outer_face .marker.oneseven {    -moz-transform: rotate(30deg);    -ms-transform: rotate(30deg);    -webkit-transform: rotate(30deg);    transform: rotate(30deg)    }

.outer_face .marker.twoeight {    -moz-transform: rotate(60deg);    -ms-transform: rotate(60deg);    -webkit-transform: rotate(60deg);    transform: rotate(60deg)    }

.outer_face .marker.fourten {    -moz-transform: rotate(120deg);    -ms-transform: rotate(120deg);    -webkit-transform: rotate(120deg);    transform: rotate(120deg)    }

.outer_face .marker.fiveeleven {    -moz-transform: rotate(150deg);    -ms-transform: rotate(150deg);    -webkit-transform: rotate(150deg);    transform: rotate(150deg)    }

.inner_face {    position: relative;    width: 88%;    height: 88%;    background: white;    -moz-border-radius: 1000px;    -webkit-border-radius: 1000px;    border-radius: 1000px;    z-index: 1000;    left: 6%; /* set this value of 1/2 width value*/    top: 6% /* set this value of 1/2 height value*/    }

.inner_face::before {    /* clock center circle small */    content: "";    width: 18px; /* width of inner circle */    height: 18px; /* height of inner circle */    border-radius: 18px;    margin-left: -9px; /* set this value of 1/2 width value*/    margin-top: -9px; /* set this value of 1/2 height value*/    background: black;    position: absolute;    top: 50%;    left: 50%;    box-shadow: 0 0 30px blue;    }

.inner_face::after {    content: "QUARTZ";    position: absolute;    width: 100%;    font: normal 0.8em Arial;    color: gray;    text-align: center;    top: 85%    }

.hand, .hand.hour {    position: absolute;    width: 4px; /* width of hour hand */    height: 30%; /* height of hour hand */    top: 20%; /* set top to 50% - height */    left: 50%;    margin-left: -2px; /* set this value to 1/2 width */    background: black;    -moz-transform: rotate(0deg);    -ms-transform: rotate(0deg);    -webkit-transform: rotate(0deg);    transform: rotate(0deg);    -moz-transform-origin: bottom;    -ms-transform-origin: bottom;    -webkit-transform-origin: bottom;    transform-origin: bottom;    z-index: -1;    -moz-box-shadow: 0 0 3px gray;    -webkit-box-shadow: 0 0 3px gray;    box-shadow: 0 0 3px gray    }

.hand.minute {    height: 45%; /* height of min hand */    top: 5%; /* set top to 50% - height */    width: 5px; /* width of min hand */    margin-left: -2.5px; /* set this value to 1/2 width */    }

.hand.second {    height: 50%; /* height of sec hand */    width: 2px; /* width of sec hand */    margin-left: -1px; /* set this value to 1/2 width */    top: 0;    background: red    }