/*
@font-face {
	font-family: 'Darumadrop One';
	src: url('/public/fonts/darumadrop-one/DarumadropOne-Regular.ttf') format('truetype');
}
*/

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

body {
	min-height: 100vh;
	margin: 0;
	padding: 0;

	background: hsl(0 0 50%);
}

#chat {
	position: relative;
	top: .33em;
	min-height: calc(100vh - .66em);
	max-width: 600px;
	margin: .33em;

	display: flex;
	flex-direction: column;
	justify-content: end;
	gap: .25em;

	font-family: "Darumadrop One", sans-serif;
	font-size: 32px;
	line-height: 1em;

	word-wrap: break-word;

	&.end {
		text-align: end;
		align-items: end;
	}
}

.message {
	width: 100%;

	--colour: hsl(0 0 75%);

	color: hsl(0 0 100%);
	text-shadow: .05em .05em 0 hsl(0 0 0 / 75%);

	&.system {
		width: 420px;
		margin: 0 1em;

		display: flex;
		flex-direction: row;

		--colour: hsl(0 0 100%);
		color: var(--colour);

		&.follow		{ --hue: 128; }
		&.subscribe		{ --hue: 284; }
		&.cheer			{ --hue: 222; }
		&.raid			{ --hue: 28; }
		&.poll			{ --hue: 269; }
		&.shoutout		{ --hue: 104; }
		&.point-redeem	{ --hue: 338; }

		&.follow, &.subscribe, &.cheer, &.raid, &.poll, &.shoutout, &.point-redeem {
			--colour: oklch(80% 80% var(--hue) / 100%);
		}

		.icon {
			height: .5em;
			margin-top: .3em;
			margin-right: .2em;
			transform: translateY(.15em);
			aspect-ratio: 1;

			background-color: var(--colour);
			border-radius: 100%;
			box-shadow: .05em .05em 0 hsl(0 0 0 / 75%);
		}
	}

	p { margin: 0; }

	.header {
		color: var(--colour);
	}

	.content {
		z-index: 1;
		position: relative;
	}
}