/* thaw 之后加的 */
.fake-underline {
	display:inline-block;
	position:relative;

}
.fake-underline::after {
	content:'';
	display:block;
	position:absolute;
	width:99%;
	height:0.5VW;
	background:#ffa3d7;
	bottom:-0.2VW;
	left:1%;
	filter:drop-shadow(0px 0px 1px #ffa3d7)
}
.fake-underline.powerful::after{
	width:92%;
	left:8%;
}

/* 竖屏旋转 */
#plz-rotate {
    position:fixed;
    width:50%;
    height:0px;
    padding-top:50%;
    background:#fff8ff;
    box-shadow: 0px 0px 5px #FFA3D7;
    border-radius:10%;
    z-index:1000;
    left:25%; top:50%;
    transform:translateY(-50%);
    display:none;
    transition:1s;
    /* border:#ffa3d7 1px solid; */
}
#rotate-phone {
    transform-origin: 100% 100%;
    animation:rotate-phone 3s ease infinite;
    /* transform:rotate(90deg) translateX(-100%); */
}
@keyframes rotate-phone {
    0% {
        transform:rotate(0deg);
    }
    50% {
        transform:rotate(90deg) translateY(62.8%);
    }
    100% {
        transform:rotate(90deg) translateY(62.8%);
    }
}
#plz-rotate-text {
    font-family: "Montserrat";
    font-weight:600;
	display:inline-block;
    color:#2e2272;
    text-align: justify;
    word-break: normal;
    hyphens: auto;
    font-size:2.3vw;
	line-height:3.2vw;
}
#rotate-btn {
    width:30%;
    height:10%;
    border-radius:1000px;
    left:35%;
    top:85%;
    background:#FFA3D7;
    position:absolute;
    font-size:2.5vw;
    font-family: "Montserrat";
    font-weight:800;
    color:#fff8ff;
    text-align: center;
    /* vertical-align: bottom; */
    /* line-height:3vw; */
    display:flex;
    justify-content: center;
    align-items: center;
    cursor:pointer;
    box-shadow: 0px 0px 5px #ffa3d7;
}


i {
	font-weight: inherit;
}
a {
	font-family: 'Montserrat';
}
* {
	font-weight:600;
}
/*我恨死了，一个一个设置字体，要不然 mathjax 直接继承*/
.side-nav, .col-lg-9, h2, h3, footer, nav {
	font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}
html, body {
    margin: 0;
    padding: 0;

}

/* 整个滚动条 */
::-webkit-scrollbar {
    /* 对应纵向滚动条的宽度 */
    width: 10px;
    /* 对应横向滚动条的宽度 */
    height: 10px;
}

/* 滚动条上的滚动滑块 */
::-webkit-scrollbar-thumb {
    background-color: #ffa3d7;
    border-radius: 32px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 32px;
}
::selection {
	color:#fff8ff;
	background-color: #FFBCE5;
}
*{scrollbar-width:thin;
scrollbar-color:#ffa3d7 transparent;
}

/*回到顶部*/
.back-to-top {
	position:fixed;
	bottom:8vh;
	right: 1.5vw;
	text-align: center;
	background-image: linear-gradient(to right, #c696ff 0%, #fb96ff 50%, #ffa3d7 100%);
	background-size: contain;
	background-clip: text;
	-webkit-background-clip: text;
	transition:0.5s all;
}
.back-to-top > a {
	text-decoration:none;
}
.back-to-top:hover > a > div {
	transform:translateY(-5px);

}
.back-to-top > a > div {
	color:transparent;
	font-family: 'Montserrat';
	font-weight: 800;
	transition:0.5s all;
}
.back-to-top img {
	transform:translateY(0) rotate(180deg);
	transition:0.5s all;
}
.back-to-top:hover img {
	transform:translateY(-10px) rotate(180deg);
}
/*正文样式*/
div.col-lg-9 {
	padding-left: 30PX;
}
div.col-lg-9 > section::before {
	content: "";
	display: block;
	z-index:-10;
	position:relative;
	height: 66px;
	margin: -66px 0 0;
	background:transparent;
}
div.col-lg-9 > section p, div.col-lg-9 > section ul,div.col-lg-9 > section li,div.col-lg-9 > section figcaption {
	position:relative;
	z-index:1;
}
div.col-lg-9 > section {
	position:relative;
}
/*链接*/
.col-lg-9 a {
	color:#ffa3d7;
	font-weight:inherit;
}
.col-lg-9 a:hover {
	color:#C696FF;
	font-weight:inherit;
}
.col-lg-9 sup {
	font-weight: inherit;
}
.col-lg-9 sub {
	font-weight: inherit;
}
.col-lg-9 h2 {
	color:#fff8ff;
	font-size:40px;
	font-family: "ButterSans-Rounded";
	line-height:60px;
	background-image: linear-gradient(to left, #FFBCE5 0%, #ffa3d7 50%, #FB96FF 100%);
	box-shadow: 0px 0px 5px #ffb2ff80;
	width: fit-content;
	max-width:98%;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: normal;
	hyphens: auto;
	padding:15px 35px 15px 20px;
	margin: 20px 0 20px 0;
	border-radius:50px 300px 300px 50px;
}
.col-lg-9 h3 {
	color:#fff8ff;
	font-size: 25px;
	font-family: 'Montserrat';
	font-weight: 700 !important;
	box-shadow: 0px 0px 2px #ffb2ff80;
	background: #ffbce5;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: normal;
	hyphens: auto;
	max-width:98%;
	padding:10px 30px 10px 10px;
	width: fit-content;
	border-radius:50px 300px 300px 50px;
	margin: 5px 0;
}
.col-lg-9 h4 {
	color:#ffa3d7;
	font-size: 20px;
	font-family: 'Montserrat';
	font-weight: 700 !important;
	/* box-shadow: 0px 0px 2px #ffb2ff80;
	border:#ffbce5 solid 3px;
	border-radius:10px 30px 30px 10px; */
	padding:10px 30px 10px 15px;
	width: fit-content;
	margin: 5px 0;
}
.col-lg-9 h5 {
	color:#2e2272;
	font-weight:600;
	padding:10px 0;
}
.col-lg-9 p {
	color:#2e2272;
	text-align: justify;
	/*设置了换行连字符，不想要删掉下面四行*/
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: normal;
	hyphens: auto;
	font-weight:500;
	font-size: 19px;
	line-height: 35px;
}
.col-lg-9 p.code {
	font-size:17px;
	font-family: 'SourceCodePro';
	background:#fff;
	border-radius: 5px;
	padding:2px 5px;
	line-height:22px;
	border:#ffe7ff solid 1px;
}

.col-lg-9 li {
	list-style: url('https://static.igem.wiki/teams/4630/wiki/webpage/page-content/list-dot-2.svg');
	color:#2e2272;
	text-align: justify;
	font-weight:500;
	font-size: 19px;
	line-height: 35px;
	margin-left:25px;
}
/*table 表格样式*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {

  margin: 0 ;
  padding: 0 ;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
  overflow-x: hidden;
}
ol, ul {
  list-style: none;
  padding: 0!important;
  margin: 0!important;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* --------------------------------

Primary style


/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-table .cd-unchecked span, .cd-table .cd-checked span {
  display: block;
  overflow-x: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

/* -------------------------------- 

Main components 

-------------------------------- */
.cd-table {
  position: relative;
  justify-content: center;

  /* border-radius:5px; */
  /* max-width: 90%; */
  white-space: nowrap;
  width: fit-content;
  /* max-width: 1170px; */
  margin: 1em auto;
  font-size: 14px;
  font-size: 0.875rem;
  /* you may remove this border in case of dark backgrounds if it's annoying */
  /* border-right: 1px solid #e6e7f1; */
  /* flex-wrap: wrap; */
  display:flex;
  flex-direction: row;
}
.cd-table::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}
/* .cd-table::before {
  /* White color gradient on the right */
  /* content: '';
  position: absolute;
  top: 0;
  right: -1px;
  height: 100%;
  width: 35px;
  background: -webkit-linear-gradient( right , white 10%, rgba(255, 255, 255, 0));
  background: linear-gradient(to left, white 10%, rgba(255, 255, 255, 0));
  z-index: 5;
  pointer-events: none;
} */
.no-cssgradients .cd-table::before {
  /* remove the gradient using modernizr if css gradients are not supported */
  display: none;
}
.cd-table.table-end::before {
  /* the gradient disappears when user is at the end of the table */
  display: none;
}
.cd-table .cd-table-container {
  position: relative;
  width: fit-content;
  /* width: 100%; */
  overflow-x: hidden;
  /* smooth scrolling on touch devices */
  -webkit-overflow-scrolling: touch;
}

.cd-table .cd-table-column {
  left: 0;
  width: fit-content;
  float: left;
  border: 1px solid #C696FF;
  margin-left: -1px;
}

.cd-table h2, .cd-table ul > li {
  position: relative;
  text-align: center;
  padding: 0 1em;
  /* border-bottom: 1px solid #e6e7f1; */
  height: fit-content;
  line-height: fit-content;
  width: 100%;
  background-color: white;
  list-style-type: none;
}
.cd-table h2 {
  font-size: 14px;
  font-size: 0.875rem;
  text-transform: uppercase;
  font-weight: bold;
  color: #606272;
}
.cd-table ul > li {
  /* padding-left: 10px; */
  color: #2e2272c0;
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0 10px;
  white-space: nowrap;
}
.cd-table ul > li:nth-child(odd) {
  background-color: #ffa3d710;
  list-style-type: none;
}
.cd-table ul > li:last-child {
  border-bottom: none;
  /* list-style-type: none; */
  /* margin: 0; */
  /* padding: 0; */
}
.cd-table .cd-unchecked span, .cd-table .cd-checked span {
  position: absolute;
  width: 16px;
  height: 16px;
  background-image: url("../img/yes-no.svg");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 32px 16px;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cd-table .cd-unchecked span {
  background-position: -16px 0;
}
.cd-table .cd-select {
  display: block;
  height: 100%;
  width: 100%;
  font-weight: bold;
}
.cd-table header.cd-table-column {
  /* position: absolute; */
  width: fit-content;
  width: fit-content;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10;
  background: #C696FFA0;
  margin-left: 0;
  /* border-color: #6b758d; */
  /* box-shadow: 2px 0 0 rgba(0, 0, 0, 0.1); */
  /* pointer-events: none; */
}
.cd-table header.cd-table-column h2, .cd-table header.cd-table-column li a {
	color: #fff;
	text-decoration:none;

}

.cd-table header.cd-table-column h2, .cd-table header.cd-table-column li a:hover {
	color: #fff;
	text-decoration:underline 2px;
	text-shadow: 0px 0px 1px #fff;
}

.cd-table header.cd-table-column h2, .cd-table header.cd-table-column li {
  width: 100%;
  background-color: transparent;
  text-align: left;
  font-weight: 700;
  font-family: 'Montserrat';
  color: #fff;
  white-space: nowrap;
  /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); */
  /* border-bottom-color: #6b758d; */
}
.cd-table header.cd-table-column h2 {
  color: #edeef1;
}
.cd-table header.cd-table-column li:nth-child(odd) {
  background-color: #C696FF;
}

/*公式样式*/
mjx-container {
	font-weight:500;
	color:#474086;
}
mjx-math {
	font-weight:500;
	color:#474086;
}
/*图片样式*/
figure img {
	width:90%;
	position:relative;
	left:5%;
}
figcaption .fig {
	font-weight:600;
	color: #ffa3d7 !important;
}
figcaption {
	font-weight: 500;
	color: #2e2272;
	font-size: 17px;
	width:80%;
	left:10%;
	position:relative;
	text-align: left;
	line-height:25px;
	margin-top: 20px;
	opacity:70%;
}
figcaption.tbl-caption {
	left:15%;
	font-size:13px;
	margin-top:0;
}
/*隐藏文本框样式*/
div.hidden-content#model-hidden-content {
	overflow-y:hidden;
	height:150px;
	max-height:150px;
	background-image: linear-gradient(to bottom, #2e227280 0%, #2e227200 100%);
	background-clip: text;
	-webkit-background-clip: text;
	transition:1s max-height;
}

/* div.hidden-content#model-hidden-content::before {
	content:'';
	width:100%;
	height:50px;
	background:#000;
	display:block;
	position:relative;
	top:100px;
	

} */

div.hidden-content {
	overflow-y:hidden;
	height:65px;
	max-height:65px;
	background-image: linear-gradient(to bottom, #2e227280 0%, #2e227200 100%);
	background-clip: text;
	-webkit-background-clip: text;
	transition:1s max-height;
}
div.hidden-content p {
color:transparent;
font-weight: 300;
}
/*点击展开的按钮*/
.see-more-button {
	z-index: 13;
	position:relative;
	width:60%;
	left: 40%;
	bottom: 25px;
	transition:1s all;
	z-index:10;
}

div#model-see-more::after {
	z-index:-1;
	display:block;
	content:'';
	position:absolute;
	transform:translateX(-33%) translateY(-50px) scale(1.67);
	width:100%;
	height:50px;
	/* bottom: 25px; */
	/* transition:1s all; */
	background:linear-gradient(to top, #fff8ff 50%, #fff8ff00 100%);
}

.see-less-button {
	position:relative;
	width:fit-content;
	left: 45%;
	bottom: 10px;
	transition:1s all;
	z-index:20;
}
.see-more-arrow {
	transition:0.5s;
}
.see-less-arrow {
	transition:0.5s;
	transform:rotate(180deg);
}
.see-more-text {
	color: #c696ff;
	font-size: 20PX;
	font-weight: 700;
	text-align: center;
	position:relative;
	bottom:-3px;
	text-decoration:underline 3px;
	transition:0.5s;
}
.see-less-text {
	color: #ffa3d7;
	font-size: 20PX;
	font-weight: 700;
	text-align: center;
	position:relative;
	bottom:-3px;
	text-decoration:underline 3px;
	transition:0.5s;
}
.see-more-button:hover {
	cursor:pointer;
}
.see-more-button:hover .see-more-arrow {
	transform:rotate(180deg)
}
.see-less-button:hover .see-less-arrow {
	transform:rotate(0deg)
}
.see-less-button:hover {
	cursor:pointer;
}
.see-more-button:hover .see-more-text {
	color: #ffa3d7;
	text-decoration:none;
}
.see-less-button:hover .see-less-text {
	color: #c696ff;
	text-decoration:none;
}
/*横向的 view more*/
.view-more-horizontal-button {
	background: linear-gradient(to bottom, #c696ff 0%, #fb96ff 50%, #ffa3d7 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color:transparent;
	width:fit-content;
	position:relative;
	left:40%;
	text-decoration:underline 3px !important;
	z-index:10;
}
.view-more-horizontal-button a {
	text-align: center;
	color:transparent;
	font-size: 20PX;
	font-weight: 700;
	text-decoration:underline 3px !important;
}
.view-more-horizontal-button:hover a {
	text-align: center;
	color:transparent;
	font-size: 20PX;
	font-weight: 700;
	text-decoration:underline 3px!important;
}
.view-more-horizontal-arrow {
	transform:translateX(0) rotate(-90deg);
	transition:1s;
}
.view-more-horizontal-button:hover .view-more-horizontal-arrow {
	transform:translateX(140px) rotate(-90deg);
}
/*点击展开的效果*/
div.hidden-content#model-hidden-content.unfold {
	max-height:10000px;
	transition:1s max-height;
	height:auto;
}
div.hidden-content.unfold {
	max-height:10000px;
	transition:1s max-height;
	height:auto;
}
div.hidden-content.unfold p {
	font-weight:300;
	color:#2e2272;
}
div.see-more-button.unfold {
	display:none;
}
/*REFERENCE*/
section#references {
	margin-top:100px;
}
section#references li {
	padding: 5px;
	color:#ffa3d7;
	font-weight: 600;
	list-style-type: decimal;
	list-style: decimal;
	list-style-position: outside;
}
.reference-text {
	color:#2e2272;
	text-align: justify;
	font-weight:500;
	font-size: 19px;
	line-height: 35px;
}
 #loading-mask {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  /* 让两张图重叠在一起，只有一张可见 */
  #loading-mask img {
    position: absolute;
    width: 7vw;
    animation: blink .6s infinite alternate;
  }
  #loading-mask img:nth-child(2) {
    animation-delay: .3s;
  }

  @keyframes blink {
    0%   { opacity: 1; }
    100% { opacity: 0; }
  }
  /* 为整个页面设置鼠标样式 */


/*原本的 Layout*/
/*cursor 样式*/

body { 
	padding-top: 56px;
 	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	
}
body {
	cursor: url('https://static.igem.wiki/teams/5840/figure/mouse1.webp'), auto;
	
}
#cursor-1{
	position:fixed;
	z-index:9999999;
	left:0;
	top:0;
	width: 30px;
	height: 30px;
	filter: drop-shadow(0px 0px 2px #ffb2ff);
	background-image: url(https://static.igem.wiki/teams/4630/wiki/webpage/navbar/cursor-2.svg);
	background-size: contain;
  }


.team_logo_svg {
	height: 80px;
	width: 170px;
	margin-left: -10%;
}

#navbarSupportedContent {
	bottom: 20px;
}

/* 导航栏白色背景+发光 */
.navbar {
	background-color: #fff8ff;
	box-shadow: 0px 0px 3px #ffb2ffa0;
}
/* 下拉菜单那个渐变背景 */
ul.dropdown-menu {
	background: linear-gradient(to top, #c696ff 0%, #fb96ff 50%, #ffa3d7 100%);
	border:2px solid #ffb2ff;
	box-shadow: 0px 0px 5px #ffb2ff;
	border-radius: 10px !important;
	font-family: 'Montserrat';
	font-weight:700;
	right: 0px;
	display: none;
	width:fit-content;
}
ul.dropdown-menu:hover {
	display:block !important;
}
li.nav-item {
	background:#fff8ff;
}
li.nav-item.dropdown {
	height: 120%;
}
/* 这个千万别动！！！！！ */
li.nav-item.dropdown:hover > ul.dropdown-menu {
	display: block !important;
	animation: float-up 0.5s ease;
	

}
/* 动画的关键帧 */
@keyframes float-up {
	from {
		opacity: 0.8;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0px);
	}
} 

.dropdown-item:hover {
	color: #ffffff !important;
	text-shadow: 0px 0px 3px #fedcff;
	transform: translateX(2.5%) scale(1.05);
	background-color: rgba(255, 255, 255, 0) !important;
	display:block;
}

/* 这仨是导航悬浮变色+上浮一点点 */
.nav-item.dropdown:hover {
	transform: translateY(-5px);
	transition:0.5s;
}
.nav-item.dropdown:hover img.arrow{
	transform: rotate(180deg);
	transition:0.2s;
}
.nav-item.dropdown:hover .nav-link {
	color: #c696ff !important;
}
.nav-item:hover .nav-link {
	color: #c696ff !important;
}
.dropdown-item {
	font-weight: 600 !important;
	color: #ffffff !important;
}

/* 改了大标题字重 */
.nav-link {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	color: #ffa3d7 !important;
	font-size: 20px;
}

/* 改了小箭头的位置 */
.arrow {
	margin-left: -3px;
}

/* 原来的文件带的，感觉最好别动 */
#navbarSupportedContent {
	position: absolute;
	top: 20px;
	right: 100px;
	color: #ff9e9e;
}
/* NavBar 结束 */

/*page stylesheet*/

/*Header*/
/*白色的标题*/
div.header-new {
	overflow-x: hidden;
	max-width:100vw;
	width:100vw;
}
div.page-title {
	font-family: "ButterSans-Rounded";
	left: 50vw;
	transform: translateX(-50%);
    font-weight: 600;
	font-size:8.8vw;
	color: #fff8ff;
	text-align: center !important;
	text-shadow: 1px 1px 5px #fff8ff40, -1px -1px 5px #af6effb0;
}
/*彩色的标题*/
div.page-title-cut-2 {
	font-family: "ButterSans-Rounded";
	clip-path:polygon(-10% -10%,49% -10%,49% 110%, -5% 110%);
	left: 50vw;
	transform: translateX(-50%);
    font-weight: 600;
	font-size:8.8vw;
	color: #ffbdf3;
	filter: drop-shadow(0px 0px 5px #b980ffD0);
	text-align: center !important;
	/* animation: glowing 2s ease-in-out infinite alternate; */
}

div.page-title-cut {
	FONT-WEIGHT: 400;
	font-family: "ButterSans-Rounded";
	left: 50vw;
	clip-path:polygon(49% -10%,110% -10%,110% 110%, 49% 110%);
	transform: translateX(-50%);
	font-weight: 600;
	font-size:8.8vw;
	color: #ffbdf3;
	filter: drop-shadow(0px 0px 5px #b980ffD0);
	text-align: center !important;
	/* animation: glowing 2s ease-in-out infinite alternate; */
}

@keyframes glowing {
	from {
		filter: drop-shadow(0px 0px 5px #b980ffD0);
		transform: translateX(-50%) translateY(0.3vw);
	}
	to {
		filter: drop-shadow(0px 0px 7px #b980ffA0);
		transform:translateX(-50%) translateY(-0.3vw);
	}
}

div.header-bg {
	filter: drop-shadow(0px 0px 2px #febbfe);

}
.header-objects {
	filter: drop-shadow(5px 5px 3px #b980ff40);
}
.header-shapes {
	filter: drop-shadow(5px 5px 3px #b980ff80);
}
/*顶端剪刀效果*/
.scroll-to-cut {
	animation: blick 2s ease-in-out infinite alternate;
}
.scroll-to-cut-scissor {
	animation: cut-down 1.5s ease-in-out infinite alternate-reverse;
}
@keyframes blick {
	from {
		opacity: 100%;
	}
	to {
		opacity: 50%;
	}
}
@keyframes cut-down {
	from {
		transform: translateY(0vw);
	}
	to {
		transform: translateY(3vw);
	}
}
/*周围碎元素的移动*/
.header-shapes img{
	animation: layered-3-ani 2s ease-in-out infinite alternate;
}
.header-objects img{
	animation: layered-1-ani 2s ease-in-out infinite alternate;
}

@keyframes layered-1-ani {
    from {
        transform: translateX(0) translateY(5px);
    }
    to {
        transform: translateX(10px) translateY(0);
    }
}

@keyframes layered-3-ani {
    from {
        transform: rotate(-2deg) translateX(2px) translateY(13px);
    }
    to {
        transform: rotate(2deg) translateX(-10px) translateY(0px);
    }
}
@keyframes layered-4-ani {
    0% {
        transform: translateX(-5px) translateY(0px);
    }
    50% {
        transform: rotate(2deg) translateY(5px);
    }
	100% {
		transform: translateX(10px) rotate(5deg) translateY(3px);
	}
}
.page-content {
	padding:0;
	max-width:100%;
	margin-top: 0;
	z-index: 10;
	position: absolute;
	top: 48vw;
}
.the-real-page-content-idk-but-the-padding-got-a-little-glitchy-i-am-really-tired {
	padding:0 5vw 2vw 5vw;
	width:100vw;
	max-width:100%
}
/*以下是是电梯导航栏样式*/
.side-nav::-webkit-scrollbar {display:none}
.side-nav::-ms-scrollbar {display:none}
.side-nav {scrollbar-width:none;
}
.side-nav {
	list-style: none;
	position: sticky;
	top:15vh;
	display: block;
	height:75vh;
	overflow-y: scroll;
	margin-bottom: 150px;
	padding-top:20px;
	scrollbar-width: none;
}
.E {
	width: 180px;
	height: 50px;
	background-color: rgba(167, 221, 240, 0.5);
	border-radius: 50%;
	/* 椭圆图标变大display: flex;
	justify-content: center; */
	align-items: center;
	
}
.page-subtitle>li:first-child{
	font-size: 1.5rem;
}
.page-subtitle a {
	text-decoration: none;
	line-height:25px;
	color:#3797e0;
}
.page-secondary-title a {
	text-decoration: none;
	line-height:20px;
	color:#9fd5ff;
}
.page-subtitle a:hover {
	text-decoration: none;
	color:#5CB8FF;
	text-shadow:0 0 2px #a6ddff;
}
.page-secondary-title a:hover {
	text-decoration: none;
	color:#86cbff;
	text-shadow:0 0 2px #cfedff;
}

/*蓝色竖线

div.side-nav::before {
	content:'';
	position:absolute;
	left:11px;
	top:0;
	height:var(--progress-height);
	width:1px;
	border-left:4px solid #fb96ff;
	clip-path: inset(30px 0);
}
div.side-nav::after {
	content:'';
	position:absolute;
	left:11px;
	top:0;
	height:100%;
	width:1px;
	border-left:4px solid #5CB8FF;
	clip-path: inset(30px 0);
}*/
/*重写的断开的蓝色竖线*/
.side-nav div {
	margin:0;
}

div.page-subtitle > li {
	height:fit-content;
	padding-left:20px;
	border-left:4px solid #5CB8FF;
	transition:0.5s border-left;
	padding-top:0PX;
	padding-bottom:25px;
}

div.page-secondary-title > li {
	height:fit-content;
	padding-left:20px;
	border-left:4px solid #5CB8FF;
	transition:0.5s border-left;
	padding-top:0PX;
	padding-bottom:25px;
}


/*div.page-secondary-title > li {
	height:fit-content;
	padding-left:10px;
	border-left:4px solid #5CB8FF;
	padding-bottom:10px;
	padding-top:10px;
}*/

.page-subtitle {
	font-size: 20px;
	line-height: 20px;
	font-weight: 600;
}
.page-secondary-title {
	font-size:17px;
	line-height: 17px;
	font-weight: 600;
}
/*蓝色空心圆圈*/
.page-subtitle::before {
	content:'';
	position:absolute;
	transform:translateX(-90%) translateY(-53%);
	margin: 18px;
	width: 40px;
	height: 40px;
	background-image: url('https://static.igem.wiki/teams/5840/figure/hudunbule1.webp'); /* 替换为你的一级标题图片路径 */
    background-size: cover; /* 图片自适应容器大小 */
    background-repeat: no-repeat;
    background-position: center; /* 图片居中显示 */
}
.page-secondary-title::before {
	content:'';
	position:absolute;
	transform:translateX(-85%) translateY(-57%);
	margin: 12px;
	width: 30px;
	height: 30px;
	background-image: url('https://static.igem.wiki/teams/5840/figure/influenzavirus6.webp'); 
	background-size: cover; /* 图片自适应容器大小 */
    background-repeat: no-repeat;
    background-position: center; /* 图片居中显示 */
}
/*以下是划过之后的粉色圆圈效果*/
div.page-subtitle > li.active::before {
    z-index:2;
	content: '';
    position: absolute;
    transform: translateX(-150%) translateY(-54%);
     margin: 18px;
	 width: 45px;
    height: 45px;
    background-image: url('https://static.igem.wiki/teams/5840/figure/hudunpink1.webp');
    background-size: cover;
    border-radius: 50%;

    /* box-shadow: 0 0 5px #ffb2ff;  */
    animation: side-nav-circle-ani 1s ease-in-out 0.3s 1 forwards;
}


div.page-secondary-title > li.active ::before {
	z-index:2;
	content:'';
	/* background: #FB96FF; */
	position:absolute;
	transform:translateX(-137%) translateY(-54%);
	/* box-shadow: 0px 0px 5px #ffb2ff; */
	margin: 12px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-image: url('https://static.igem.wiki/teams/5840/figure/influenzavirus7.webp');
     background-size: cover;
    border-radius: 50%;
	animation: side-nav-circle-ani 0.5s ease-in 0.3s 1 forwards;
}
@keyframes side-nav-circle-ani {
	0% {
		opacity: 50%;
	}

	100% {
		opacity:100%;
	}
}
/*激活后的粉色线段*/
/*li.first-li ::after{
	display: none;
}
li.active ::after{
	z-index:0;
	content:'';
	position:absolute;
	left:11px;
	width:1px;
	height:35px;
	transform:translateY(-80%);
	transform-origin: left top;
	border-left:4px solid #FB96FF;
	box-shadow: 0px 0px 5px #ffb2ff;
	animation: pink-line-ani 0.5s ease-in-out forwards;
	
}
@keyframes pink-line-ani {
	from {
		transform-origin: left top;
		transform:translateY(-80%) scaleY(0.1);
	}
	to {
		transform-origin: left top;
		transform:translateY(-80%) scaleY(1);
	}
}
*/
div.page-subtitle > li.active a {
	animation: font-turn-purple 0.5s ease-in 0.3s 1 forwards;
}
div.page-secondary-title > li.active a {
	animation: font-turn-pink 0.5s ease-in 0.3s 1 forwards;
}

@keyframes font-turn-pink {
	from {color: #5CB8FF;}
	to {color: #FFA3D7;text-shadow: 0px 0px 2px #ffb2ff80;}
}
 
@keyframes font-turn-purple {
	from {color: #5CB8FF;}
	to {color: #c696ff;text-shadow: 4px 10px 4px #ffb2ff80;}
}
/*电梯导航栏结束*/

/*原来文件带的*/
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #f3ffff !important; }
.bg-hero { background-color: #45b06cff; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }


 .footer-bg {
	position:absolute;
	z-index:-1;
	left:0;
	bottom:0;
	width: 100vw;
	max-width:100%;
	margin:0;
	padding:0;
	filter: drop-shadow(0px 0px 2px #febbfe);
}

footer section.acknowledgements {
	position:absolute;
	left:1.2vw;
	bottom:4.2vw;
	z-index:2;
}
.acknowledgements {
	filter: drop-shadow(0px 0px 2px #febbfe);
}
section.footer-nav {
	position:absolute;
	bottom:1vw;
	left:57vw;
	width:30vw;
	height:10vw;
}
.footer-nav h5 {
	margin:0.1vw
}
.footer-links {
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	width:30vw;
	height:8vw;
	font-weight:600;
}
.footer-links li {
	list-style:none;
	width:15vw;
}
.footer-links a {
	color:#fff8ff;
	font-size:1.2vw;
	text-decoration: none;
	align-items: center;
}
.footer-links a:hover {
	color:#ffffff;
	text-shadow: 0px 0px 3px #fedcff;

}
footer section.copyright {
	font-size:1vw;
	position: absolute;
	left: 1.4vw;
	bottom:0vw;
}
.copyright p {
	font-weight:600 !important;
	color: #fff8ff;
	line-height:1vw;
	font-weight:400;

}
.copyright a {
	color:#fff8ff;
	text-decoration: none;
}
.copyright a:hover {
	color:#ffffff;
	text-shadow: 0px 0px 3px #fedcff;
} 
 section.contact-us {
 	position: absolute;
 	right: 7vw;
 	bottom:3vw;
}
.contact-icon {
	display:flex;

}
.contact-icon img{
	margin:0 0.5vw;
}
.contact-icon img:hover{
	filter: drop-shadow(0px 0px 1.5px #fedcff);
}

.contact-email {
	transform: translateY(0.2vw)
}

div.contact-wechat:hover::before {
	content:"";
	width:5vw;
	height:5vw;
	background-image: url(https://static.igem.wiki/teams/5840/figure/f1.webp);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position:absolute;
	z-index:4;
	bottom:3.7vw;
	left:-1.3vw;
}
div.contact-wechat:hover::after {
	content:"";
	width:6.5vw;
	height:6.5vw;
	background-color: #fff8ff;
	border-radius: 1vw;
	position:absolute;
	bottom:3vw;
	left:-2vw;
	box-shadow: 0px 0px 5px #ffb2ff;
}

/* Instagram hover */
div.contact-instagram:hover::before {
    content: "";
    width: 5vw;
    height: 5vw;
    background-image: url(https://static.igem.wiki/teams/5840/figure/f2.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    z-index: 4;
    bottom: 3.7vw;
    left: -1.3vw;
}

div.contact-instagram:hover::after {
    content: "";
    width: 6.5vw;
    height: 6.5vw;
    background-color: #fff8ff;
    border-radius: 1vw;
    position: absolute;
    bottom: 3vw;
    left: -2vw;
    box-shadow: 0px 0px 5px #ffb2ff;
}


div.contact-email:hover::before {
	content:"2021302041074@whu.edu.cn";
	text-align: center;
	font-size:1vw;
	line-height: 3vw;
	color:#FFA3D7;
	width:17vw;
	height:3vw;
	font-weight:600;
	background-color:#fff8ff;
	box-shadow: 0px 0px 5px #ffb2ff;
	border-radius:1vw;
	position:absolute;
	z-index:4;
	bottom:3vw;
	left:-14vw;
} 


footer {
    position: relative;
    width: 100%;
	height: 15vw;
	bottom: 0;
	margin-top: 0vw;
    background: #ee7fc8;
    min-height: 100px;
    padding: 20px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

footer .social-icon {

    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

footer .social-icon li {
    position: relative;
    background: #fff;
    width: 50px;
    height: 50px;
    list-style: none;
    box-shadow: inset 5px 5px 10px rgba(245, 241, 241, 0.1),
        10px 15px 10px rgb(247, 240, 240, 0.2);
    border-radius: 15px;
    transition: 0.5s;
	left: -5vw;
}

footer .social-icon li::before {
    content: '';
    position: absolute;
    inset: 4;
    box-shadow: inset 4px 4px 0 #fff;
    z-index: 1;
    border-radius: 20px;
    filter: blur(2px);
    pointer-events: none;
}

footer .social-icon li:hover {
    transform: translateY(-20px);
}

footer .social-icon li a {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 2em;
    color: var(--clr);
}


footer .menu {
    position: relative;
	left: -5vw;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    flex-wrap: wrap;
}

footer .menu li a {
    font-size: 1.2em;
    color: #fff;
    margin: 0 20px;
    display: inline-block;
    transition: 0.5s;
    text-decoration: none;
}

footer .menu li a:hover {
    opacity: 0.7;
}

footer p {
    color: #fff;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 10px;
}

footer .wave {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url(https://static.igem.wiki/teams/5840/figure/wave1.webp);
    background-size: 1000px 100px;
}

footer .wave#wave1 {
    z-index: 1000;
    opacity: 1;
    bottom: 0;
    animation: animateWave 4s linear infinite;
}

footer .wave#wave2 {
    z-index: 999;
    opacity: 0.5;
    bottom: 10px;
    animation: animateWave2 4s linear infinite;
}

footer .wave#wave3 {
    z-index: 1000;
    opacity: 0.2;
    bottom: 15px;
    animation: animateWave 3s linear infinite;
}

footer .wave#wave4 {
    z-index: 999;
    opacity: 0.7;
    bottom: 20px;
    animation: animateWave2 3s linear infinite;
}

@keyframes animateWave {
    0% {
        background-position: 1000px;
    }

    100% {
        background-position-x: 0px;
    }
}

@keyframes animateWave2 {
    0% {
        background-position: 0px;
    }

    100% {
        background-position-x: 1000px;
    }
}
/*DESCRIPTION正文样式*/

.icon-container {
	position:relative;
	width:90%;
	left:5%;
	display: flex;
	flex-wrap: nowrap;
	justify-content:space-evenly;
}
.icon-container > div {
 	width:130px;
}
.icon-container p {
	margin-top: 20px;
	text-align: center;
	color:#c696ff;
	font-weight:600;
	line-height:20px;
	font-size: 17px;
	transition:0.5s;
}
.icon-container > div:hover p {
	color:#FFA3D7;
	transform:translateY(-5px);
}
.icon-container img {
	width:130px;
	transition: 0.5s;
}
.icon-container > div:hover img{
	transform:scale(1.1);
}
#promoter-cards-container {
	animation: cards-move 5s infinite linear;
}
@keyframes cards-move {
	0% {transform:translateY(0%)}
	8% {transform:translateY(0%)}
	12% {transform:translateY(-14.29%)}
	28% {transform:translateY(-14.29%)}
	32% {transform:translateY(-28.57%)}
	48% {transform:translateY(-28.57%)}
	52% {transform:translateY(-42.86%)}
	68% {transform:translateY(-42.86%)}
	72% {transform:translateY(-57.14%)}
	88% {transform:translateY(-57.14%)}
	92% {transform:translateY(-70.43%)}
	100% {transform:translateY(-70.43%)}
	}
/*Design 正文样式*/
section#design-nav-container {
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
}
section#design-nav-container a {
	text-decoration:none;
}
section#design-nav-container div:hover {
	transform:translateY(-20px);
}
section#design-nav-container div {
	width: 350PX;
	margin:20px 20px;
	background:#ffbce5;
	border-radius: 50PX;
	padding:20px;
	transition:1s;
	box-shadow:  0px 0px 5px #ffb2ff;
}
section#design-nav-container div h3 {
	padding:0;
	font-size: 1.2rem;
}
section#design-nav-container div p {
	font-size: 0.9rem;
	line-height:1.2rem;
	word-wrap: break-word;
	word-break:normal;
	hyphens:auto;

}
/*design 里 EL222 的动态*/
div.EL222mechanism {
	position: relative;
	height: 19.6vw;
	width: 64vw;
}
.EL222mechanism > *{
	position:absolute;
}
.pEL222 {
	width:40%;
	left:30%;
	top:80%;
}
.pEL222dark:hover ~ .EL222left , .pEL222dark:active ~ .EL222left {
	left:43%;
	top:20%;
}

.EL222left {
	height:68%;
	left:40%;
	top:5%;
	transition:1s;
}
.pEL222dark:hover ~ .EL222leftactive , .pEL222dark:active ~ .EL222leftactive {
	left:43%;
	top:20%;
	opacity:1;
}
.EL222leftactive {
	opacity:0;
	height:68%;
	left:40%;
	top:5%;
	filter:drop-shadow(0px 0px 10px #9af3f7);
	transition:1s;
}
.pEL222dark:hover ~ .EL222right , .pEL222dark:active ~ .EL222right {
	left:50%;
	top:20%;
}

.EL222right {
	height:68%;
	left:53%;
	top:5%;
	transition:1s;
}
.pEL222dark:hover ~ .EL222rightactive , .pEL222dark:active ~ .EL222rightactive {
	left:50%;
	top:20%;
	opacity:1;
}
.EL222rightactive {
	opacity:0;
	height:68%;
	left:53%;
	top:5%;
	filter:drop-shadow(0px 0px 10px #9af3f7);
	transition:1s;
}
.pEL222dark {
	position:absolute;
	width:10%;
	left:24%;
	top:0;
}
.pEL222dark:hover ~ .pEL222light,.pEL222dark:active ~ .pEL222light{
	opacity:1;
}
.pEL222light {
	pointer-events: none;
	opacity:0;
	transition:1s;
	position:absolute;
	width:10%;
	left:24%;
	top:0%;
	filter: drop-shadow(0px 0px 10px #9af3f7);
}
.pEL222dark:hover ~ .light-wave,.pEL222dark:active ~ .light-wave{
	opacity:1;
}
.light-wave {
	left:23%;
	top:48%;
	width:14%;
	opacity:0;
	transition:0.5s;
}
div.text-1 {
	width: 10%;
	max-height:250px;
	left:12%;
	top:8%;
	font-weight: 700;
	color:#5CB8FF;
	font-size: 1.2rem;
}
/*HP 正文样式*/
a#inte-1:hover {
	text-decoration:none;
}
a#inte-1:hover::before {
	content:"Fei Gan";
	text-align: center;
	font-size:1.2vw;
	line-height:2vw;
	color:#FFA3D7;
	width:fit-content;
	height:fit-content;
	font-weight:600;
	background-color:#fff8ff;
	box-shadow: 0px 0px 5px #ffb2ff;
	border-radius:1vw;
	position:absolute;
	left:4.5%;
	top:40%;
	text-decoration:none;
	z-index:4;
	padding:1vw;
}

a#inte-2:hover {
	text-decoration:none;
}
a#inte-2:hover::before {
	content:"Andreas Möglich";
	text-align: center;
	font-size:1.2vw;
	line-height:2vw;
	color:#FFA3D7;
	width:fit-content;
	height:fit-content;
	font-weight:600;
	background-color:#fff8ff;
	box-shadow: 0px 0px 5px #ffb2ff;
	border-radius:1vw;
	position:absolute;
	left:9.5%;
	top:80%;
	text-decoration:none;
	z-index:4;
	padding:1vw;
}
a#inte-3:hover {
	text-decoration:none;
}
a#inte-3:hover::before {
	content:"Liran Mao";
	text-align: center;
	font-size:1.2vw;
	line-height:2vw;
	color:#FFA3D7;
	width:fit-content;
	height:fit-content;
	font-weight:600;
	background-color:#fff8ff;
	box-shadow: 0px 0px 5px #ffb2ff;
	border-radius:1vw;
	position:absolute;
	left:20.5%;
	top:40%;
	text-decoration:none;
	z-index:4;
	padding:1vw;
}

a#inte-4:hover {
	text-decoration:none;
}
a#inte-4:hover::before {
	content:"Xiaowei Liang";
	text-align: center;
	font-size:1.2vw;
	line-height:2vw;
	color:#FFA3D7;
	width:fit-content;
	height:fit-content;
	font-weight:600;
	background-color:#fff8ff;
	box-shadow: 0px 0px 5px #ffb2ff;
	border-radius:1vw;
	position:absolute;
	left:27.5%;
	top:80%;
	text-decoration:none;
	z-index:4;
	padding:1vw;
}
a#inte-5:hover {
	text-decoration:none;
}
a#inte-5:hover::before {
	content:"Ying Zhang";
	text-align: center;
	font-size:1.2vw;
	line-height:2vw;
	color:#FFA3D7;
	width:fit-content;
	height:fit-content;
	font-weight:600;
	background-color:#fff8ff;
	box-shadow: 0px 0px 5px #ffb2ff;
	border-radius:1vw;
	position:absolute;
	left:36.5%;
	top:40%;
	text-decoration:none;
	z-index:4;
	padding:1vw;
}

a#inte-6:hover {
	text-decoration:none;
}
a#inte-6:hover::before {
	content:"Xingpeng Wen";
	text-align: center;
	font-size:1.2vw;
	line-height:2vw;
	color:#FFA3D7;
	width:fit-content;
	height:fit-content;
	font-weight:600;
	background-color:#fff8ff;
	box-shadow: 0px 0px 5px #ffb2ff;
	border-radius:1vw;
	position:absolute;
	left:45.5%;
	top:80%;
	text-decoration:none;
	z-index:4;
	padding:1vw;
}

a#inte-7:hover {
	text-decoration:none;
}
a#inte-7:hover::before {
	content:"Lihua Zhang";
	text-align: center;
	font-size:1.2vw;
	line-height:2vw;
	color:#FFA3D7;
	width:fit-content;
	height:fit-content;
	font-weight:600;
	background-color:#fff8ff;
	box-shadow: 0px 0px 5px #ffb2ff;
	border-radius:1vw;
	position:absolute;
	left:54.5%;
	top:40%;
	text-decoration:none;
	z-index:4;
	padding:1vw;
}

a#inte-8:hover {
	text-decoration:none;
}
a#inte-8:hover::before {
	content:"Haoyuan Sun";
	text-align: center;
	font-size:1.2vw;
	line-height:2vw;
	color:#FFA3D7;
	width:fit-content;
	height:fit-content;
	font-weight:600;
	background-color:#fff8ff;
	box-shadow: 0px 0px 5px #ffb2ff;
	border-radius:1vw;
	position:absolute;
	left:63.5%;
	top:80%;
	text-decoration:none;
	z-index:4;
	padding:1vw;
}
a#inte-9:hover {
	text-decoration:none;
}
a#inte-9:hover::before {
	content:"Fei Liao";
	text-align: center;
	font-size:1.2vw;
	line-height:2vw;
	color:#FFA3D7;
	width:fit-content;
	height:fit-content;
	font-weight:600;
	background-color:#fff8ff;
	box-shadow: 0px 0px 5px #ffb2ff;
	border-radius:1vw;
	position:absolute;
	left:72.5%;
	top:40%;
	text-decoration:none;
	z-index:4;
	padding:1vw;
}

a#inte-10:hover {
	text-decoration:none;
}
a#inte-10:hover::before {
	content:"Chaoqi Chen";
	text-align: center;
	font-size:1.2vw;
	line-height:2vw;
	color:#FFA3D7;
	width:fit-content;
	height:fit-content;
	font-weight:600;
	background-color:#fff8ff;
	box-shadow: 0px 0px 5px #ffb2ff;
	border-radius:1vw;
	position:absolute;
	left:90.5%;
	top:80%;
	text-decoration:none;
	z-index:4;
	padding:1vw;
}
/*Team 正文样式*/
h1.team-title {
	font-family: "ButterSans-Rounded";
    font-size: 6vw;
    color:transparent;
    text-align:center;
    line-height:150%;
    background: linear-gradient(160deg,
    #c696ff 0%, #fb96ff 50%, #ffa3d7 100%
    );
    background-clip:text;
    -webkit-background-clip: text;
    filter: drop-shadow(0px 0px 2px #ffa3d780);
}
section.self-introduction {
	margin:0 50px;
}
section.self-introduction svg {
	opacity:0;
	transition:1s;
}
section.self-introduction:hover svg {
	opacity:1;
}
section.self-introduction:hover div.text {
	transform:translateY(0px)
}
section.self-introduction div.text {
	transform: translateY(10PX);
	transition:0.5s;
	overflow-wrap: break-word;
}
section.self-introduction-container {
	flex-wrap: wrap;
	margin:0 50px;
    display: flex;
    justify-content: space-evenly;
}
section.self-introduction svg {
	fill:none;
	stroke-width: 2px;
	position:absolute;
	transform:translateX(-10%) translateY(-94%);
	
}
section.self-introduction {
    width:250px;
    padding:25px;
}
section.self-introduction a{
	color: #ffa3d7;
	text-decoration: none;
}
section.self-introduction a:hover{
	color: #ffa3d7;
	text-decoration:underline 2px;
}
section.self-introduction img {
    width:200px;
	height:266.67px;
	border-radius: 100px;
	box-shadow:  0px 0px 5px #ffb2ff;
}
section.self-introduction p {
    width:200px;
	color:#2e2272;
	overflow-wrap: break-word;
	font-family: 'Montserrat';
	font-weight: 500;
}
section.self-introduction p.self-introduction {
	position:relative;
	left:-25px;
	text-align: justify;
	font-size: 0.85rem;
	width: 250px;
	overflow-x:hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}
section.self-introduction h2 {
	font-family: 'Montserrat';
    text-align: center;
    color: #c696ff;
	font-weight:600;
	margin:0;
	padding-top:20px;
    font-size: 1.5rem;
}
section.self-introduction h3 {
	font-family: 'Montserrat';
    text-align: center;
    white-space: nowrap;
	font-weight:600;
    font-size:1rem;
	margin:0;
	color:#ffa3d7;
}
section.self-introduction p.quote-container {
	margin:10px 0px;
	padding:10px 20px;
	background:#ffa3d7;
	border-radius: 20px;
	box-shadow: 0px 0px 5px #ffb2ff;
	text-align:left;
	font-size:0.85rem;
	color:#7748af;
}
section.self-introduction .quote {
	color:#fff8ff;
}
img.group-photo {
	width:700px;
	margin:70px 0;
	transform: rotate(-5deg);
	border:#fff solid 12px;
	box-shadow: 0px 0px 10px #ffb2ff;
	border-radius: 5px;
	position: relative;
	left:calc(50vw - 350px);
}
div.group-photo::before {
	content:'';
	opacity:70%;
	width:150px;
	height:50px;
	display:block;
	position:absolute;
	transform:translateX(calc(50vw - 400px)) translateY(110PX) rotate(-50deg);
	box-shadow: 0px 0px 5px #ffb2ff;
	border-radius: 5px;
	background:#ffa3d7;
	z-index:100;
}
div.group-photo::after {
	content:'';
	opacity:70%;
	width:150px;
	height:50px;
	display:block;
	position:absolute;
	transform:translateX(calc(50vw + 260px)) translateY(-160PX) rotate(-50deg);
	box-shadow: 0px 0px 5px #ffb2ff;
	border-radius: 5px;
	background:#ffa3d7;
	z-index:100;
}
/* inclusivity */
#plasmid-rainbow {
	animation:plasmid-rainbow 10s infinite linear;
	transform-origin: 48% 51.8%;
}
@keyframes plasmid-rainbow {
	to {transform:rotate(360deg)}
}
#plasmid-earth {
	/* clip-path: circle(21.5% at 29.9% 52.7%); */
	transform:translateX(10%);
	clip-path: circle(21.5% at 19.9% 52.7%);
	animation:plasmid-earth 8s infinite linear;
}
@keyframes plasmid-earth {
	from {
		transform:translateX(10%);
		clip-path: circle(21.5% at 19.9% 52.7%);
	}
	to {
		transform:translateX(-50%);
		clip-path: circle(21.5% at 79.9% 52.7%);
	}
}
/*不同屏幕宽度的适应*/
@media screen and (max-width: 1000px) {
.side-nav {display: none;}
footer > section.footer-nav {display: none;}
footer > section.acknowledgements {display: none;}
footer > section.contact-us {display: none;}
footer > section.copyright {display: none;}
.navbar {height:fit-content}
button.navbar-toggler {position:absolute; right:10px;top:10px;color:#FFA3D7}
}
@media screen and (max-width: 1080px) {
	li.nav-item {font-size: 0.85rem;}
} 
@media screen and (max-width: 860px) {
	.back-to-top > img {
		width:30px
	}
	.back-to-top div {
		font-size: 0.7rem;
	}
}