.search-results__title { display: block; font-size: 2em; line-height: 1; margin-block-end: 1em; } .search-results strong { font-weight: 900; background: var(--primary-accent-transparent); color: var(--ui-text-bold); transition: background var(--color-crossfade-duration) var(--color-crossfade-ease), color var(--color-crossfade-duration) var(--color-crossfade-ease); } #search-results { display: flex; flex-flow: column; max-inline-size: 80ch; } #search-results li:not(:first-child) { border-block-start: 1px solid; border-color: var(--ui-text-muted); transition: border-color var(--color-crossfade-duration) var(--color-crossfade-ease); } #search-results li { padding-block: 1em; } .search-result-page-title { font-size: 1.25em; display: block; margin-block-end: 1rem; } .search-result-item p { line-height: 1.5; } #search-form { display: flex; justify-content: center; align-items: center; max-inline-size: 100%; } #search-input { background: var(--ui-overlay); color: var(--ui-overlay-text); transition: background var(--color-crossfade-duration) var(--color-crossfade-ease), color var(--color-crossfade-duration) var(--color-crossfade-ease); filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.15)); border-radius: 100rem; border: 0; padding: 0.5rem 1rem; margin-inline-end: 0.5rem; inline-size: 100%; flex-shrink: 1; block-size: 2rem; box-sizing: border-box; } #search-submit { padding: 0.5rem 1rem; border: 0; background: var(--primary-accent); color: var(--primary-accent-text); transition: background var(--color-crossfade-duration) var(--color-crossfade-ease), color var(--color-crossfade-duration) var(--color-crossfade-ease); border-radius: 4px; block-size: 2rem; filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.15)); }