/* light mode + shared elements */

/* profile picture color */
.pfp-red {
	background-color: #ffc4c0;
	-webkit-box-shadow: inset 0px 0px 0px 2px #ffb0ab;
	-moz-box-shadow: inset 0px 0px 0px 2px #ffb0ab;
	box-shadow: inset 0px 0px 0px 2px #ffb0ab;
}

.pfp-orange {
	background-color: #ffd49a;
	-webkit-box-shadow: inset 0px 0px 0px 2px #ffc576;
	-moz-box-shadow: inset 0px 0px 0px 2px #ffc576;
	box-shadow: inset 0px 0px 0px 2px #ffc576;
}

.pfp-yellow {
	background-color: #ffea99;
	-webkit-box-shadow: inset 0px 0px 0px 2px #ffe066;
	-moz-box-shadow: inset 0px 0px 0px 2px #ffe066;
	box-shadow: inset 0px 0px 0px 2px #ffe066;
}

.pfp-green {
	background-color: #aee8bc;
	-webkit-box-shadow: inset 0px 0px 0px 2px #91e0a5;
	-moz-box-shadow: inset 0px 0px 0px 2px #91e0a5;
	box-shadow: inset 0px 0px 0px 2px #91e0a5;
}

.pfp-cyan {
	background-color: #bde8fd;
	-webkit-box-shadow: inset 0px 0px 0px 2px #9cddfc;
	-moz-box-shadow: inset 0px 0px 0px 2px #9cddfc;
	box-shadow: inset 0px 0px 0px 2px #9cddfc;
}

.pfp-blue {
	background-color: #b2d7ff;
	-webkit-box-shadow: inset 0px 0px 0px 2px #99c9ff;
	-moz-box-shadow: inset 0px 0px 0px 2px #99c9ff;
	box-shadow: inset 0px 0px 0px 2px #99c9ff;
}

.pfp-indigo {
	background-color: #bcbbee;
	-webkit-box-shadow: inset 0px 0px 0px 2px #abaaea;
	-moz-box-shadow: inset 0px 0px 0px 2px #abaaea;
	box-shadow: inset 0px 0px 0px 2px #abaaea;
}

.pfp-purple {
	background-color: #e7cbf5;
	-webkit-box-shadow: inset 0px 0px 0px 2px #dfb9f1;
	-moz-box-shadow: inset 0px 0px 0px 2px #dfb9f1;
	box-shadow: inset 0px 0px 0px 2px #dfb9f1;
}

.pfp-pink {
	background-color: #ffc0cc;
	-webkit-box-shadow: inset 0px 0px 0px 2px #ffabbb;
	-moz-box-shadow: inset 0px 0px 0px 2px #ffabbb;
	box-shadow: inset 0px 0px 0px 2px #ffabbb;
}

/* dark mode */
@media (prefers-color-scheme: dark) {
	/* profile picture color */
	.pfp-red {
		background-color: #4c110e;
		-webkit-box-shadow: inset 0px 0px 0px 2px #661712;
		-moz-box-shadow: inset 0px 0px 0px 2px #661712;
		box-shadow: inset 0px 0px 0px 2px #661712;
	}

	.pfp-orange {
		background-color: #4c2c00;
		-webkit-box-shadow: inset 0px 0px 0px 2px #663b01;
		-moz-box-shadow: inset 0px 0px 0px 2px #663b01;
		box-shadow: inset 0px 0px 0px 2px #663b01;
	}

	.pfp-yellow {
		background-color: #4c3d00;
		-webkit-box-shadow: inset 0px 0px 0px 2px #665100;
		-moz-box-shadow: inset 0px 0px 0px 2px #665100;
		box-shadow: inset 0px 0px 0px 2px #665100;
	}

	.pfp-green {
		background-color: #0f3b1a;
		-webkit-box-shadow: inset 0px 0px 0px 2px #154f23;
		-moz-box-shadow: inset 0px 0px 0px 2px #154f23;
		box-shadow: inset 0px 0px 0px 2px #154f23;
	}

	.pfp-cyan {
		background-color: #1b3b4b;
		-webkit-box-shadow: inset 0px 0px 0px 2px #244f64;
		-moz-box-shadow: inset 0px 0px 0px 2px #244f64;
		box-shadow: inset 0px 0px 0px 2px #244f64;
	}

	.pfp-blue {
		background-color: #00244c;
		-webkit-box-shadow: inset 0px 0px 0px 2px #003066;
		-moz-box-shadow: inset 0px 0px 0px 2px #003066;
		box-shadow: inset 0px 0px 0px 2px #003066;
	}

	.pfp-indigo {
		background-color: #1a1940;
		-webkit-box-shadow: inset 0px 0px 0px 2px #232255;
		-moz-box-shadow: inset 0px 0px 0px 2px #232255;
		box-shadow: inset 0px 0px 0px 2px #232255;
	}

	.pfp-purple {
		background-color: #341842;
		-webkit-box-shadow: inset 0px 0px 0px 2px #462058;
		-moz-box-shadow: inset 0px 0px 0px 2px #462058;
		box-shadow: inset 0px 0px 0px 2px #462058;
	}

	.pfp-pink {
		background-color: #4c0d19;
		-webkit-box-shadow: inset 0px 0px 0px 2px #661222;
		-moz-box-shadow: inset 0px 0px 0px 2px #661222;
		box-shadow: inset 0px 0px 0px 2px #661222;
	}
}