@charset "UTF-8";
/* CSS Document */
.clock {
	width: 140px;
	height: 140px;
	position: relative;
	background-image: url('../images/clock/clockFace.svg');
	background-repeat:  no-repeat;
	background-position: center center;
	background-size: 140px 140px;
	margin: 0 auto 2rem auto;
}
.clock-face {
	position: relative;
	width: 100%;
	height: 100%;
}
.hand {
	position: absolute;
	/* transform origin by default is 50% along the x-axis to the rotate will always be from the middle. 100% will be at the rhs on the x-axis */
	transform: rotate(90deg); so it starts at 12 o'clock by default */
	transition: all 0.05s;
	transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
	/* open inspector and type transition-timing-function: ease-in-out then click the purple button on the left and it will open the cubic bezier editor and drag one point right up to give the realistic tick */
}
.second {
	width: 65px;
	height: 8px;
	background-image: url('../images/clock/secondHand_65_8.svg');
	background-repeat:  no-repeat;
	background-position: center center;
	background-size: 65px 8px;
	top: 66px;
	left: 20px;
	transform-origin: 50px 50%;
}
.minute {
	width: 57px;
	height: 6px;
	background-image: url('../images/clock/minuteHand_57_6.svg');
	background-repeat:  no-repeat;
	background-position: center center;
	background-size: 57px 6px;
	top: 67px;
	left: 24px;
	transform-origin: 46px 50%;
}
.hour {
	width: 44px;
	height: 18px;
	background-image: url('../images/clock/hourHand_44_18.svg');
	background-repeat:  no-repeat;
	background-position: center center;
	background-size: 44px 18px;
	top: 61px;
	left: 37px;
	transform-origin: 33px 50%;
}