@charset "utf-8";


/* This contains the entire clock so that it doesn't get too big and awkward. Since the clockFrame's width is difficult to adjust, use this to adjust the clock size. */
#clockContainer{
	position: relative;
	margin: 25px auto;
	max-width: 400px;
	text-align: center;
	z-index: 5;
}
@media screen and (max-width: 700px){
	#clockContainer{
		max-width: 90%;
	}
}




/* This is the clock's round frame. */
#clockFrame{
	position: relative;
	/* A big bottom margin is necessary to account for the absolute positioned pendulum. If you remove the pendulum, you can remove the bottom margin. */
	margin: 20px auto 180px auto;
	/* This padding effect lets the height match the width responsively without fixed sizes. The percentage of the width must match the padding-bottom. */
	padding-bottom: 100%;
	width: 100%;
	border: 2px solid #696969;
	border-radius: 50%;
	/* Some background is necessary so the pendulum displays behind the clock. */
	background-image: radial-gradient(#ffffff 60%, #696969);
	z-index: 10;
}



/* This is the middle of the clock face. */
#centerPoint{
	position: absolute;
	top: 50%;
	left: 50%;
	height: 25px;
	width: 25px;
	border: 2px solid #000000;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	background-image: radial-gradient(#ffffff, #696969);
	z-index: 15;
}






/* These are the radials used to position the numbers. */
.hourCenterLine{
	position: absolute;
	height: 1px;
	width: 40%;
	top: 50%;
	left: 50%;
	transform-origin: center left;
	text-align: right;
}




/* These contain the numbers. The top position must be half the sum of the size of the text, padding, and borders, if present. Otherwise the text will not be at the center of the radials. */
.hourText{
	display: inline-block;
	position: absolute;
	/* The top distance must be half the font-size. */
	top: -18px;
	left: 100%;	
	text-align: center;
	font-size: 36px;
	font-family: Arial Narrow, Helvetica, sans-serif;
	font-weight: bold;
	line-height: 1;
	transform-origin: center center;
	transform: rotate(60deg);
}
@media screen and (max-width: 700px){
	.hourText{
		font-size: 28px;
		top: -14px;
	}
}
@media screen and (max-width: 450px){
	.hourText{
		font-size: 18px;
		top: -9px;
	}
}



/* This rotates the radial that positions the numbers. */
.hour1CenterLineRotation{
	transform: rotate(300deg);
}

/* This adjusts the text within the container so that it's always level to 0 degrees. */
.hour1TextRotation{
	transform: rotate(60deg);
}




.hour2CenterLineRotation{
	transform: rotate(330deg);
}

.hour2TextRotation{
	transform: rotate(30deg);
}




.hour3CenterLineRotation{
	transform: rotate(0deg);
}

.hour3TextRotation{
	transform: rotate(0deg);
}




.hour4CenterLineRotation{
	transform: rotate(30deg);
}

.hour4TextRotation{
	transform: rotate(330deg);
}




.hour5CenterLineRotation{
	transform: rotate(60deg);
}

.hour5TextRotation{
	transform: rotate(300deg);
}




.hour6CenterLineRotation{
	transform: rotate(90deg);
}

.hour6TextRotation{
	transform: rotate(270deg);
}




.hour7CenterLineRotation{
	transform: rotate(120deg);
}

.hour7TextRotation{
	transform: rotate(240deg);
}




.hour8CenterLineRotation{
	transform: rotate(150deg);
}

.hour8TextRotation{
	transform: rotate(210deg);
}




.hour9CenterLineRotation{
	transform: rotate(180deg);
}

.hour9TextRotation{
	transform: rotate(180deg);
}




.hour10CenterLineRotation{
	transform: rotate(210deg);
}

.hour10TextRotation{
	transform: rotate(150deg);
}




.hour11CenterLineRotation{
	transform: rotate(240deg);
}

.hour11TextRotation{
	transform: rotate(120deg);
}





.hour12CenterLineRotation{
	transform: rotate(270deg);
}

.hour12TextRotation{
	transform: rotate(90deg);
}





/* These are the radials used to position the clock's hands. */
.handContainer{
	position: absolute;
	height: 1px;
	width: 50%;
	top: 50%;
	left: 50%;
	transform-origin: center left;
}




#hourHand{
	position: absolute;
	width: 60%;
	height: 10px;
	background-color: red;
	/* The transform property's top value must be half the height of the hand, so that it's always centered on the handContainer radial. */
	transform: translate(0px, -5px);
	transform-origin: center left;
	border-radius: 50%;
}

/* The rotation has its own ID so that JavaScript can adjust it. */
#hourHandPosition{
	transform: rotate(270deg);
}




#minuteHand{
	position: absolute;
	width: 70%;
	height: 8px;
	background-color: blue;
	/* The transform property's top value must be half the height of the hand, so that it's always centered on the handContainer radial. */
	transform: translate(0px, -4px);
	border-radius: 50%;
}

/* The rotation has its own ID so that JavaScript can adjust it. */
#minuteHandPosition{
	transform: rotate(270deg);
}




#secondHand{
	position: absolute;
	width: 75%;
	height: 6px;
	background-color: green;
	/* The transform property's top value must be half the width of the hand, so that it's always centered on the handContainer radial. */
	transform: translate(0px, -3px);
	border-radius: 50%;
}

/* The rotation has its own ID so that JavaScript can adjust it. */
#secondHandPosition{
	transform: rotate(270deg);
}





/* This is the radial that holds the pendulum stem. */
#pendulumContainer{
	position: absolute;
	height: 1px;
	width: 50%;
	top: 50%;
	left: 50%;
	transform-origin: center left;
	z-index: 2;
	/* This is the starting point angle of the rotation. It must counter the swing animation angle. */
	transform: rotate(100deg);
	/* This calls the pendulumSwing animation, and makes it repeat infinitely every 2 seconds. */
	animation: pendulumSwing 2s infinite;
}
/* This animation rotates the pendulum at its end point. It's degrees must counter the transform property above. */
@keyframes pendulumSwing{
	50%{
		transform: rotate(80deg);
	}	
}



/* This is the stem of the pendulum. */
#pendulumStem{
	width: 150%;
	height: 20px;
	background-color: red;
	/* The transform property's top value must be half the height of the stem so that it sits at the center of the pendulumContainer radial. */
	transform: translate(0px, -10px);
	transform-origin: center left;
	border: 1px solid #000000;
	background-image: linear-gradient(#696969, #d3d3d3, #696969);
}


/* This is the all at the end of the pendulum. */
#pendulumEnd{
	position: absolute;
	width: 80px;
	height: 80px;
	/* The top value must be half the height so that it sits at the center of the pendulumContainer radial. */
	top: -40px;
	left: 125%;
	border: 1px solid #000000;
	border-radius: 50%;
	background-image: radial-gradient(#ffffff, #696969);	
}