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

	100% {
		transform: translateY(-4px);
	}
}

article#bio {
	& .emoji {
		height: 20px;
		width: 20px;
		display: inline-flex;
		vertical-align: middle;
		&::after,
		img {
			filter: drop-shadow(0 0 0.5px #000a);
		}
	}
}

article#badges {
	& ul {
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: var(--pad-sm);
	}

	& a {
		display: flex;
		margin: 0;
	}
	& img {
		box-sizing: content-box;
	}
}

article#interests {
	& ul {
		display: flex;
		flex-wrap: wrap;
		margin: 0;
		padding: var(--pad-l) 0;
	}
	& li {
		display: flex;
		width: 14ch;
		flex-wrap: wrap;
		text-align: center;
		justify-content: center;

		& a {
			display: flex;
			flex-direction: column;
			padding: var(--pad-sm);
			width: inherit;
			&:not(:hover, :focus) {
				background: transparent;
			}
		}
	}
	& .music img,
	.games img {
		height: 48px;
	}

	& .manga img {
		height: 128px;
	}
	& span:has(img) {
		width: fit-content;
		margin: 0 auto;
		&::after {
			content: "";
			background-image: url("/assets/img/icon/shortcut.png");
			background-size: 100%;
			display: block;
			z-index: 1;
			position: absolute;
			width: 24px;
			height: 24px;
			margin: -1.5rem 0 0 -0.5rem;
			pointer-events: none;
		}
	}

	& details:last-child ul {
		padding: var(--pad-l) 0 0 0;
	}

	& details h3 {
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
}

#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;
	margin: var(--pad-l) 0 0 0;

	& li {
		display: flex;
		margin-top: -8px;
		margin-left: -12px;

		& span: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 #000a);
			animation: jump 200ms infinite alternate;
		}
	}
	& li:first-child {
		margin-left: 0px;
	}
}

#agender {
	background-image: var(--agender);
}

#aromantic {
	background-image: var(--aromantic);
}

#pansexual {
	background-image: var(--pansexual);
}
#badges img {
	max-height: 31px;
	width: 88px;
}
@media screen and (max-width: 920px) {
	article#interests {
		display: flex;
		flex-direction: column;

		& ul {
			justify-content: center;
		}

		& li a {
			padding: 0;
		}
	}
}