:root {
	/* Based on the FFXIII logo gradient */
	--ff-1: #a6246c;
	--ff-2: #1e0126;

	/* Based on the FFX logo gradient */
	--ff-3: #4a44f2;
	--ff-4: #f2a03d;

	--bg-color: #1a1a1a;
	--fg-color: #e0e0e0;
	--card-color: #2a2a2a;
	--error-color: #dc3545;
	--border-color: #404040;
	--success-color: #28a745;
}

html {
	height: 100%;
}

body {
	height: 100%;
	display: grid;
	grid-template: auto 1fr auto / 1fr;

	margin: 0;
	color: var(--fg-color);
	background: var(--bg-color);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	& > header {
		padding: 2rem;
		text-align: center;
		border-bottom: solid 1px var(--border-color);
		background-color: oklch(from var(--bg-color) 25% c h);

		@media screen and (max-width: 1080px) {
			padding: 1rem 2rem;
		}

		& > h1 {
			color: transparent;
			background-clip: text;
			filter: brightness(1.33);
			background-size: 200% 200%;
			animation: ff-gradient 180s ease infinite;
			background-image: linear-gradient(
				90deg,
				var(--ff-1),
				oklch(from var(--ff-2) calc(l + 0.3) calc(c + 0.1) h),
				var(--ff-3),
				var(--ff-4)
			);
		}
	}

	& > main {
		display: grid;
	}

	& > footer {
		padding: 2rem;
		font-size: smaller;
		text-align: center;
		border-top: solid 1px var(--border-color);
		border-bottom: solid 1px var(--border-color);
		background-color: oklch(from var(--bg-color) 25% c h);

		@media screen and (max-width: 1080px) {
			padding: 1rem 2rem;
		}
	}
}

/* animations */
@keyframes ff-gradient {
	0%,
	100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

/* must define anchor-name and position-anchor here, in the light DOM, so it can cross into the shadow realm */
/* see: https://github.com/w3c/csswg-drafts/issues/9408 */
qobuz-link-fixer::part(copy-button) {
	anchor-name: --copy-button-anchor;
}

qobuz-link-fixer::part(copy-popover) {
	position-anchor: --copy-button-anchor;
}