#blue {
	background-color: rgba(15, 48, 88, 1);
	color: rgba(255, 255, 255, 1);
	border-radius: 25px;
	
	box-shadow: 0px 10px 25px rgba(15, 48, 88, 0);
	transition: box-shadow 0.25s ease-out;
}

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

#blue:hover { 
	box-shadow: 0px 10px 25px rgba(15, 48, 88, 0.35);
	transition: box-shadow 0.25s ease-out;
}

#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, 1);
	color: rgba(88, 88, 88, 1);
	border-radius: 25px;
	
	box-shadow: 0px 10px 25px rgba(208, 208, 208, 0);
	transition: box-shadow 0.25s ease-out;
}

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

#beige:hover { 
	box-shadow: 0px 10px 25px rgba(208, 208, 208, 0.75);
	transition: box-shadow 0.25s ease-out;
}

#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);
		
	}

}