@import url("card.css");

main {
	display: flex;
	flex-direction: row;
	width: 100vw;
}

#sidebar-filters {
	width: 30vw;
	max-width: 320px;
	min-width: fit-content;
	height: 100%;
	overflow: scroll;
	border-right: 2px solid black;
}

#main-content {
	flex-grow: 1;
	height: 100%;
	overflow: scroll;
}

#filters-form {
	display: flex;
	flex-direction: column;
	padding: 0.5rem;
	background-color: gray;
	gap: 0.5rem;

	fieldset {
		background-color: white;
		border: 2px solid black;
		padding: 0.5rem;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		gap: 0;

		.spacer {
			height: 0.5rem;
		}

		legend {
			background-color: white;
			border: 2px solid black;
			padding: 0 0.5rem;
			font-weight: bold;
		}

		label {
			padding: 0 0.5rem;
			input {
				margin-right: 0.5rem;
			}
		}
		label:hover {
			background-color: lightgray;
		}
	}
}

#results-container {
	display: flex;
	gap: 0.5rem;
	padding: 0.5rem;
	flex-wrap: wrap;
	justify-content: space-around;
}