:root {
	--BODY-LINK-HOVER: #ff69b477;
	--BODY-BG: url("https://static.igem.wiki/teams/5645/wiki-images/body/body-lightmode-bg.webp");
}

:root[data-theme="dark"] {
	--BODY-BG: url("https://static.igem.wiki/teams/5645/wiki-images/body/body-darkmode-bg.webp");
}

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(2rem, 7vw);
	border-bottom: 2px var(--BODY-BGCOLOR2) solid;
	/* padding: 1.5rem 0 0; */
	margin-bottom: 1rem;
}

main h3 {
	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 {
	font-weight: bold;
}

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

.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;
	text-indent: 2rem;
}

.page-content .oneline {
	text-indent: 0;
}

main ol {
	padding: 0rem 2rem;
}

main ul {
	padding: 0.5rem 2rem;
}

figure {
	margin: 1vh 1vw;
}

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

figcaption {
	text-align: center;
	color: gray;
}

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

@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;
	}

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

	.page-content article > h2 {
		position: relative;
		text-indent: 2rem;
	}

	.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 {
		transform: scaleY(1);
	}
}