@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&family=Quicksand:wght@500;700&display=swap&display=swap');

html,
body {
	overflow: hidden;
	height: 100vh;
	margin-top: 0;
	font-family: Quicksand, sans-serif;

	--animation-duration: 500ms;
}

[data-twitch-chat] {
	list-style: none;
	margin: 0;
	padding: 0.1em;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: #333;
}

[data-twitch-message] {
	background-image: radial-gradient(circle at top left, white, #ccc);
	margin-bottom: 1em;
	margin-top: 1em;
	padding: 0.75em;
	word-wrap: break-word;
	box-shadow: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgb(0 0 0 / 40%),
		0 10px 10px -5px rgb(0 0 0 / 10%);
	transition: opacity var(--animation-duration) ease-in,
		transform var(--animation-duration) ease-in;
	opacity: 0;
	transform: rotateX(-90deg);
	animation: show var(--animation-duration) 100ms
		cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
}

@keyframes show {
	100% {
		opacity: 1;
		transform: none;
	}
}

[data-twitch-message]:not(:last-of-type) {
	opacity: 0.5;
	transform: scale(0.95);
	animation: none;
}

[data-twitch-message]:nth-last-child(n + 5) {
	opacity: 0;
	transform: rotateX(-90deg);
	transition: opacity var(--animation-duration) ease-in,
		transform var(--animation-duration) ease-in;
}

.twitch-chat-sender {
	font-family: Poppins, sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--twitch-sender-color, #0e2058);
	margin-bottom: 0.1em;
}

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

[data-twitch-mentioned-user],
.twitch-chat-command {
	background: transparent;
	font-weight: 700;
}

[data-twitch-emote] {
	width: 1.7em;
	margin-bottom: -0.3em;
}

[data-twitch-message] a {
	color: navy;
	text-decoration: none;
}
