Responsive clock design - html

Question

I need to make this clock responsive when i change screen resolution meaning put the clockwise in the middle of the clock and not moving during rotation
.clock{ width: 500px;
height: 500px;
border-radius:100%;
margin: auto;
background:#333 ;
border:22px solid rgb(41, 25, 25) ;
position:relative;
box-shadow:0 5px 0 0 rgba(0, 0, 0, .3),inset 0 35px 0 0 rgba(0, 0, 0, .3), inset 0 0 0 214px #c33;
}
.hour{
position: absolute;
top: 87px;
left: 822.5px;
width: 35px;
height: 198px;
display: block;
margin: auto;
box-shadow: inset 0px 2px 0 0 #fff, inset 0px 198px 0 0 #333;
transform: rotate(150deg);
transform-origin: bottom;
}
.minutes{
position: absolute;
top: 115px;
left: 822.5px;
width: 35px;
height: 170px;
display: block;
margin: auto;
box-shadow: inset 0px 2px 0 0 #fff, inset 0px 170px 0 0 #333;
transform: rotate(150deg);
transform-origin: bottom;
}
<div class="clock"></div>
<div class="hour" id="hour"></div>
<div class="minutes" id="minute"></div>
</div>

Answer 1

Try this code
.clock {
width: 500px;
height: 500px;
border-radius: 100%;
margin: auto;
background: #333;
border: 22px solid rgb(41, 25, 25);
position: relative;
box-shadow: 0 5px 0 0 rgba(0, 0, 0, .3), inset 0 35px 0 0 rgba(0, 0, 0, .3), inset 0 0 0 214px #c33;
}
.hour {
position: absolute;
top: 87px;
left: 50%;
width: 35px;
height: 198px;
display: block;
margin: auto;
box-shadow: inset 0px 2px 0 0 #fff, inset 0px 198px 0 0 #333;
transform: rotate(150deg);
transform-origin: bottom;
}
.minutes {
position: absolute;
top: 41px;
left: 46%;
width: 35px;
height: 170px;
display: block;
margin: auto;
box-shadow: inset 0px 2px 0 0 #fff, inset 0px 170px 0 0 #333;
transform: rotate(00deg);
transform-origin: bottom;
}
<div class="clock">
<div class="hour" id="hour"></div>
<div class="minutes" id="minute"></div>
</div>