/* Links page: centred profile header and a column of link buttons. */
.linkspage-header {
	margin-block-end: 2rem;
	text-align: center;
}

.linkspage-avatar {
	margin: 0 auto 1rem;
	border-radius: 50%;
	box-shadow: var(--shadow);
	width: 120px;
	height: 120px;
	object-fit: cover;
}

.linkspage-title {
	margin: 0;
}

.linkspage-subtitle {
	margin-block-start: 0.5rem;
	color: var(--fg-muted-4);
}

.linkspage-container {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 2rem auto;
	padding: 0;
	max-width: 400px;
	list-style: none;
}

.linkspage-container li {
	margin: 0;
}

.linkspage-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	transition:
		transform var(--transition-longer),
		box-shadow var(--transition-longer),
		border-color var(--transition-longer);
	box-shadow: var(--edge-highlight), var(--shadow);
	border: 1px solid var(--fg-muted-2);
	border-radius: var(--rounded-corner);
	background-color: var(--fg-muted-1);
	padding: 1rem;
	color: var(--fg-color) !important;
	font-weight: 600;
	text-decoration: none !important;
}

.linkspage-btn:hover,
.linkspage-btn:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 0 0 1px var(--accent-color), var(--shadow-raised);
	border-color: var(--accent-color);
}

/* Icons are monochrome SVGs used as masks, so they follow the theme colours. */
.linkspage-icon {
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
	transition: background-color var(--transition-longer);
	margin-inline-end: 0.75rem;
	background-color: var(--fg-color);
	width: 1.25rem;
	height: 1.25rem;
}

.linkspage-btn:hover .linkspage-icon,
.linkspage-btn:focus-visible .linkspage-icon {
	background-color: var(--accent-color);
}

@media (prefers-reduced-motion: reduce) {
	.linkspage-btn,
	.linkspage-icon {
		transition: none;
	}

	.linkspage-btn:hover,
	.linkspage-btn:focus-visible {
		transform: none;
	}
}