#main-bar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 8px;
	margin: 0px var(--inside-space);
}

#main-bar > div {
	display: flex;
	gap: 5px;
}

#logo-h {
	width: 160px;
}

#logo-v {
	margin-bottom: 16px;
	width: 112px;
}

#search {
	display: inline-flex;
	margin-top: auto;
	margin-bottom: auto;
}

#search > input {
	background-color: var(--grey-1);
	padding: 0px 14px;
	vertical-align: middle;
	border: none;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	border-top-left-radius: 100px;
	border-bottom-left-radius: 100px;
}

#search > button {
	background-color: var(--grey-1);
	border: none;
	padding: 4px 12px;
	right: 0px;
	vertical-align: middle;
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;
}

#search > button > icon > svg {
	font-size: 26px;
	fill: var(--black-1);
}

@media screen and (max-width: 695px) {
	#search > input {
		width: 140px;
	}
}

@media screen and (max-width: 595px) {
	#main-bar {
		background-color: var(--purple-1);
		flex-direction: column;
		margin: 0px;
	}

	#main-bar > a {
		margin-left: auto;
		margin-right: auto;
	}	

	#search {
		width: 100%;
	}
	
	#search > button {
		/*background-color: var(--color-1-b);*/
		margin-right: 15px;
	}

	#search > input {
		width: 100%;
		margin-left: 16px;
	}
}