ui/bloodcounter.razor.scss
BloodCounter
{
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	font-family: Poppins;
}

.blood
{
	position: absolute;
	top: 36px;
	width: 100%;
	flex-direction: column;
	align-items: center;
	transform-origin: 50% 0%;

	.title
	{
		font-size: 16px;
		font-weight: 800;
		font-style: italic;
		letter-spacing: 6px;
		color: #ffd9d9;
		text-shadow: 0 2px 6px rgba( 0, 0, 0, 0.6 );
	}

	.amount
	{
		flex-direction: row;
		align-items: flex-end;
	}

	.number
	{
		font-size: 58px;
		font-weight: 900;
		font-style: italic;
		color: #c0101c;
		text-stroke-width: 6px;
		text-stroke-color: #2a0206;
		text-shadow: 0 4px 10px rgba( 0, 0, 0, 0.55 );
	}

	.unit
	{
		font-size: 26px;
		font-weight: 800;
		font-style: italic;
		margin-left: 6px;
		margin-bottom: 10px;
		color: #c0101c;
		text-stroke-width: 4px;
		text-stroke-color: #2a0206;
	}

	.best
	{
		margin-top: 2px;
		font-size: 18px;
		font-weight: 900;
		font-style: italic;
		letter-spacing: 3px;
		color: #fff3b0;
		text-stroke-width: 4px;
		text-stroke-color: #4a2a7a;
	}
}