@font-face {
	src: url('../PlakatoPro-Regular.otf');
	font-family: Plakato;
}
@font-face {
	src: url('../VeryBauble.woff2');
	font-family: "Very Bauble";
}
html {
	--baseColor: silver;
}

body {
	display: grid;
	place-items: center;
	height: 100vh;
	font-family: "Very Bauble";
	font-size: 5.8cqmin;
	line-height: 1.15;
	background: oklch(from var(--baseColor) 21% c h);
	font-variation-settings: "SERF" calc(100 / 60 * var(--min) * 10);
	margin: 0;
}
time {
	width: 80vmin;
	aspect-ratio: 1;
}

span {
	color: oklch(from var(--baseColor) 0% c h);
	transition: color 5s;
	transition-timing-function: cubic-bezier(0,1,.65,.93);
}
span:first-of-type,
span.lit {
	color: oklch(from var(--baseColor) 90% c h);
	transition: color 1s;
}
#or-thereabouts.lit {
	transition: color 1s 10s;
}
#om-en-nabij,
#quarter,
#a-little {
	display: inline-block;
}

body > button {
	display: none;
}
button.clickme {
	display: block;
	position: absolute;
	top: .1em;
	right: .1em;
	font: inherit;
	line-height: 1.4;
}
dialog * {
	color: black;
	text-decoration: none;
}
dialog button {
	font: inherit;
	appearance: none;
	border: none;
	background: none;
}
::backdrop {
	background: hsla(50, 12%, 92%, .5);
	backdrop-filter: blur(.2em);
}