/* default.css */
@media screen and (max-width: 920px) {
	body::after {
		content: "" !important;
	}

	footer {
		width: 100% !important;
		margin: 0 !important;
	}

	header {
		padding-left: 0 !important;
		padding-top: var(--pad-m) !important;
		text-align: center !important;
	}

	main {
		padding: var(--pad-l) !important;
	}

	main > section {
		flex-direction: column !important;
	}

	main > section {
		width: initial !important;
	}

	article {
		max-width: initial !important;
		width: auto !important;
	}
	#mobile > nav {
		display: flex !important;
	}
}

/* nav.css */
@media screen and (min-width: 920px) {
	li:has(> button[popovertarget="mobile"]) {
		display: none !important;
	}
	#floating {
		display: none;
	}
	#mobile {
		display: flex;
	}
}

@media screen and (max-width: 920px) {
	#floating {
		position: sticky !important;
		top: 0 !important;
	}
}

/* home.css */
@media screen and (max-width: 920px) {
	article#interests {
		display: flex !important;
		flex-direction: column !important;

		& ul {
			justify-content: center !important;
		}

		& li a {
			padding: 0 !important;
		}
	}
}

@media (prefers-reduced-motion: no-preference) {
	/* Scrolling pride flag text */
	article#bio span[id],
	footer span {
		font-family: "Nosey Rodent", sans-serif;
		font-weight: bold;
		color: transparent;
		background-clip: text;
		filter: var(--outlined);
		background-repeat: repeat;
		background-size: 200% 100%;
		background-position: 0% 50%;
		animation: slide 5s linear infinite;
		transition: color var(--trans);
	}
}
@media (prefers-reduced-motion: reduce) {
	body {
		animation: none !important;
	}
	/* Buttons */
	:is(a, button),
	span:has(a) {
		transition: none !important;
	}
	/* Permalinks */
	.header-anchor,
	article pre {
		transition: none !important;
	}
	/* Images */
	#gallery a:has(figure),
	#blog article figure,
	a img {
		transition: none !important;
	}
	.emoji:has(img[alt*="🐇"]) {
		& img {
			opacity: 0;
		}
		&::after {
			position: absolute;
			content: "🐇";
		}
	}
	/* Scrolling pride flag text */
	article#bio span[id], footer span {
		transition: none !important;
		animation: none !important;
		color: inherit;
		background-clip: initial !important;
		background: initial !important;
		&::before {
			content: "";
			display: inline-flex;
			width: 2rem;
			height: 1.25rem;
			margin: 0 2px;
			background-repeat: repeat-x;
			border-radius: 2px;
			top: 4px;
			position: relative;
		}
	}
	#aromantic::before {
		background-image: url("/assets/img/flag/aromantic.svg");
	}
	#agender::before {
		background-image: url("/assets/img/flag/agender.svg");
	}
	#pansexual::before {
		background-image: url("/assets/img/flag/pansexual.svg");
	}
	footer span::before {
		background-image: url("/assets/img/flag/trans.svg");
	}
	/* Jumping critters */
	#pkmn span:hover {
		animation: none !important;
		transform: translateY(-4px);
	}
}