.search {
	--max-content-width: 45rem;
	margin-top: 4rem
}

.search:has(input:focus-within) .search__results:has(a) {
	opacity: 1;
	translate: 0 0;
	scale: 1;
	transition: all .3s var(--transition-easeOutSin), opacity .1s ease-out
}

.search__results {
	--border-radius: .8rem;
	position: relative;
	background-color: #fff;
	font-size: 14px;
	border-radius: var(--border-radius);
	max-width: var(--max-content-width);
	margin-top: .5rem;
	transform-origin: top center;
	margin-inline: auto;
	transition: all .05s ease-out;
	scale: .94;
	box-shadow: 0 1px 2px #00000026, 0 0 0 1.11px #0000000d;
	overflow-y: scroll;
	opacity: 0;
	max-height: 30rem
}

.search__results a {
	--margin: .25rem;
	scroll-margin: var(--margin);
	display: block;
	width: inherit;
	margin-inline: var(--margin);
	position: relative;
	border-radius: calc(var(--border-radius) - var(--margin));
	padding: .85rem .5rem;
	box-sizing: border-box;
	text-align: left;
	font-size: 14px;
	color: var(--text-loud);
	transition: background-color .15s ease-out;
	letter-spacing: -.02em;
	font-weight: 500;
	margin-top: var(--margin)
}

.search__results a:last-child {
	margin-bottom: var(--margin)
}

.search__results a:is(:focus-within, :hover, .active) {
	color: var(--primary-color);
	background-color: var(--background-focus)
}

.search h1 {
	color: var(--text-loud);
	text-align: center;
	font-size: 3rem;
	letter-spacing: -.1rem;
	font-style: normal;
	font-weight: 700
}

.go_to_landing_btn{
	margin-top: 2rem;
	color: var(--text-loud);
}

@media(min-width:640px) {
	.search h1 {
		font-size: 4.8rem;
		letter-spacing: -.2rem
	}
}

.search__form {
	margin-inline: auto;
	margin-top: 2rem;
	color: #fff;
	border-radius: 6rem;
	width: 100%;
	background: var(--text-loud);
	display: flex;
	align-items: center;
	padding: .125rem 1.3125rem .125rem .125rem;
	max-width: var(--max-content-width);
	gap: .625rem
}

.search__input {
	color: var(--text-loud);
	border: none;
	display: flex;
	width: 100%;
	height: 2.75rem;
	padding-left: .875rem;
	align-items: center;
	gap: .7rem;
	border-radius: 7rem;
	background: var(--color-white-100, var(--background-default));
	box-shadow: 0 1px 2px #00000026, 0 0 0 1.11px #0000000d;
	transition: box-shadow .3s ease-out
}

@media(min-width:768px) {
	.search__input {
		min-width: 41rem
	}
}

.search__button {
	margin-top: 4px;
	border: none
}