: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/mit-mahe/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/mit-mahe/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;
}