@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&display=swap');

html,
body {
	background-color: black;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100%;
	font-family: 'DM Mono', monospace;
}

h1 {
	position: relative;
	font-size: 4rem;
	text-align: center;
	z-index: 1;
}

body.yes saturday-timer {
	animation-name: shake-slow;
	animation-duration: 10s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

body.yes h1 {
	animation-name: shake-slow;
	animation-duration: 5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

saturday-timer {
	position: relative;
	z-index: 1;
}

svg {
	display: none;
	position: fixed;
}

#nomnom {
	bottom: -50px;
	width: 100%;
	max-height: 100%;
	height: auto;
	z-index: 0;
}

body.yes #nomnom {
	animation-name: shake-slow;
	animation-duration: 8s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

body.yes [id^="burger-"] {
	display: block;
}

body.yes #nomnom {
	display: block;
}

#frame1,
#frame2,
#frame3 {
	animation-name: show;
	animation-duration: 183ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#frame1 {
	animation-delay: 0;
}

#frame2 {
	animation-delay: 61ms;
}

#frame3 {
	animation-delay: 122ms;
}

@keyframes fall {
	from {
		transform: translateY(-100vh) rotate(0);
	}

	to {
		transform: translateY(100vh) rotate(1800deg);
	}
}

@keyframes show {
	from {
		opacity: 1;
	}

	33% {
		opacity: 1;
	}

	34% {
		opacity: 0;
	}

	to {
		opacity: 0;
	}
}

@keyframes shake-slow {
	2% {
		transform: translate(10px, 3px) rotate(1.5deg);
	}
	4% {
		transform: translate(-4px, -9px) rotate(-2.5deg);
	}
	6% {
		transform: translate(1px, -1px) rotate(-1.5deg);
	}
	8% {
		transform: translate(-3px, -5px) rotate(-0.5deg);
	}
	10% {
		transform: translate(6px, -8px) rotate(-1.5deg);
	}
	12% {
		transform: translate(-8px, 4px) rotate(0.5deg);
	}
	14% {
		transform: translate(3px, 7px) rotate(-1.5deg);
	}
	16% {
		transform: translate(10px, -1px) rotate(0.5deg);
	}
	18% {
		transform: translate(5px, -5px) rotate(-1.5deg);
	}
	20% {
		transform: translate(8px, -4px) rotate(-2.5deg);
	}
	22% {
		transform: translate(0px, 2px) rotate(3.5deg);
	}
	24% {
		transform: translate(-3px, -7px) rotate(-0.5deg);
	}
	26% {
		transform: translate(-2px, 6px) rotate(-0.5deg);
	}
	28% {
		transform: translate(-2px, -5px) rotate(0.5deg);
	}
	30% {
		transform: translate(2px, 9px) rotate(1.5deg);
	}
	32% {
		transform: translate(-9px, -2px) rotate(-0.5deg);
	}
	34% {
		transform: translate(4px, 4px) rotate(3.5deg);
	}
	36% {
		transform: translate(-9px, 9px) rotate(-2.5deg);
	}
	38% {
		transform: translate(1px, -2px) rotate(-1.5deg);
	}
	40% {
		transform: translate(-7px, 9px) rotate(2.5deg);
	}
	42% {
		transform: translate(-8px, -7px) rotate(2.5deg);
	}
	44% {
		transform: translate(1px, 7px) rotate(-0.5deg);
	}
	46% {
		transform: translate(9px, -8px) rotate(-1.5deg);
	}
	48% {
		transform: translate(1px, -7px) rotate(0.5deg);
	}
	50% {
		transform: translate(0px, 1px) rotate(3.5deg);
	}
	52% {
		transform: translate(1px, 7px) rotate(-2.5deg);
	}
	54% {
		transform: translate(-4px, 1px) rotate(-1.5deg);
	}
	56% {
		transform: translate(8px, 1px) rotate(-1.5deg);
	}
	58% {
		transform: translate(5px, 0px) rotate(-0.5deg);
	}
	60% {
		transform: translate(-8px, -1px) rotate(1.5deg);
	}
	62% {
		transform: translate(0px, 9px) rotate(-0.5deg);
	}
	64% {
		transform: translate(-2px, 7px) rotate(3.5deg);
	}
	66% {
		transform: translate(10px, 1px) rotate(3.5deg);
	}
	68% {
		transform: translate(10px, 7px) rotate(3.5deg);
	}
	70% {
		transform: translate(2px, -5px) rotate(1.5deg);
	}
	72% {
		transform: translate(-4px, 10px) rotate(0.5deg);
	}
	74% {
		transform: translate(-8px, 0px) rotate(-1.5deg);
	}
	76% {
		transform: translate(3px, 3px) rotate(-0.5deg);
	}
	78% {
		transform: translate(-9px, -4px) rotate(-2.5deg);
	}
	80% {
		transform: translate(5px, -2px) rotate(0.5deg);
	}
	82% {
		transform: translate(-5px, -3px) rotate(2.5deg);
	}
	84% {
		transform: translate(5px, 10px) rotate(1.5deg);
	}
	86% {
		transform: translate(-8px, 4px) rotate(-2.5deg);
	}
	88% {
		transform: translate(-9px, 2px) rotate(2.5deg);
	}
	90% {
		transform: translate(10px, -4px) rotate(3.5deg);
	}
	92% {
		transform: translate(-4px, -3px) rotate(-1.5deg);
	}
	94% {
		transform: translate(4px, 8px) rotate(1.5deg);
	}
	96% {
		transform: translate(7px, -4px) rotate(-2.5deg);
	}
	98% {
		transform: translate(5px, -2px) rotate(-2.5deg);
	}
	0%, 100% {
		transform: translate(0, 0) rotate(0);
	}
}