style: text over axes

src/lib/ScreenInfo.svelte

@@ -45,7 +45,7 @@
 	}
 
 	.window {
-		margin-top: 1em;
+		margin-top: calc(1em / 0.8);
 		font-size: 0.8em;
 	}
 </style>

src/lib/TestCard.svelte

@@ -24,7 +24,7 @@
 	onMount(() => {
 		window.addEventListener('dblclick', () => {
 			document.body.requestFullscreen();
-		})
+		});
 	});
 </script>
 
@@ -42,7 +42,9 @@
 	<Axes />
 
 	<div class="outer"></div>
-	<div class="inner">
+	<div class="inner"></div>
+
+	<div class="info">
 		<ScreenInfo />
 	</div>
 
@@ -84,9 +86,6 @@
 		width: calc(var(--block-size) * var(--circle-blocks));
 		height: calc(var(--block-size) * var(--circle-blocks));
 
-		display: flex;
-		justify-content: center;
-		align-items: center;
 		border: 1px solid white;
 		background: rgba(0, 0, 0, 0.66);
 		border-radius: 50%;
@@ -106,6 +105,14 @@
 		opacity: 0.5;
 	}
 
+	.info {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 10;
+	}
+
 	.column {
 		position: absolute;
 		top: 50%;