* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--bg: hsl(var(--hue),90%,90%);
	--fg: hsl(var(--hue),10%,10%);
	--primary: hsl(var(--hue),90%,55%);
	--trans-dur: 0.3s;
	font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
	background-color: var(--bg);
	color: #fff;
	font: 1em/1.5 "DM Sans", sans-serif;
	/*height: 100vh;*/
	display: grid;
	place-items: center;
	transition: background-color var(--trans-dur), color var(--trans-dur);
}

.clock {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.clock__block {
	background-color: #2c2c2c;
	border-radius: 0.5rem;
	box-shadow: 0 1rem 2rem hsla(var(--hue),90%,50%,0.3);
	font-size: 1.5em;
	line-height: 2;
	margin: 0.75rem;
	overflow: hidden;
	text-align: center;
	width: 3rem;
	height: 3rem;
}
.clock__block--small {
	border-radius: 2.25rem;
	box-shadow: 0 0.5rem 2rem hsla(var(--hue),90%,50%,0.3);
	font-size: 1em;
	line-height: 3;
	width: 3rem;
	height: 3rem;
}
.clock__colon {
	display: none;
	font-size: 2em;
	opacity: 0.5;
	position: relative;
}
.clock__colon:before,
.clock__colon:after {
	background-color: currentColor;
	border-radius: 50%;
	content: "";
	display: block;
	position: absolute;
	top: -0.05em;
	left: -0.05em;
	width: 0.1em;
	height: 0.1em;
	transition: background-color var(--trans-dur);
}
.clock__colon:before {
	transform: translateY(-200%);
}
.clock__colon:after {
	transform: translateY(200%);	
}
.clock__digit-group {
	display: flex;
	flex-direction: column-reverse;
}
.clock__digits {
	width: 100%;
	height: 100%;
}
.clock__block--bounce {
	animation: bounce 0.75s; 
}
.clock__block--bounce .clock__digit-group {
	animation: roll 0.75s ease-in-out forwards; 
	transform: translateY(-50%);
}
.clock__block--delay1,
.clock__block--delay1 .clock__digit-group {
	animation-delay: 0.1s;
}
.clock__block--delay2,
.clock__block--delay2 .clock__digit-group {
	animation-delay: 0.2s;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,10%);
		--fg: hsl(var(--hue),10%,90%);
	}
	.clock__block {
		background-color: hsl(var(--hue),90%,40%);
		box-shadow: 0 1rem 2rem hsla(var(--hue),90%,60%,0.4);
	}
	.clock__block--small {
		box-shadow: 0 0.5rem 2rem hsla(var(--hue),90%,60%,0.4);
	}
}

/* Beyond mobile */
@media (min-width: 768px) {
	.clock {
		flex-direction: row;
	}
	.clock__colon {
		display: none;
	}
}

/* Animations */
@keyframes bounce {
	from,
	to {
		animation-timing-function: ease-in;
		transform: translateY(0);
	}
	50% {
		animation-timing-function: ease-out;
		transform: translateY(15%);
	}
}
@keyframes roll {
	from {
		transform: translateY(-50%);
	}
	to {
		transform: translateY(0);
	}
}