/* S E A R C H ---------------------------------------------------------------------------------- */

main.search #view { padding: 1.25rem 0; }

main.search form { display: flex; column-gap: .425rem; height: 2.75rem; padding: .425rem; background: var(--bg 04); }

main.search button { transition: opacity 300ms; flex-shrink: 0; background: var(--bg 13); opacity: .8; }

main.search button:focus, main.search button:hover { opacity: 1; }

main.search button[disabled] { opacity: .5; }

main.search button[name="apply"] { order: 1; fill: var(--col 1); }

main.search button[name="apply"] svg { height: 1.095rem; transform: rotate(180deg); }

main.search button[name="reset"] svg { height: 1.25rem; transform: rotate(45deg); }

main.search button[name="reset"] svg * { stroke-width: 70; }

main.search input[type="search"] { width: 100%; padding: 0 .5675rem; background: var(--bg 11); font-size: .9125rem; }

main.search .response { background: var(--bg 09); font-size: 1rem; }

main.search .response .count {
	margin: 0 .125rem;
	font-family: var(--font 6);
	font-size: .95em;
	letter-spacing: .15em;
	color: var(--col 1);
}

/* R E S U L T ---------------------------------------------------------------------------------- */

main.search .entries { padding: 1.25rem; background: var(--bg 12); list-style-type: none; }

main.search .entry { display: flex; flex-direction: column; background: var(--bg 09); }

main.search .entry:not(:last-of-type) { margin-bottom: 1.25rem; }

main.search .response, main.search .entry .details, main.search .entry .url,

main.search .entry h3 > * { padding: .55rem .675rem .55rem .775rem; }

main.search .entry h3, main.search .entry .url { background: var(--bg 06); }

main.search .entry h3 { display: flex; position: relative; }

main.search .entry strong { font-family: var(--font 2); }

main.search .entry strong::after { content: ": "; }

main.search .entry .title { overflow: auto; width: 100%; font-size: 1rem; }

main.search .entry .title a:focus, main.search .entry .title a:hover { color: var(--col 3); }

main.search .entry .year, main.search .entry .id {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 4.15rem;
	background: var(--bg 02);
	font-family: var(--font 6);
	font-size: .925rem;
	letter-spacing: .15em;
}

main.search .entry .details > * { width: 100%; font-size: 1rem; line-height: 1.5rem; }

main.search .entry .details > *:not(:last-child) { margin-bottom: .25rem; }

main.search .entry .platforms span:not(:last-of-type)::after { content: ", "; }

main.search .entry .description { text-align: justify; hyphens: auto; }

main.search .entry .description p:first-of-type { display: inline; }

main.search .entry .url a {
	font-family: var(--font 5);
	font-size: .925rem;
	letter-spacing: .105em;
	color: var(--col 3);
	word-break: break-all;
}

main.search .entry .url a:focus, main.search .entry .url a:hover { color: var(--col 1); }

/* P A G I N A T I O N -------------------------------------------------------------------------- */

main.search #view > .wrapper { display: flex; width: 100%; height: 2.75rem; padding: .425rem; background: var(--bg 04); }

/* V I E W P O R T <= 1 0 2 4 p x --------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {

	main.search .response { font-size: .9rem; }

	main.search .entry .details, main.search .entry h3 > * { padding: .45rem .575rem .45rem .675rem; }

	main.search .entry .title { font-size: .9rem; }

	main.search .entry .year, main.search .entry .id { min-width: 3.95rem; font-size: .825rem; }

	main.search .entry .details > * { font-size: .9rem; line-height: 1.375rem; }

	main.search .entry .url::after { width: .675rem; }

	main.search .entry .url a { font-size: .825rem; }

}

/* V I E W P O R T <= 7 2 0 p x ----------------------------------------------------------------- */

@media only screen and (max-width: 720px) {

	main.search form, main.search #view > .wrapper { position: sticky; background: var(--bg 02); z-index: 1; }

	main.search form { top: var(--height header); }

	main.search .entries { padding: 1.25rem 0; }

	main.search .entry .details > * { font-size: .85rem; line-height: 1.25rem; }

	main.search #view > .wrapper { bottom: 0; white-space: nowrap; }

	main.search #view > .wrapper:empty { position: static; }

}