/* https://www.youtube.com/watch?v=BiYBJ9PIbrw */
/* https://codepen.io/optimisticweb/pen/NWVvxPr */

footer {
	display: flex;
	position: absolute;
	bottom: 0;
	width: inherit;
	padding: var(--side-spacing);
	padding-bottom: var(--top-bottom-spacing);
	justify-content: space-between;
	align-items: center;
	/* align-content: flex-end; */
	/* background: burlywood; */
	/* border-radius: 5px; */
	color: var(--clr-primary-no-focus);
}

#page-copyright {
	align-content: center;
	font-family: 'Source Sans Pro', sans-serif;
	text-transform: uppercase;
	font-style: italic;
	font-weight: 300;
	font-size: 14px;
	height: 32px;
	cursor: default;
}

#social {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}

footer a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3.25rem;
	aspect-ratio: 1;
	font-size: 1.5rem;
	background-color: #373737;
	border-radius: 50%;
	transition: color 0.5s ease-in-out;
}

@property --fill {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 0%;
}

footer a:hover,
footer a:focus {
	color: var(--clr-accent);
	--fill: 100%;
}

footer a::after {
	position: absolute;
	z-index: -1;
	content: "";
	inset: -3px;
	border-radius: inherit;

	background: conic-gradient(var(--clr-accent) var(--fill), transparent var(--fill));
	transition: --fill 0.5s ease-in-out;
}