#blue {
	background-color: rgba(158, 196, 253, 0.25);
	color: rgba(5, 5, 5, 1);
	border-radius: 32px;
	
}

#blue a {
	text-decoration: none;
	color: rgba(5, 5, 5, 1);
}

/*
#beige {
	background-color: rgba(173, 162, 131, 0.25);
	color: rgba(5, 5, 5, 1);
	border-radius: 32px;
	
}

#beige a {
	text-decoration: none;
	color: rgba(5, 5, 5, 1);
}
*/

#bondi {
	
	background: rgba(25, 125, 165, 1);
	color: rgba(255, 255, 255, 1);
	border-radius: 25px;
	
	box-shadow: 0px 10px 25px rgba(70, 159, 195, 0);
	transition: box-shadow 0.25s ease-out;
}

#bondi a {
	text-decoration: none;
	color: rgba(255, 255, 255, 1);
}

#bondi:hover { 
	box-shadow: 0px 10px 25px rgba(70, 159, 195, 0.35);
	transition: box-shadow 0.25s ease-out;
}

#beige {
	background: rgba(208, 208, 208, 0.25);
	color: rgba(88, 88, 88, 1);
	border-radius: 32px;
	
}

#beige a {
	text-decoration: none;
	color: rgba(88, 88, 88, 1);
}


#gray {
	background: rgba(217, 217, 217, 1);
	color: rgba(88, 88, 88, 1);
}


#orange {
	background: rgba(255, 177, 93, 1);
	color: rgba(20, 20, 20, 1);
	border-radius: 25px;
}



#red {
	//background: rgba(222, 88, 88, 1);
	background: rgba(209, 69, 71, 1);
	color: rgba(255, 255, 255, 1);
	border-radius: 25px;
	
	box-shadow: 0px 10px 25px rgba(209, 69, 71, 0);
	transition: box-shadow 0.25s ease-out;
}

#red a {
	text-decoration: none;
	color: rgba(255, 255, 255, 1);
}

#red:hover { 
	box-shadow: 0px 10px 25px rgba(209, 69, 71, 0.5);
	transition: box-shadow 0.25s ease-out;
}

@media (prefers-color-scheme: dark) {
	
	#beige:hover { 
		box-shadow: 0px 10px 25px rgba(90, 90, 90, 0.75);
		transition: box-shadow 0.25s ease-out;
	}
	
	#gray {
		background: rgba(50, 50, 50, 1);
		color: rgba(255, 255, 255, 1);
		
	}

}