:root{
	--base-color: #6b21a8;
	--shimmer-color: #ff5ac4;
	--shimmer-width: 25%;
	--duration: 2.2s;
}

body{
	min-height: 100vh;
	display: grid;
	place-items: center;
	margin: 0;
	background: #0b0b10;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.shimmer {
	font-size: clamp(2rem, 7vw, 6rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;

	/*background: linear-gradient(
		90deg,
		var(--base-color) 0%,
		var(--base-color) calc(50% - var(--shimmer-width)/2),
		var(--shimmer-color) calc(50% - var(--shimmer-width)/2 + 0%),
		var(--shimmer-color) calc(50% + var(--shimmer-width)/2),
		var(--base-color) calc(50% + var(--shimmer-width)/2),
		var(--base-color) 100%
	);*/
	
	background: linear-gradient(
		90deg,
		var(--base-color) 0%,
		var(--shimmer-color) calc(50% + var(--shimmer-width) / 2),
		var(--base-color) 100%
	);

	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: shimmer var(--duration) linear infinite;

	text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

@keyframes shimmer {
	0%   { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
	.shimmer {
		color: var(--base-color);
		background: none;
		-webkit-text-fill-color: initial;
		text-shadow:
			0 0 0 rgba(0,0,0,0),
			0 0 20px rgba(255,90,180,0.06);
	}
}