@font-face {
  font-family: "NCND";
  src: url("../font/ncnd.woff2");
  font-style: normal;
  font-stretch: normal;
  font-weight: 250 900;
}

:root {
	--wght: 250;
	--vmin: 1vmin;
	--vmax: 1svmax;
	--vh: 1vh;
	--vw: 1vw;
	--digits: 4 + 1;
	
}
@supports (font-size: 1svmin) {
	:root {
		--vmin: 1svmin;
		--vmax: 1svmax;
		--vh: 1svh;
		--vw: 1svw;
	}
}

body {
	font-family: "NCND", monospace;
	display: grid;
	height: calc(100 * var(--vh));
	margin: 0 5vw;
	padding: 0;
	align-content: end;
	justify-content: stretch;
	background: silver;
}
div {
	width: auto;
	display: grid;
	background: whitesmoke;
	border: solid;
	border-width: 1px 1px 0;
	padding: calc(10 * var(--vmin)) calc(10 * var(--vmin));
	font-size: clamp(.8em, 3vw, 14em);
}
@media (max-width: 30em) {
	body {
		margin: 0 2vw;
	}
	div {
		padding: calc(5 * var(--vmin)) calc(5 * var(--vmin));
	}
}

time {
	line-height: .8;
	position: relative;
	z-index: calc(1440 - var(--index) );
}

time:last-of-type {
	z-index: 1;
	animation: scrollTo .5s;
}

span {
	font-variation-settings: "wght" var(--wght);
	
}
time:last-of-type span {
	opacity: 0;
	animation: appear .1s calc( var(--index) * .1s + .5s ) forwards;
}
span:first-of-type {
	--index: 1;
}
span:nth-of-type(2) {
	--index: 2;
}
span:nth-of-type(3) {
	--index: 3;
}
span:nth-of-type(4) {
	--index: 4;
}
span:nth-of-type(5) {
	--index: 5;
}
span:nth-of-type(6) {
	--index: 6;
}
span:nth-of-type(7) {
	--index: 7;
}
span:nth-of-type(8) {
	--index: 8;
}
span:nth-of-type(9) {
	--index: 9;
}
span:nth-of-type(10) {
	--index: 10;
}
span:nth-of-type(11) {
	--index: 11;
}
span:nth-of-type(12) {
	--index: 12;
}
span:nth-of-type(13) {
	--index: 13;
}
span:nth-of-type(14) {
	--index: 14;
}
span:nth-of-type(15) {
	--index: 15;
}
span:nth-of-type(16) {
	--index: 16;
}
span:nth-of-type(17) {
	--index: 17;
}
span:nth-of-type(18) {
	--index: 18;
}
span:nth-of-type(19) {
	--index: 19;
}
span:nth-of-type(20) {
	--index: 20;
}
span:nth-of-type(21) {
	--index: 21;
}
span:nth-of-type(22) {
	--index: 22;
}
span:nth-of-type(23) {
	--index: 23;
}
span:nth-of-type(24) {
	--index: 24;
}
span:nth-of-type(25) {
	--index: 25;
}
span:nth-of-type(26) {
	--index: 26;
}
span:nth-of-type(27) {
	--index: 27;
}
span:nth-of-type(28) {
	--index: 28;
}
span:nth-of-type(29) {
	--index: 29;
}
span:nth-of-type(30) {
	--index: 30;
}
span:nth-of-type(31) {
	--index: 31;
}
span:nth-of-type(32) {
	--index: 32;
}
span:nth-of-type(33) {
	--index: 33;
}
span:nth-of-type(34) {
	--index: 34;
}
span:nth-of-type(35) {
	--index: 35;
}
span:nth-of-type(36) {
	--index: 36;
}
span:nth-of-type(37) {
	--index: 37;
}
span:nth-of-type(38) {
	--index: 38;
}
del {
	font-feature-settings: "ss02" on;
}

@keyframes appear {
	0% {
		opacity: 0;
	}
	99%, 100% {
		opacity: 1;
	}
}
@keyframes scrollTo {
	0% {
		max-height: 0;
	}
	100% {
		max-height: 1em;
	}
}