.icon:focus{
	scale: 0.8 0.8;
	rotate: var(--angle, 30deg);
}

a.icon{
	--angle: 15deg;
	--endscale: 1.2;
	text-decoration: unset;
	transition: 100ms;
	position: absolute;
	font-size: 1.5rem;
	top:-0.5em;
	right:-0.5em;
	padding: 0.25em;
	background-color: var(--nord6);
	border-radius:1000px;
	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: dark) {
	a.icon{
		background-color: var(--accent-dark);
	}
}
input.icon{
	z-index: 3;
	box-sizing: border-box;
	text-decoration: unset;
	text-align:center;
	width: 2.6rem;
	aspect-ratio: 1/1;
	transition: 100ms;
	position: absolute;
	font-size: 1.5rem;
	top:-0.5em;
	right:-0.5em;
	padding: 0.25em;
	background-color: var(--nord6);
	border-radius:1000px;
	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.6);
}
input.icon:hover,
input.icon:focus-visible
{
	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
}
a.icon:hover,
a.icon:focus-visible
{
	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
	animation: shake 0.6s forwards;
}
