:root {
	--CARD-HOVER-COLOR: #7f3e9b;
	--BODY-LINK-HOVER: #ff69b477;
	--TEXT-BGCOLOR: #f8f3e2;
	--MEDALS-CARD-BG: #faf5e3;
	--CARD-SHADOW-COLOR: gray;
	--BODY-BG: url("https://static.igem.wiki/teams/5645/wiki-images/body/body-lightmode-bg.webp");
}

:root[data-theme="dark"] {
	--CARD-HOVER-COLOR: #b288c4;
	--TEXT-BGCOLOR: #26211f;
	--MEDALS-CARD-BG: #4c403a;
	--CARD-SHADOW-COLOR: black;
	--BODY-BG: url("https://static.igem.wiki/teams/5645/wiki-images/body/body-darkmode-bg.webp");
}

body {
	background-image: var(--BODY-BG);
	font-family: "Nunito", Calibri, sans-serif;
}

.medal-title {
	text-align: center;
	font-size: min(3rem, 10vw);
	margin: 2rem 0 0.2rem 0;
}

.medal-criteria-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.medal-criteria-container a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 250px;
	height: 100px;
	box-shadow: none;
	font-size: min(1.4rem, 7vw);
	font-weight: 600;
	background-color: var(--MEDALS-CARD-BG);
	color: var(--BODY-COLOR);
	overflow: hidden;
	margin: 1rem;
	border-radius: 0.5rem;
	align-items: center;
	text-decoration: none;
	box-shadow: inset 0 0 0 var(--ACCENT-COLOR),
		1px 1px 4px var(--CARD-SHADOW-COLOR);
	transition-property: box-shadow;
	transition-duration: 0.5s;
}

.medal-criteria-container a:hover {
	box-shadow: inset 0 -8rem 0 var(--BODY-LINK-HOVER),
		1px 1px 4px var(--CARD-SHADOW-COLOR);
	transition-property: box-shadow;
	transition-duration: 0.5s;
}