body {
	background-color: rgb(254, 255, 253);
}

canvas {
	margin-left: calc(50% - 200px);
}

function setup(){
	//Set up HTML Canvas
	createCanvas(400,400);
	angleMode(DEGREES);
}

function draw(){
	
	//Set up rotation & bg color
	background(254, 255, 253);
	translate(200, 200);
	rotate(-90);
	
	//Set up time vars
	let hr = hour();
	let min = minute();
	let sec = second();
	
	//Default settings for time arcs
	noFill();
	strokeWeight(8);
	
	//Seconds arc
	let secAngle = map(sec, 0, 60, 0, 360);
	stroke(188, 206, 217);
	arc(0, 0, 300, 300, 0, secAngle);
	
	//minuets arc
	let minAngle = map(min, 0, 60, 0, 360);
	stroke(154, 181, 198);
	arc(0, 0, 280, 280, 0, minAngle);
	
	//Hours arc
	let hrAngle = map(hr % 12, 0, 12, 0, 360);
	stroke(71, 121, 152);
	arc(0, 0, 260, 260, 0, hrAngle);
	
	//seconds hand
	push();
	rotate(secAngle);
	strokeWeight(2);
	stroke(188, 206, 217);
	line(0, 0, 80, 0);
	pop();
	
	//Minuets hand
	push();
	rotate(minAngle);
	strokeWeight(4);
	stroke(154, 181, 198);
	line(0, 0, 80, 0);
	pop();
	
	//Hours hand
	push();
	rotate(hrAngle);
	strokeWeight(8);
	stroke(71, 121, 152);
	line(0, 0, 100, 0);
	pop();
	
	//Dot in the middle
	stroke(254, 255, 253);
  point(0, 0);
	
	
	//Settings for time text
	fill(154, 181, 198);
	noStroke();
	rotate(90);
	
	//Time text
	textAlign(CENTER, BOTTOM);
	text(nf(hr, 2) + ":" + nf(min, 2) + ":" + nf(sec, 2), 0, 190);
}