@layer base {
	:root {
		--red-100: #fee2e2;
		--red-200: #fecaca;
		--red-300: #fca5a5;
		--red-400: #f87171;
		--red-500: #ef4444;
		--red-600: #dc2626;
		--red-700: #b91c1c;
		--red-800: #991b1b;
		--red-900: #7f1d1d;
		--gray-400: #9ca3af;
		--blue-400: #60a5fa;
		--pink-400: #f472b6;
		--emerald-400: #34d399;
		--amber-400: #fbbf24;
		box-sizing: border-box;
	}

	*, *::before, *::after {
		box-sizing: inherit;
	}

	body {
		margin: 0;
	}

	h1 {
		font-size: 1.5rem;
		margin: 0.5rem 0;
	}

	p {
		margin: 0 0 0.25rem;
	}

	a {
		text-decoration: none;
		color: var(--red-700);

		&:visited {
			color: var(--red-900);
		}
	}

	button {
		cursor: pointer;
		border: 1px solid var(--red-700);
		background-color: var(--red-200);

		&:hover {
			background-color: var(--red-300);
		}
	}
}

@layer utils {
	.container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0.25rem;
	}
}

@layer main {
	#header {
		background-color: var(--red-200);

		& .container {
			display: flex;
			column-gap: 0.25rem;
			align-items: center;
		}

		& a {
			line-height: 0;
		}
	}

	#messages {
		margin: 1rem;
		padding: 0;
		list-style-type: none;

		& li {
			padding: 0.25rem 0.5rem;
			margin-bottom: 0.5rem;
		}

		& .success {
			background-color: var(--emerald-400);
		}
	}

	#search-form {
		display: flex;
		column-gap: 0.25rem;
		flex-grow: 1;

		& input[type=search] {
			padding: 0.25rem;
			flex-grow: 1;
		}
	}

	#search-results {
		& .result {
			display: block;
			margin-bottom: 0.25rem;
		}
	}

	[data-gender] {
		padding: 0 0.25rem;
		background-color: var(--gray-400);
		color: black;
	}

	[data-gender=m] {
		background-color: var(--blue-400);
	}

	[data-gender=f] {
		background-color: var(--pink-400);
	}

	[data-gender=n] {
		background-color: var(--emerald-400);
	}

	[data-gender=pl] {
		background-color: var(--amber-400);
	}
}