@import url('https://fonts.googleapis.com/css2?family=Megrim&display=swap');

:root {
	--sender-glow-color: deepskyblue;
	--message-glow-color: deepskyblue;
	--emote-glow-color: lightseagreen;
	--mention-glow-color: darkorange;
	--command-glow-color: magenta;
}

html,
body {
	overflow: hidden;
	height: 100vh;
	margin: 0;
	filter: contrast(150%);
	font-family: Megrim, sans-serif;
}

[data-twitch-chat] {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100vh;
	overflow: auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

[data-twitch-chat] > * {
	margin-top: 1rem;
}

[data-twitch-chat] > *:last-child {
	margin-bottom: 2rem;
}

[data-twitch-message-reply] {
	display: none;
}

[data-twitch-message] {
	color: white;
	text-shadow: 0 0 7px rgb(188 253 254 / 80%), 0 0 7px rgb(188 253 254 / 80%),
		0 0 7px rgb(188 253 254 / 80%), 0 0 7px rgb(188 253 254 / 80%);
}

@keyframes flicker {
	0%,
	18%,
	18.4%,
	22%,
	22.4%,
	25%,
	25.4%,
	53%,
	53.4%,
	57%,
	57.4%,
	100% {
		text-shadow: 0 0 calc(7px / 1.75) var(--neon-glow-color),
			0 0 calc(10px / 1.75) var(--neon-glow-color),
			0 0 calc(21px / 1.75) var(--neon-glow-color),
			0 0 calc(42px / 1.75) var(--neon-glow-color),
			0 0 calc(82px / 1.75) var(--neon-glow-color),
			0 0 calc(92px / 1.75) var(--neon-glow-color),
			0 0 calc(102px / 1.75) var(--neon-glow-color),
			0 0 calc(7px / 1.75) var(--neon-glow-color),
			0 0 calc(10px / 1.75) var(--neon-glow-color),
			0 0 calc(21px / 1.75) var(--neon-glow-color);
		color: white;
		font-style: normal;
	}

	0.0%,
	18.2%,
	22.2%,
	25.2%,
	53.2%,
	57.2% {
		text-shadow: 0 0 calc(7px / 1.75) var(--neon-glow-color),
			0 0 calc(10px / 1.75) var(--neon-glow-color),
			0 0 calc(21px / 1.75) var(--neon-glow-color),
			0 0 calc(7px / 1.75) var(--neon-glow-color),
			0 0 calc(10px / 1.75) var(--neon-glow-color),
			0 0 calc(21px / 1.75) var(--neon-glow-color);
		color: rgb(255 255 255 / 70%);
	}

	82.99% {
		font-style: normal;
	}

	83% {
		font-style: italic;
	}

	84% {
		font-style: normal;
	}
}

.twitch-chat-sender {
	--neon-glow-color: var(--sender-glow-color);

	text-shadow: 0 0 calc(7px / 1.75) var(--neon-glow-color),
		0 0 calc(10px / 1.75) var(--neon-glow-color),
		0 0 calc(21px / 1.75) var(--neon-glow-color),
		0 0 calc(42px / 1.75) var(--neon-glow-color),
		0 0 calc(82px / 1.75) var(--neon-glow-color),
		0 0 calc(92px / 1.75) var(--neon-glow-color),
		0 0 calc(102px / 1.75) var(--neon-glow-color),
		0 0 calc(151px / 1.75) var(--neon-glow-color),
		0 0 calc(7px / 1.75) var(--neon-glow-color),
		0 0 calc(10px / 1.75) var(--neon-glow-color),
		0 0 calc(21px / 1.75) var(--neon-glow-color),
		0 0 calc(42px / 1.75) var(--neon-glow-color),
		0 0 calc(82px / 1.75) var(--neon-glow-color),
		0 0 calc(92px / 1.75) var(--neon-glow-color),
		0 0 calc(102px / 1.75) var(--neon-glow-color),
		0 0 calc(151px / 1.75) var(--neon-glow-color);
	color: rgb(255 255 255 / 80%);
	font-size: 115%;
	animation: flicker 6s infinite;
}

.twitch-chat-message {
	--neon-glow-color: var(--message-glow-color);

	display: inline;
	color: white;
	text-shadow: 0 0 calc(3px / 1.75) var(--neon-glow-color),
		0 0 calc(7px / 1.75) var(--neon-glow-color),
		0 0 calc(7px / 1.75) var(--neon-glow-color);
	max-width: 50ch;
	word-wrap: break-word;
	line-height: 1.2rem;
}

[data-twitch-emote] {
	width: 1.5em;
	margin-bottom: -0.3em;
	filter: opacity(0.55) brightness(1.2) grayscale(0.6)
		drop-shadow(0 0 0 var(--emote-glow-color))
		drop-shadow(0 0 calc(5px / 1.75) var(--emote-glow-color));
}

[data-twitch-mentioned-user] {
	--neon-glow-color: var(--command-glow-color);

	background-color: transparent;
	color: white;
	animation: flicker 8s infinite;
}

[data-twitch-message] a {
	--neon-glow-color: var(--emote-glow-color);

	animation: flicker 7s infinite;
	text-decoration: none;
}
