@font-face {
	font-family: "BrownLL";
	src: url("../fonts/BrownLL-Regular.woff2") format("woff2");
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #e16056;
}

countdown {
	color: #f0e8e0;
	font-family: BrownLL, sans-serif;
	font-size: 16vw;
	font-feature-settings: 'tnum' on, 'lnum' on, 'salt' on;
}

countdown.hours {
	font-size: 20vw;
}

countdown.minutes {
	font-size: 30vw;
}

countdown.seconds {
	font-size: 50vw;
}

countdown.single-digit {
	font-size: 60vw;
}

countdown.done {
	display: none;
	font-size: 50vw;
	/* animation: fontsize 2s infinite; */
}

number {
	/* width: 10vw; */
	text-align: center;
	display: inline-block;
}

/* .hours number {
	width: 12vw;
}

.minutes number {
	width: 18vw;
}

.seconds number {
	width: 30vw;
} */

@keyframes fontsize {
	0% {
		font-size: 60vw;
	}
	50% {
		font-size: 75vw;
	}
	100% {
		font-size: 60vw;
	}
}




:root {
	--stripe-size: 25vw;
	--color1: #e16056;
	--color2: #f0e8e0;/*#1e1e32;*/
	--duration: 1s;
	--rotation: 45deg;
}

body {
	display: flex;
	height: 100vh;
	overflow: hidden;
}
  
words {
	display: none;
	position: relative;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	font-family: BrownLL, sans-serif;
	font-size: 45vw;
}

words.visible {
	display:flex;
}
  
words::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% + var(--stripe-size));
	height: 100%;
	background: repeating-linear-gradient(
		var(--rotation),
		var(--color2) 25%,
		var(--color2) 50%,
		var(--color1) 50%,
		var(--color1) 75%
	);
	background-size: var(--stripe-size) var(--stripe-size);
	animation: stripeTransform var(--duration) linear infinite;
}
  
words::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	/*background: radial-gradient(ellipse at center, rgba(#1b2735, 0) 0%, #090a0f 100%);*/
}
  
words word {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	text-align: center;
	color: rgba(255, 255, 255, 0);
	background: repeating-linear-gradient(
		var(--rotation),
		var(--color1) 25%,
		var(--color1) 50%,
		var(--color2) 50%,
		var(--color2) 75%
	);
	background-size: var(--stripe-size) var(--stripe-size);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-animation: stripeBackgroundPosition var(--duration) linear infinite;
	animation: stripeBackgroundPosition var(--duration) linear infinite;
}

@keyframes stripeTransform {
	0% {
		transform: translateX(0);
	}
	
	100% {
		transform: translateX(calc(var(--stripe-size) * -1));
	}
}
  
@keyframes stripeBackgroundPosition {
	0% {
		background-position: 0 0;
	}
	
	100% {
		background-position: calc(var(--stripe-size) * -1) 0;
	}
}