:root {
	--BODY-LINK-HOVER: #ff69b477;
	--FIGCAPTION-COLOR: rgb(74, 74, 74);
	--BODY-BG: url("https://static.igem.wiki/teams/5645/wiki-images/body/body-lightmode-bg.webp");
	--DOWNLOAD-BUTTON-BG: #faf5e3;
	--DOWNLOAD-BUTTON-SHADOW-COLOR: gray;
}

:root[data-theme="dark"] {
	--FIGCAPTION-COLOR: rgb(188, 188, 188);
	--BODY-BG: url("https://static.igem.wiki/teams/5645/wiki-images/body/body-darkmode-bg.webp");
	--DOWNLOAD-BUTTON-BG: #4c403a;
	--DOWNLOAD-BUTTON-SHADOW-COLOR: black;
}

body {
	background-image: var(--BODY-BG);
}

main {
	font-size: 1.2rem;
	font-family: "Nunito", Calibri, sans-serif;
}

main h2 {
	text-indent: 1rem;
	font-size: min(2.5rem, 7vw);
	border-bottom: 2px var(--BODY-BGCOLOR2) solid;
	margin-bottom: 1rem;
}

main h3 {
	text-indent: 1rem;
	font-size: min(2rem, 5vw);
}

main h4 {
	font-size: min(4.4vw, 1.2rem);
	margin: 1rem 0;
	text-indent: 1rem;
}

.content-container {
	margin: 2vh 0;
	display: grid;
	gap: 1vw;
	grid-template-columns: 1fr 3fr;
	grid-auto-flow: dense;
	padding: 1vw;
	grid-column: span 2;
	overflow: visible;
}

.table-of-contents {
	padding: 0.5rem;
	border-radius: 0.5rem;
	/* backdrop-filter: blur(2px); */
	height: 70vh;
	position: sticky;
	top: 15vh;
	font-size: 1.2rem;
	/* text-transform: uppercase; */
	margin: 0 0 0 2vw;
	overflow-y: auto;
	overflow-x: hidden;
	overflow-wrap: break-word;
	width: 20vw;
}

.table-of-contents ol {
	padding-left: 0;
}

.table-of-contents li {
	list-style-type: none;
}

.table-of-contents a {
	display: block;
	padding: 0.5rem;
	padding-left: 1rem;
	text-decoration: none;
	color: var(--BODY-COLOR);
	/* border-bottom: 1px gray solid; */
}

.table-of-contents a:hover,
.table-of-contents a:active {
	box-shadow: inset 4px 0 0 0 #7f3e9b88;
}

.table-of-contents a.active-title {
	box-shadow: inset 4px 0 0 0 var(--ACCENT-COLOR);
}

.table-of-contents::-webkit-scrollbar {
	width: 10px;
}

.table-of-contents::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.1);
	border-radius: 4px;
}

.table-of-contents::-webkit-scrollbar-thumb {
	background-color: rgba(100, 100, 100, 0.4);
	border-radius: 4px;
	border: 2px solid rgba(0, 0, 0, 0);
}

.table-of-contents::-webkit-scrollbar-thumb:hover {
	background-color: rgba(100, 100, 100, 0.6);
}

.page-content {
	margin: 0 2vw 0 0;
	/* background-color: #eae0c2; */
	border-radius: 10px;
	padding: 2vh 2vw 0;
	line-height: 1.5;
	font-size: min(4.4vw, 1.2rem);
	/* backdrop-filter: blur(3px); */
	background-color: var(--BODY-BGCOLOR);
	width: 70vw;
}

.page-content a {
	color: var(--BODY-COLOR);
	text-decoration: none;
	box-shadow: inset 0 -0.2rem 0 var(--ACCENT-COLOR);
	transition-property: box-shadow;
	transition-duration: 0.5s;
	padding: 0 0.2rem;
	margin: 0 0 0 0.1rem;
	border-radius: 0.2rem;
	overflow-wrap: break-word;
}

.page-content a:hover {
	box-shadow: inset 0 -1.7rem 0 var(--BODY-LINK-HOVER);
	transition-property: box-shadow;
	transition-duration: 0.5s;
}

.page-content article {
	padding: 2.5vh 1vw 0;
	scroll-margin-top: 3.2rem;
}

.page-content > article:last-child {
	padding-bottom: 2vh;
}

.page-content article > *:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

.page-content p {
	padding: 0.5rem 2rem;
}

.page-content .page-intro {
	padding: 0.5rem calc(2rem + 1vw);
}

main ol {
	padding: 0rem 2rem;
	margin-left: 2rem;
}

main ul {
	padding: 0.5rem 2rem;
	margin-left: 2rem;
}

figure {
	margin: 1vh 1vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.center-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
}

main img {
	display: block;
	padding: 0;
	margin: 2rem auto 0 auto;
	border: 2px solid white;
}

figcaption {
	text-align: center;
	color: var(--FIGCAPTION-COLOR);
}

.page-content figcaption a {
	color: var(--FIGCAPTION-COLOR);
}

figure img {
	max-height: max(65vh, 170px);
	max-width: max(55vw, 300px);
	margin-bottom: 1rem;
}

.images-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.images-row img {
	height: 300px;
	width: auto;
	max-width: 100%;
	object-fit: cover;
}

.sponsors-title {
	justify-content: space-between;
}

.sponsors-title img {
	width: max(12vw, 200px);
	border: none;
	margin: 3rem auto 2rem;
	transition: all 0.2s ease;
}

.SDG-image {
	max-height: max(30vh, 70px);
	max-width: max(30vw, 120px);
	float: right;
	margin: 1rem;
}

article:nth-child(2n + 1) .SDG-image {
	float: left;
}

.light-mode-logo {
	display: var(--LIGHT-MODE-LOGO-DISPLAY);
}

.dark-mode-logo {
	display: var(--DARK-MODE-LOGO-DISPLAY);
}

.note {
	padding: 1.25rem;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
	border: 1px solid gray;
	border-left-width: 0.25rem;
	border-radius: 0.25rem;
	border-left-color: var(--ACCENT-COLOR);
}

.center-a-div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 1rem 0;
}

.pdf-iframe {
	width: max(40vw, 300px);
	height: max(56vw, 400px);
}

.two-per-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.two-per-row img {
	width: max(25vw, 300px);
}

.article-content .download-button {
	float: right;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: fit-content;
	padding: 1rem;
	font-size: min(1.4rem, 7vw);
	font-weight: 600;
	background-color: var(--DOWNLOAD-BUTTON-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(--DOWNLOAD-BUTTON-SHADOW-COLOR);
	transition-property: box-shadow;
	transition-duration: 0.5s;
}

.article-content .download-button:hover {
	box-shadow: inset 0 -8rem 0 var(--BODY-LINK-HOVER),
		1px 1px 4px var(--DOWNLOAD-BUTTON-SHADOW-COLOR);
	transition-property: box-shadow;
	transition-duration: 0.5s;
}

.article-content table {
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 0.5rem;
	border: 1px solid var(--BODY-BGCOLOR2);
}

.article-content .table-caption {
	text-align: left;
	align-self: flex-start;
}

.article-content td,
th {
	padding: 0.8rem;
}

.article-content td {
	border: 1px solid var(--BODY-BGCOLOR2);
}

.article-content th {
	font-weight: bold;
	background-color: var(--BODY-BGCOLOR2);
}

.article-content th:first-child {
	border-top-left-radius: 0.5rem;
}

.article-content th:last-child {
	border-top-right-radius: 0.5rem;
}

.article-content tr:last-child td:first-child {
	border-bottom-left-radius: 0.5rem;
}

.article-content tr:last-child td:last-child {
	border-bottom-right-radius: 0.5rem;
}

.article-content .formula {
	font-size: 1.1rem;
}
.fraction {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	margin: 0 0.4rem;
}
.fraction .num {
	display: block;
	padding: 0 0.5rem;
	border-bottom: 1px solid;
}
.fraction .den {
	display: block;
	padding: 0 0.5rem;
}

.igem-video {
	width: max(300px, 30vw);
	height: max(200px, 20vw);
	margin: 4vh auto 0;
}

.ppt-iframe {
	width: 55vw;
	height: 35vw;
}

@media screen and (max-width: 960px) {
	body {
		background-position: left;
	}

	.table-of-contents {
		display: none;
	}

	.content-container {
		display: block;
		padding: 0;
		margin: 0;
		margin-bottom: 3vh;
	}

	.page-content {
		width: 100%;
		margin: 0;
		border: none;
		border-radius: 0;
		padding: 4vh 2vw;
	}

	.page-content article .article-content {
		font-size: 0;
		max-height: 0;
		transition: all 0.2s linear;
	}

	.page-content h2 {
		text-indent: 2rem;
	}

	.page-content h3,
	h4 {
		font-size: 0;
	}

	.article-content img,
	.article-content div,
	.article-content figure {
		transform: scaleY(0);
	}

	.article-content iframe,
	.article-content .formula,
	.article-content table,
	.article-content .SDG-image {
		display: none;
	}

	.page-content article.article-shown .article-content iframe,
	.page-content article.article-shown .article-content .formula,
	.page-content article.article-shown .article-content table,
	.page-content article.article-shown .article-content .SDG-image {
		display: block;
	}

	.page-content article > h2 {
		position: relative;
	}

	.page-content article > h2::after {
		position: absolute;
		content: "";
		width: 10px;
		height: 10px;
		border-left: 2px solid;
		border-top: 2px solid;
		transform: rotate(225deg);
		left: 0.5rem;
		top: calc(0.5rem + 0.8vw);
		transition: all 0.2s;
	}

	.page-content article.article-shown > h2::after {
		transform: translateY(5px) rotateZ(45deg);
		transition: all 0.2s;
	}

	.page-content article.article-shown .article-content {
		font-size: min(1.2rem, 4.4vw);
		max-height: 1000rem;
		transition: all 0.2s linear;
	}

	.article-shown .article-content img,
	.article-shown .article-content div,
	.article-shown .article-content table,
	.article-shown .article-content figure {
		transform: scaleY(1);
	}

	.article-shown h3 {
		font-size: min(2rem, 7vw);
	}

	.article-shown h4 {
		font-size: min(1.5rem, 4vw);
	}

	.SDG-image {
		float: none;
		margin: 2rem auto 1rem auto;
	}

	table {
		display: block;
		width: auto;
		max-width: 100%;
		overflow-x: auto;
		white-space: nowrap;
		scrollbar-color: rgba(100, 100, 100, 0.4) rgba(0, 0, 0, 0.1);
		scrollbar-width: thin;
	}

	table::-webkit-scrollbar {
		height: 8px;
	}

	table::-webkit-scrollbar-track {
		background: rgba(0, 0, 0, 0.1);
		border-radius: 4px;
	}

	table::-webkit-scrollbar-thumb {
		background-color: rgba(100, 100, 100, 0.4);
		border-radius: 4px;
		border: 2px solid transparent;
	}

	table::-webkit-scrollbar-thumb:hover {
		background-color: rgba(100, 100, 100, 0.6);
	}
}