html,
body{
	background: black;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.date {
	grid-template-columns: auto auto auto;
}

.digit-pair {
	display: inline-block;
	margin: 1rem;
}

.digit {
	display: inline-grid;
	--mult: 1;
	--clock-size: calc(3.333vw * var(--mult));
	--line-width: calc(var(--clock-size) / 20);
	gap: var(--line-width);
	grid-template-columns: repeat(4, var(--clock-size));
}

.date .digit {
	--mult: 0.6;
}

.clock {
	position: relative;
	background: black;
	width: var(--clock-size);
	height: var(--clock-size);
	border: var(--line-width) solid grey;
	border-radius: 50%;
}

.hand {
	background: white;
	width: 50%;
	height: var(--line-width);
	position: absolute;
	left: 50%;
	top: 50%;
	translate: 0 -50%;
	transform-origin: left;
	transition: 0.5s;
}

@media (max-width: 600px) {
	.time {
		grid-template-columns: 1fr;
	}

	.digit {
		--clock-size: calc(3.333vh * var(--mult));
	}

	.date .digit {
		--mult: 0.30;
		--clock-size: calc(3vh * var(--mult));
	}
}