.main {
	width: 100vw;
	height: 100vh;
	margin: 0;
	display: flex;
	flex-direction: row;
}

.search-results {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10px;
}

.search-container {
	/* I have to do % instead of vw and vh for the proper sizing with the sidebar !! !! !! */
	width: 100%;
	height: 100%; 
	margin: 0;

	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;

	justify-content: space-evenly;
	align-items: center;
}

.search-bar-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	background-color: var(--text-color);
	border-radius: 10px;

	width: calc(100% - 200px);
}

.search-bar {
	padding: 6px;
	font-size: 20px;
	width: 150px;
	background-color: var(--text-color);
	border: none;
	color: var(--inverted-text-color);
	font-family: "Knewave", system-ui;
	width: calc(100% - 100px);
}

.search-bar:focus {
	outline: none;
}

.search-button {
	background-color: transparent;
	border: none;
}

.search-button:hover {
	cursor: pointer;
	animation-name: interaction;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

.search-status {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 70px;
	font-family: "Pinyon Script", cursive;
	color: var(--accent-color);

	animation-name: interaction;
	animation-duration: 0.2s;
	animation-iteration-count: infinite;

	pointer-events: none;
}