:root 
{
	--color-red-bg: #ffebee;    /* pale red */
	--color-yellow-bg: #fff9e6; /* pale yellow */
	--color-green-bg: #e8f5e9;  /* pale green */
	--color-blue-bg: #e7f0f7;   /* pale blue */
 --color-purple-bg: #f3e8ff; /* pale purple */
	--color-gold-bg: #fff7e0;   /* pale gold */
	--color-aqua-bg: #e0f7f7;   /* pale aqua */
	--dark-primary: #180724;
	--dark-blue: #0b5fb6;
	--dark-red: #b00020;
	--dark-yellow: #b88600;
	--dark-green: #0b6b4f;
	--dark-purple: #6b21a8;
	--dark-gold: #8a6d1d;
	--dark-aqua: #008b8b;
}
	
#search
{
	background: color(display-p3 0.155 0.376 0.616);
	box-sizing: border-box;
	color: white;
	display: flex;
	flex-direction: column;
	margin-top: 2rem;
	margin-inline: auto;
	max-width: 1000px;
	border-radius: 0.75rem;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
	padding: 1rem 1rem 1.5rem;
}
#search form { margin: 0; }
#search input 
{	
	color: dimgrey;
	font-size: 1rem;
	margin: 0;
	margin-top: 0.75rem;
	padding: 0.6rem 0.8rem;
	width: 100%; 
	border-radius: 0.5rem;
	border: 1px solid #ddd;
	outline: none;
}
	
/* Tabbs */
	
#portlet-tabs 
{ 
	box-sizing: border-box;
	font-size: 0.8rem;
	font-weight: 600;
	margin-inline: auto;
	max-width: 1000px;
	margin-top: 0rem; /* reduced to bring tabs closer to collections */
	padding-inline: 1rem;
}
 #portlet-tabs ul 
	{
		align-items: flex-end;
		border-bottom: none;
		display: flex;
		justify-content: center; /* center the tab list */
		gap: 1rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#portlet-tabs li { margin: 0; }
	#portlet-tabs a 
	{
		background: transparent;
		border: 1px solid transparent;
		border-radius: 0.5rem 0.5rem 0 0;
		color: black;
		border: 1px solid transparent;
		display: block;
		padding: 0.6rem 1rem;
		text-align: center;
		text-decoration: none;
		transition: all 0.18s ease;
	}
	#portlet-tabs a:hover { background-color: #ccc; }
	#portlet-tabs a.active 
	{
		border-bottom: 1px solid transparent;
		margin-bottom: 0;
	}
	
			#portlet-tabs a.blue.active 
			{
				background-color: var(--color-blue-bg);
				color: var(--dark-blue);
				border-color: rgba(11,95,182,0.15);
				border-bottom: 1px solid transparent;
			}
			
			#portlet-tabs a.red.active 
			{
				background-color: var(--color-red-bg);
				color: var(--dark-red);
				border-color: rgba(176,0,32,0.12);
				border-bottom: 1px solid transparent;
			}
			
	
			#portlet-tabs a.yellow.active 
			{
				background-color: var(--color-yellow-bg);
				color: var(--dark-yellow);
				border-color: rgba(184,134,0,0.12);
				border-bottom: 1px solid transparent;
			}
			
			#portlet-tabs a.green.active 
			{
				background-color: var(--color-green-bg);
				color: var(--dark-green);
				border-color: rgba(11,107,79,0.12);
				border-bottom: 1px solid transparent;
			}

			#portlet-tabs a.purple.active 
			{
				background-color: var(--color-purple-bg);
				color: var(--dark-purple);
				border-color: rgba(107,33,168,0.15);
				border-bottom: 1px solid transparent;
			}

			#portlet-tabs a.gold.active 
			{
				background-color: var(--color-gold-bg);
				color: var(--dark-gold);
				border-color: rgba(138,109,29,0.15);
				border-bottom: 1px solid transparent;
			}
			
			#portlet-tabs a.aqua.active 
			{
				background-color: var(--color-aqua-bg);
				color: var(--dark-aqua);
				border-color: rgba(0,139,139,0.15);
				border-bottom: 1px solid transparent;
			}
			
			#portlet-tabs a.white.active 
			{
				background-color: white;
				color: var(--dark-primary);
				border-color: rgba(0,0,0,0.09);
				border-bottom: 1px solid transparent;
			}
			
/* Portlets container */
			
		#portlets 
	{
		background: white;
		/* border: 1px solid rgba(0,0,0,0.09); */
		border-radius: 1rem;
		box-sizing: border-box;
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(3, 1fr);
		margin-bottom: 1rem;
		margin-top: 0;
		margin-inline: auto;
		max-width: 1000px;
		padding: 2rem 1rem;
		transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
	}

		#portlets.blue
		{
			background-color: var(--color-blue-bg);
			color: var(--dark-blue);
			border-color: rgba(11,95,182,0.15);
			border-bottom: 1px solid transparent;
		}

		#portlets.red
		{
			background-color: var(--color-red-bg);
			color: var(--dark-red);
			border-color: rgba(176,0,32,0.12);
			border-bottom: 1px solid transparent;
		}

		#portlets.yellow
		{
			background-color: var(--color-yellow-bg);
			color: var(--dark-yellow);
			border-color: rgba(184,134,0,0.12);
			border-bottom: 1px solid transparent;
		}

		#portlets.green
		{
			background-color: var(--color-green-bg);
			color: var(--dark-green);
			border-color: rgba(11,107,79,0.12);
			border-bottom: 1px solid transparent;
		}

		#portlets.purple
		{
			background-color: var(--color-purple-bg);
			color: var(--dark-purple);
			border-color: rgba(107,33,168,0.12);
			border-bottom: 1px solid transparent;
		}

		#portlets.gold
		{
			background-color: var(--color-gold-bg);
			color: var(--dark-gold);
			border-color: rgba(138,109,29,0.12);
			border-bottom: 1px solid transparent;
		}

		#portlets.aqua
		{
			background-color: var(--color-aqua-bg);
			color: var(--dark-aqua);
			border-color: rgba(0,139,139,0.12);
			border-bottom: 1px solid transparent;
		}

		#portlets.white,
		#portlets.color-all-bg
		{
			background-color: white;
			color: var(--dark-primary);
			border-color: rgba(0,0,0,0.09);
			border-bottom: 1px solid transparent;
		}
	
/* Individual portlets */
	
	div.portlet 
	{
		background-color: white;
		border-radius: 1rem;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
		display: flex;
		flex-direction: column;
		padding: 1rem;
		transition: transform 0.18s ease, box-shadow 0.18s ease;
	}
	
	div.portlet:hover {
		transform: translateY(-4px);
		box-shadow: 0 10px 22px rgba(0,0,0,0.08);
	}
	
		div.portlet div.top 
		{
			border-bottom: 1px solid #ccc;
			flex-grow: 1;
			padding-bottom: 0.7rem;
		}
		
		div.portlet div.bottom 
		{
			display: flex;
			flex-direction: column;
			padding-top: 0.6rem;
			position: relative;
			min-height: 36px;
		}
		
			div.portlet div.bottom h4
			{
				font-size: 0.8rem;
				font-weight: 600;
				margin: 0;
				padding: 0;
			}
			
			div.portlet div.bottom h5
			{
				font-size: 0.8rem;
				font-weight: 600;
				margin: 1rem 0 0 0;
				padding: 0;
			}
		
			div.portlet div.top img 
			{
				display: block;
				width: 100%;
				border-radius: 0.5rem;
			}
	
@media (max-width: 768px)
{
	#portlets { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 506px)
{
	#portlets 
	{ 
		grid-template-columns: repeat(1, 1fr); 
		margin-top: 2rem;
	}
	#portlet-tabs { margin-bottom: 1rem; }
	#portlet-tabs ul { flex-direction: column; }
	#portlet-tabs li { width: 100%; }
	#portlet-tabs a { border-radius: 0.5rem; }
}