website/_src/assets/css/home.css

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

	100% {
		transform: translateY(-4px);
	}
}
@media (prefers-color-scheme: light) {
	#intro span[id]::before {
		text-shadow: 0 0 1rem var(--primary-dark-500);
	}
	#collection {
		& a:is(:hover, :focus) {
			box-shadow: 0 0 0 1px currentColor;
			background-color: var(--primary-500);
		}
		& img {
			box-shadow: 0 0 0 1px
				color-mix(in lch, transparent, var(--primary-dark-500) 30%);
		}
	}
}
@media (prefers-color-scheme: dark) {
	#intro span[id]::before {
		text-shadow: 0 0 1rem var(--secondary-900);
	}
	#collection {
		& a:is(:hover, :focus) {
			box-shadow: 0 0 0 1px currentColor;
			background-color: var(--secondary-500);
		}
		& img {
			box-shadow: 0 0 0 1px
				color-mix(in lch, transparent, var(--secondary-500) 70%);
		}
	}
}

#pkmn {
	display: flex;
	flex-wrap: wrap;
	background-image: url("/assets/img/pkmn/bg/box.png");
	border-radius: 5px;
	width: max-content;
	border-bottom-color: #78a068;
	border-left-color: #c8f8c0;
	border-right-color: #78a068;
	border-top-color: #c8f8c0;
	border-width: 3px;
	border-style: solid;

	& img: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(
		black 0 14.28%,
		silver 0 28.57%,
		white 0 42.85%,
		#a3fa73 0 57.14%,
		white 0 71.42%,
		silver 0 85.71%,
		black 0
	);
}
#aromantic {
	background-image: linear-gradient(
		#0a2 20%,
		#7d6 0 40%,
		white 0 60%,
		darkgray 0 80%,
		black 0
	);
}
#pansexual {
	background-image: linear-gradient(#f09 33.33%, gold 0 66.66%, deepskyblue 0);
}
#agender::before {
	content: "agender";
}
#aromantic::before {
	content: "aromantic";
}
#pansexual::before {
	content: "pansexual";
}
#intro span[id]::before {
	width: inherit;
	height: inherit;
	position: absolute;
	z-index: -1;
}
#intro span[id] {
	font-size: 2rem;
	color: transparent;
	background-clip: text;
	background-size: 2rem;
	background-position: center;
	background-repeat: repeat-x;
}
#intro {
	& p {
		font-family: "Urbanist", sans-serif;
		font-size: 1.8rem;
	}
}
#collection {
	display: inherit;
	gap: 1rem;
	& ul {
		margin: 0;
		padding: 0;
		justify-content: center;
	}
	& li {
		display: flex;
		& a {
			padding: 8px;
			transition: background-color var(--trans);
			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;
		list-style-type: none;
	}
	& a {
		display: flex;
		padding: inherit;
		margin: 0;
	}
	& a:is(:hover, :focus) img {
		filter: drop-shadow(4px 6px 0 #0006);
		transform: translateY(-4px);
		transition: 0.3s;
	}
}
#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;
	}
}