
main.home_page {
	box-sizing: inherit;
	padding-top: 2.2rem;
	background: linear-gradient(0deg, rgba(255,252,247,1) 10%, rgba(252,223,215,1) 25%, rgba(255,252,247,1) 40%, rgba(252,223,215,1) 50%, rgba(255,252,247,1) 65%, rgba(252,223,215,1) 75%, rgba(255,252,247,1) 90%);
}

div.home_cover {
	display: grid;
	grid: [track] 100%/[track] 100%;
	height: 480px;
}

img.cover_img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	grid-area: track;
}

div.cover_title {
	grid-area: track;
	display: flex;
	justify-content: center;
	align-items: center;
}

div.cover_title h1 {
	font-size: 6rem;
	text-align: center;
	font-weight: bold;
	letter-spacing: 4px;
	text-shadow: 6px 6px 3px #F19798;
}

section.section1 {
	max-width: calc(100% - 330px);
	margin: 15vh auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

div.section1_content {
	box-sizing: inherit;
}

div.section1_img {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 8vh;
	/* padding-bottom: 3vh; */
}

div.section1_text {
	max-width: 60vw;
}

main.home_page h2 {
	padding-top: 10vh;
	font-size: 2rem;
	margin-bottom: .6rem;
	font-weight: 600;
	text-align: center;
}


main.home_page p {
	margin: 1em 0;
	line-height: 2;
	font-size: 1.5rem;
	font-weight: 400;
	text-align: center;
}

.section1 figure {
	max-width: 25rem;
	max-height: 25rem;
	margin: 1.4rem 0;
}

.section1 img {
	max-width: 25rem;
	max-height: 25rem;
}

section.section2 {
	max-width: calc(100% - 330px);
	margin: 20vh auto;
	display: flex;
	justify-content: center;
	align-items: center;
	/* margin-bottom: 0; */
}

.section2 h3 {
	font-size: 3rem;
	font-weight: 600;
	color: #721425 !important;
}

.section8 h3 {
	padding-top: 1rem;
	font-size: 2.2rem;
	margin-bottom: 4rem;
	font-weight: 600;
}

#map {
	position: fixed;
	width: 100%;
	height: 100%;
}

section.section4,
section.section5,
section.section6,
section.section7,
div.section8_text1,
div.section8_text2,
div.section9_text,
div.section10_text,
section.section11 {
	max-width: calc(100% - 330px);
	margin: 15vh auto;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 10vh;
}

div.section1_text p,
section.section7 p,
div.section8_text2 p,
div.section9_text p,
div.section10_text p {
	max-width: 50vw;
}

section.section4 p {
	text-align: revert;
	margin-right: 30vw;
	max-width: 35vw;
}

section.section5 p {
	text-align: right;
	margin-left: 35vw;
	max-width: 35vw;
}

section.section6 p {
	color: #7E1425 !important;
	font-weight: 600;
	font-size: 2rem;
}

main.home_page b {
	font-size: 3rem;
	margin: 0 0.5rem;
	font-weight: 600;
}

section.section5 b {
	margin-right: 0;
}

section.section7 b {
	font-size: revert;
	margin: revert;
}

div.section8_text1 b {
	font-weight: revert;
	font-size: revert;
	margin: revert;
	color: #7E1425 !important;
}

div.section8_text2 b {
	font-size: 2.2rem;
}

section.section9 b,
section.section10 b {
	font-size: 2.2rem;
	color: #7E1425 !important;
}

section.section10 b:nth-child(2) {
	margin-right: revert;
}

section.section8 {
	background: url("https://static.igem.wiki/teams/4405/wiki/front-page/decoration-for-intestine.png");
	background-repeat: no-repeat;
	background-size: 15%;
	background-position: 73vw 9rem;
}

div.section8_text2 {
	max-width: 65vw;
}

section.section10 {
	background: url("https://static.igem.wiki/teams/4405/wiki/front-page/intestine-rotated.png");
	background-repeat: no-repeat;
	background-size: 32%;
	background-position: 2.2rem 12rem;
}

div.section10_text {
	padding-bottom: 60vh;
}

.section4 p {
	max-width: 40vw;
}

.section5 p {
	max-width: 50vw;
}

.section7 p,
div.section9_text2 p {
	max-width: 60vw;
}

section.section11 {
	text-align: center;
	margin-top: 15vh;
}

.section12 h2 {
	margin-bottom: 1.8rem !important;
}

.section12 {
	max-width: calc(100% - 330px);
	margin: 15vh auto;
	margin-top: 0;
}

.section12 ol {
	display: flex;
	flex-direction: column;
	row-gap: .4rem;
	margin: 1rem 0 1rem 2.6rem;
}

.section12 li {
	list-style-position: outside;
	list-style-type: decimal;
	padding-left: .4rem;
	line-height: 2;
	font-size: 1.1rem;
}

.section12 li::marker {
	font-weight: 600;
}

ol.ref_list>li {
	font-size: 1rem;
}

.js-scroll {
	transition: opacity 1000ms;
}

.scrolled {
	animation: fade-in-bottom 1.2s ease-in-out both;
}

@keyframes fade-in-bottom {
	0% {
		transform: translateY(50px);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}
