@font-face {
	font-family: "Azeret Mono";
	src:
		local("Azeret Mono"),
		url("AzeretMono.ttf") format("truetype");
}

* {
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: .2rem .5rem;
}
body {
	background-color: #111;
	color: #f6f6f6;

	font-family: 'Azeret Mono', monospace;
	font-size: min(5vw, 30px);
	word-spacing: -.5ch;
	text-align: center;

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

main {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: safe center;
}
h1 {
	font-size: min(15vw, 5rem);
}
.countdown {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.countdown p {
	margin-block: .2em;
}
#countdown {
	font-size: min(13vw, max(3vw, 3rem));
}
.link {
	margin-block-start: 5rem;
	font-size: min(5vw, 1rem);
	word-spacing: -.5ch;
}
a {
	color: lightblue;
	text-decoration: none;
	font-weight: 200;
}
footer {
	font-size: min(5vw, .45rem);
	word-spacing: normal;
	font-style: italic;
	color: #333;
	margin-block-start: 5rem;
}
footer span {
	display: inline-block;
}

.glitch {
	position: relative;
	display: inline-block;
}
.glitch::before, .glitch::after {
	content: attr(data-glitch);
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0;
}
.glitch::before {
	left: 3px;
	text-shadow: -2px 0 magenta;
	animation: glitch-animation-1 2s linear infinite, hide 3.5s linear infinite;
	animation-direction: reverse-alternate;
}
.glitch::after {
	left: -3px;
	text-shadow: -2px 0 lightgreen;
	animation: glitch-animation-2 2s linear infinite, hide 6s linear infinite;
	animation-direction: reverse-alternate;
}
@keyframes hide {
	0% { opacity: 0; }
	80% { opacity: 0; }
	80.01% { opacity: 1; }
	100% { opacity: 1; }
}
@keyframes glitch-animation-1 {
	0% { clip-path: rect(134px 100% 48px 0%); }
	5% { clip-path: rect(87px 100% 74px 0%); }
	10% { clip-path: rect(99px 100% 141px 0%); }
	15% { clip-path: rect(27px 100% 10px 0%); }
	20% { clip-path: rect(20px 100% 69px 0%); }
	25% { clip-path: rect(56px 100% 76px 0%); }
	30% { clip-path: rect(37px 100% 14px 0%); }
	35% { clip-path: rect(133px 100% 55px 0%); }
	40% { clip-path: rect(98px 100% 54px 0%); }
	45% { clip-path: rect(15px 100% 23px 0%); }
	50% { clip-path: rect(125px 100% 129px 0%); }
	55% { clip-path: rect(122px 100% 130px 0%); }
	60% { clip-path: rect(122px 100% 40px 0%); }
	65% { clip-path: rect(78px 100% 121px 0%); }
	70% { clip-path: rect(3px 100% 83px 0%); }
	75% { clip-path: rect(16px 100% 122px 0%); }
	80% { clip-path: rect(8px 100% 50px 0%); }
	85% { clip-path: rect(48px 100% 28px 0%); }
	90% { clip-path: rect(13px 100% 22px 0%); }
	95% { clip-path: rect(131px 100% 80px 0%); }
	100% { clip-path: rect(105px 100% 83px 0%); }
}
@keyframes glitch-animation-2 {
	0% { clip-path: rect(66px 100% 141px 0%); }
	5% { clip-path: rect(111px 100% 47px 0%); }
	10% { clip-path: rect(61px 100% 116px 0%); }
	15% { clip-path: rect(9px 100% 40px 0%); }
	20% { clip-path: rect(41px 100% 42px 0%); }
	25% { clip-path: rect(121px 100% 33px 0%); }
	30% { clip-path: rect(91px 100% 23px 0%); }
	35% { clip-path: rect(8px 100% 51px 0%); }
	40% { clip-path: rect(50px 100% 13px 0%); }
	45% { clip-path: rect(33px 100% 66px 0%); }
	50% { clip-path: rect(123px 100% 110px 0%); }
	55% { clip-path: rect(140px 100% 49px 0%); }
	60% { clip-path: rect(75px 100% 95px 0%); }
	65% { clip-path: rect(65px 100% 64px 0%); }
	70% { clip-path: rect(65px 100% 22px 0%); }
	75% { clip-path: rect(25px 100% 27px 0%); }
	80% { clip-path: rect(144px 100% 98px 0%); }
	85% { clip-path: rect(129px 100% 64px 0%); }
	90% { clip-path: rect(5px 100% 141px 0%); }
	95% { clip-path: rect(29px 100% 38px 0%); }
	100% { clip-path: rect(84px 100% 140px 0%); }
}


body.has-confetti {
	.confetti-container {
		visibility: visible;
	}
}
.confetti-container {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
}
.confetti {
	width: 15px;
	height: 15px;
	background-color: #f2d74e;
	position: absolute;
	left: 50%;
	animation: confetti 5s ease-in-out -2s infinite;
	transform-origin: left top;
}
.confetti:nth-child(1) {
background-color: #f2d74e; left: 10%; animation-delay: 0;
}
.confetti:nth-child(2) {
background-color: #95c3de; left: 20%; animation-delay: -5s;
}
.confetti:nth-child(3) {
background-color: #ff9a91; left: 30%; animation-delay: -3s;
}
.confetti:nth-child(4) {
background-color: #f2d74e; left: 40%; animation-delay: -2.5s;
}
.confetti:nth-child(5) {
background-color: #95c3de; left: 50%; animation-delay: -4s;
}
.confetti:nth-child(6) {
background-color: #ff9a91; left: 60%; animation-delay: -6s;
}
.confetti:nth-child(7) {
background-color: #f2d74e; left: 70%; animation-delay: -1.5s;
}
.confetti:nth-child(8) {
background-color: #95c3de; left: 80%; animation-delay: -2s;
}
.confetti:nth-child(9) {
background-color: #ff9a91; left: 90%; animation-delay: -3.5s;
}
.confetti:nth-child(10) {
background-color: #f2d74e; left: 100%; animation-delay: -2.5s;
}

@keyframes confetti {
	0% { transform: rotateZ(15deg) rotateY(0deg) translate(0,0); }
	25% { transform: rotateZ(5deg) rotateY(360deg) translate(-5vw,20vh); }
	50% { transform: rotateZ(15deg) rotateY(720deg) translate(5vw,60vh); }
	75% { transform: rotateZ(5deg) rotateY(1080deg) translate(-10vw,80vh); }
	100% { transform: rotateZ(15deg) rotateY(1440deg) translate(10vw,110vh); }
}