@keyframes jump {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(-4px);
	}
}
@keyframes fadeIn {
	0% {
		color: inherit;
	}
	100% {
		color: transparent;
	}
}
ul:not([role]) li {
	&::before {
		content: "";
		width: 20px;
		height: 20px;
		position: absolute;
		mask-image: var(--paw);
		mask-size: contain;
		margin: 0.4rem 0 0 -2rem;
	}
	&::marker {
		content: none;
	}
}
#pkmn {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-image: url("/assets/img/pkmn/bg/box.png");
	border-radius: 5px;
	width: fit-content;
	border-bottom-color: #78a068;
	border-left-color: #c8f8c0;
	border-right-color: #78a068;
	border-top-color: #c8f8c0;
	border-width: 3px;
	border-style: solid;
	& img {
		image-rendering: pixelated;
		&:hover {
			filter: drop-shadow(0 -2px 0 #fff) drop-shadow(0 2px 0 #fff)
				drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff)
				drop-shadow(0 2px 3px #0006);
			animation: jump 200ms infinite alternate;
		}
	}
}
body [id]:not(:nth-child(1)) ul {
	display: flex;
	flex-wrap: wrap;
}
#agender {
	background-image: linear-gradient(
		#000 0 14.28%,
		#c0c0c0 0 28.57%,
		#fff 0 42.85%,
		#a3fa73 0 57.14%,
		#fff 0 71.42%,
		#c0c0c0 0 85.71%,
		#000 0
	);
}
#aromantic {
	background-image: linear-gradient(
		#0a2 20%,
		#7d6 0 40%,
		#fff 0 60%,
		#a9a9a9 0 80%,
		#000 0
	);
}
#pansexual {
	background-image: linear-gradient(#f09 33.33%, #ffd700 0 66.66%, #00bfff 0);
}
#bio,
#interests {
	& ul {
		font-family: "Urbanist", sans-serif;
		font-size: 1.3rem;
		margin: 0;
		display: flex;
		flex-direction: column;
	}
	& p {
		font-size: 1.1rem;
		font-family: "Rubik", sans-serif;
		font-weight: bold;
	}
	& span[id] {
		background-clip: text;
		background-repeat: repeat;
		&:hover {
			background-clip: initial;
			transition: var(--trans);
			animation: fadeIn var(--trans) linear forwards;
		}
	}
}
#collection {
	& ul {
		margin: 0;
		padding: var(--pad-l) 0 0 0;
	}
	& li {
		display: flex;
		& a {
			padding: var(--pad-sm);
			background: transparent;
			text-decoration: none;
		}
		& span {
			display: flex;
			width: 14ch;
			text-align: center;
			justify-content: center;
		}
	}
	& div:has(img) {
		margin: 0 auto;
		width: fit-content;
	}
	.music img {
		height: 48px;
	}
}
#badges {
	& ul {
		gap: 1rem;
		padding: 0;
	}
	& a {
		display: flex;
		padding: inherit;
		margin: 0;
		background-color: unset;
	}
}
#collection div:has(img)::after {
	content: url("/assets/img/icon/shortcut.png");
	display: flex;
	z-index: 1;
	position: absolute;
	width: 24px;
	height: 24px;
	margin: -1.5rem 0 0 -0.5rem;
	pointer-events: none;
}
@media screen and (max-width: 920px) {
	#collection {
		display: flex;
		flex-direction: column;
		& ul {
			justify-content: center;
		}
		& li a {
			padding: 0;
		}
	}
}