1 files changed, 221 insertions, 0 deletions
diff --git a/assets/presenter.css b/assets/presenter.css
new file mode 100644
index 0000000..ee5bdec
--- /dev/null
+++ b/assets/presenter.css
@@ -0,0 +1,221 @@
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
+
+html, body {
+	margin: 0;
+	height: 100%;
+	background: #000;
+	overflow: hidden;
+}
+
+#scoreboard-frame {
+	position: fixed;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	border: none;
+}
+
+#solve-overlay {
+	position: fixed;
+	inset: 0;
+	background: #050505;
+	opacity: 0;
+	transition: opacity 0.3s ease;
+	z-index: 10;
+	pointer-events: none;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+#solve-overlay.visible {
+	opacity: 1;
+}
+
+#solve-text {
+	text-align: center;
+	font-family: "Source Code Pro";
+	letter-spacing: 0.05em;
+	color: white;
+}
+
+#solve-first {
+	display: none;
+}
+
+#solve-first.visible {
+	display: flex;
+	height: 35vh;
+	margin: -5vh 0 -2vh 0;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+}
+
+#solve-first img {
+	z-index: 99999;
+	position: relative;
+	height: 100%
+}
+
+#solve-team {
+	white-space: nowrap;
+	font-size: 15vh;
+	font-weight: 900;
+	letter-spacing: 4px;
+}
+
+#solve-value {
+	margin-top: 2vh;
+	font-weight: 700;
+	font-size: 10vh;
+}
+
+#solve-challenge {
+	margin-top: 2vh;
+	font-weight: 400;
+	font-size: 10vh;
+	letter-spacing: -0.1em;
+}
+
+
+
+.glitch {
+	position: relative;
+}
+
+.glitch::before,
+.glitch::after {
+	content: attr(data-text);
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: #050505;
+}
+
+.glitch::before {
+	left: 3px;
+	text-shadow: -2px 0 #ff00c1;
+	clip-path: inset(44% 0 61% 0);
+	animation: glitch-anim 2s infinite linear alternate-reverse;
+}
+
+.glitch::after {
+	left: -3px;
+	text-shadow: -2px 0 #00fff9;
+	clip-path: inset(54% 0 10% 0);
+	animation: glitch-anim 2.5s infinite linear alternate-reverse;
+}
+
+@keyframes glitch-anim {
+	0% { clip-path: inset(80% 0 10% 0); }
+	20% { clip-path: inset(10% 0 70% 0); }
+	40% { clip-path: inset(50% 0 20% 0); }
+	60% { clip-path: inset(10% 0 60% 0); }
+	80% { clip-path: inset(30% 0 40% 0); }
+	100% { clip-path: inset(60% 0 5% 0); }
+}
+
+
+
+.scanlines {
+	overflow: hidden;
+	mix-blend-mode: difference;
+}
+
+.scanlines::before {
+	content: "";
+	position: absolute;
+	width: 100%;
+	height: 150%;
+	top: -25%;
+	left: 0;
+	background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.02) 0.25%, transparent 0.5%);
+	animation: fudge 5s linear infinite;
+}
+
+@keyframes fudge {
+	from {
+		transform: translate(0px, 0);
+	}
+	to {
+		transform: translate(0px, 5%);
+	}
+}
+
+
+
+.sparkler-light {
+	width: 9rem;
+	height: 100%;
+	position: relative;
+	top: -10vh;
+}
+
+.spark {
+	position: absolute;
+	width: 0.1rem;
+	height: 0.1rem;
+	bottom: 4.3rem;
+	left: 4.35rem;
+	transform: rotate(var(--spark-rotate));
+}
+
+.spark::after {
+	content: '';
+	display: block;
+	position: absolute;
+	bottom: 0;
+	width: 0.1rem;
+	height: 2rem;
+	border-radius: 0.1rem;
+	opacity: 0;
+	background-color: white;
+	transform-origin: bottom center;
+	animation: sparkler-sparkle var(--spark-duration) infinite linear;
+	animation-delay: var(--spark-delay);
+}
+
+@keyframes sparkler-light-pulsating {
+	0%   {
+		transform: scale(1);
+	}
+	25%   {
+		transform: scale(1.1);
+	}
+	75%   {
+		transform: scale(0.9);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+
+@keyframes sparkler-sparkle {
+	0%   {
+		transform: translateY(-0.5vh) scaleY(0.25);
+		opacity: 0;
+	}
+	10%   {
+		transform: translateY(-3vh) scaleY(0.5);
+		opacity: 0.35;
+	}
+	30%   {
+		transform: translateY(-6vh) scaleY(0.5);
+		opacity: 0.7;
+	}
+	50% {
+		transform: translateY(-10vh) scaleY(1.5);
+		opacity: 0.7;
+	}
+	51% {
+		opacity: 0;
+		transform: translateY(-4vh) scaleY(1);
+	}
+	100% {
+		opacity: 0;
+		transform: translateY(0) scaleY(0.25);
+	}
+}