@media (orientation: portrait) {
	ul {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	ul button {
		min-width: 50vw;
	}
}

@media (orientation: landscape) {
	h1 {
		-webkit-text-stroke: 2px #0005;
	}
	.search-types-container {
		transition: transform 0.56s ease;
	}

	.search-type {
		pointer-events: auto;
		transition:
			transform 0.56s ease,
			box-shadow 1.12s ease,
			background 2.1s ease,
			color 1.6s ease;
	}
	.search-type:hover button {
		z-index: 1;
		background: color-mix(in srgb, color-mix(in srgb, var(--accent-color) 70%, var(--text-color)) 70%, transparent);
	}

	.search-type:hover button {
		color: var(--background-color);
		border-color: var(--background-color);
	}

	.search-type:nth-of-type(1):hover {
		box-shadow:
			10px 16px 14px color-mix(in srgb, var(--secondary-color) 30%, transparent),
			1px 2px 10px var(--text-color);
		transform: scale(1.2) rotate3d(1.2, -1, -0.1, 0.5rad) translate(-8px, -3px);
	}
	.search-type:nth-of-type(2):hover {
		box-shadow:
			-10px 16px 14px color-mix(in srgb, var(--secondary-color) 30%, transparent),
			-1px 2px 10px var(--text-color);
		transform: scale(1.2) rotate3d(1.2, 1, 0.1, 0.5rad) translate(16px, -3px);
	}
	.search-type:nth-of-type(3):hover {
		box-shadow:
			10px -10px 14px color-mix(in srgb, var(--secondary-color) 30%, transparent),
			3px -2px 10px var(--text-color);
		transform: scale(1.2) rotate3d(-1.2, -1, 0.1, 0.5rad) translate(-8px, 8px);
	}
	.search-type:nth-of-type(4):hover {
		box-shadow:
			-10px -10px 14px color-mix(in srgb, var(--secondary-color) 30%, transparent),
			-3px -2px 10px black;
		transform: scale(1.2) rotate3d(-1.2, 1, -0.1, 0.5rad) translate(16px, 8px);
	}

	.search-types-container:has(.search-type:nth-of-type(1):hover) {
		transform: rotate3d(-0.8, -1, 0, 0.5rad) scale(1.2);
	}
	.search-types-container:has(.search-type:nth-of-type(2):hover) {
		transform: rotate3d(0.8, -1, 0, 0.5rad) scale(1.2);
	}
	.search-types-container:has(.search-type:nth-of-type(3):hover) {
		transform: rotate3d(-0.8, 1, 0, 0.5rad) scale(1.2);
	}
	.search-types-container:has(.search-type:nth-of-type(4):hover) {
		transform: rotate3d(0.8, 1, 0, 0.5rad) scale(1.2);
	}
}