added beter ui to the clock!

src/IdleScreen/time.svelte

@@ -8,9 +8,20 @@
 	let sec1;
 	let sec2;
 
+	let AMorPM = "AM";
+
 	function updateTime() {
 		const now = new Date();
-		const hours = now.getHours().toString().padStart(2, "0");
+
+		let hours = now.getHours().toString().padStart(2, "0");
+
+		if (now.getHours() > 12) {
+			hours = (now.getHours() - 12).toString().padStart(2, "0");
+			AMorPM = "PM";
+		} else {
+			AMorPM = "AM";
+		}
+
 		const minutes = now.getMinutes().toString().padStart(2, "0");
 		const seconds = now.getSeconds().toString().padStart(2, "0");
 
@@ -29,6 +40,7 @@
 </script>
 
 <div id="root">
+	<div id="wrap">
 		<div class="rowOfNumbers" bind:this={hour1}>
 			<h1>0</h1>
 			<h1>1</h1>
@@ -103,14 +115,24 @@
 			<h1>8</h1>
 			<h1>9</h1>
 		</div>
+		<h1 id="amorpm">{AMorPM}</h1>
+	</div>
 </div>
 
 <style>
 	#root {
+		display: grid;
+		place-items: center;
+		height: 100%;
+	}
+
+	#wrap {
 		display: flex;
 		justify-content: center;
-		align-items: center;
-		height: 100%;
+		align-items: baseline;
+		background-color: #252525;
+        padding: 20px 70px;
+        border-radius: 20px;
 	}
 
 	#colen {
@@ -164,4 +186,11 @@
 		margin: 0;
 		color: #585858;
 	}
+
+	#amorpm {
+		font-size: 75px;
+		margin: 0;
+		margin-left: 30px;
+		color: #585858;
+	}
 </style>