/*字体库*/
body {
    font-family: Arial, sans-serif;
} 

section.content1 > p{
    color: #0a8188;
    font-weight: 300;
    font-size: 130%;
}

section.content1 > h1{
    color: #0a8188;
    font-weight: bolder;
}

section.content1 > h2{
    color: #0a8188;
    font-weight: 400;
    font-size: 200%;
}

p{
    line-height: 2;
}

/*加载界面*/
/*
.loading-container {
    text-align: center;
}

.loading-message h1 {
    font-size: 2rem;
    color: #333;
}

.loading-message p {
    font-size: 1rem;
    color: #666;
    margin-top: 10px;
}

.loading-gif {
    width: 100px; 
    height: 100px; 
    margin-top: 20px;
    background-image: url(https://static.igem.wiki/teams/5339/small-items/img-4914.gif); 
    background-size: cover;
    background-repeat: no-repeat;
}
   
#menu-bar, #first2{
    display: none; 
}

.container{
    display: none;
}
.pt-5 pb-5 footer py-5 mt-5  text-white{
    display: none;
}
*/

/*鼠标光标*/
body{
    cursor: url(https://static.igem.wiki/teams/5339/small-items/2024-09-28-201332-3.png), auto; /* 备用光标 */
  }


/*导航栏整体*/
nav#menu-bar {
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0, 0;
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 80px;
    z-index: 1000; 
    backdrop-filter: blur(2px);
    transition: top 0.5s ease-in-out; /* 动画效果 */
}
nav#menu-bar ul {
    max-width: 100%;
    display: flex;
    list-style-type: none;
    padding: 0;
    margin-left: 0;
}

nav#menu-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(https://static.igem.wiki/teams/5339/small-items/img-4598-1-1.png) no-repeat center center / cover;
    opacity: 0.7; /* 只更改背景图的透明度 */
    z-index: -1;
  }

/*logo栏目*/
nav#menu-bar .logo {
    /*background-color: red;*/
    width: 20%;
    padding-top: 0;
    padding-left: 30px;
    height: 10%;
    background-color: none;
}
nav#menu-bar .logo img {
    width: auto; 
    height: 70px; 
    object-fit: contain; /* 保持图像比例 */
}

/*菜单栏目*/
nav#menu-bar .navi {
    /*background-color: blue;*/
    width: 80%;
    height: auto;
    display: flex; /* 启用 Flexbox */
    right: 0;
    justify-content: flex-end; /* 子元素靠左对齐 */
    align-items: center; /* 垂直居中对齐 */
    gap: 2%;
    padding-right: 1%;
}
nav#menu-bar li {
    padding: 0 0;
    position: relative;
    left: 0;
}

nav#man {
    color:white;
}

/*菜单文字*/
nav#menu-bar a {
    color: white;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 25px;
    text-decoration: none;
    transition: color 0.3s;  
}
nav#menu-bar a:hover {
    color: #555; 
}

/*菜单内容*/
.dropdown-content {
    display: none;
    position: absolute;
    background-color: none;
    min-width: 50px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.0);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 1s, visibility 1s, transform 1s;
}

.dropdown-content a {
    color: black;
    padding: 5px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.dropdown:hover .dropdown-content {
    background-image: url(https://static.igem.wiki/teams/5339/backgound/20240927193940-1.png);
    background-position: center;
    /*  background-color: #c6f0c8;*/
    border-radius: 10px;
    margin-left: 5px;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0); 
}

/*页面介绍*/
header#first1{
    background-size: 100% 100%;
    background-image: url(https://static.igem.wiki/teams/5339/backgound/img-4959-1.png);
    background-position: top;
    height: 100vh;
    width:auto;
    margin-top: 0;
}

header#first2{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/backgound/20240924222700.jpg);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first3{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/backgound/img-5100-1.png);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first4{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/backgound/img-4634.png);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first5{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/backgound/img-4665.png);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first6{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/backgound/img-5127.png);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first7{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/backgound/img-4675.png);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first8{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/backgound/img-4928.png);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first9{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/backgound/20241001020731.jpg);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first10{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/backgound/20241001030212.jpg);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first11{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/backgound/img-5152.png);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first12{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/backgound/20241002070212.jpg);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first13{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/bg2/c.png);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}
header#first14{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/bg2/es.png);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first15{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/bg2/i.png);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first16{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/safety-1.jpg);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first17{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/bg2/es.png);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first18{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/bg2/i.png);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first19{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/backgound/20241002070212.jpg);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first20{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/bg2/e.png);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

header#first21{
    background-size: 100% 100%;
    background-image:url(https://static.igem.wiki/teams/5339/bg2/c.png);
    height: 100vh;
    background-position: top;
    width: auto;
    margin-top: 0;
}

/*ai页*/
.ai_logo{
    display: flex;
    justify-content: center;
}

.ai_logo img{
    margin-top: 25vh;
    width: 60%;
    height: auto;
    padding-right: 0;
}

/*model页*/
.model_logo{
    display: flex;
    justify-content: center;
}

.model_logo img{
    margin-top: 25vh;
    width: 60%;
    height: auto;
    padding-right: 0;
}

/*attribution页*/
.attributions_logo{
    display: flex;
    justify-content: center;
}

.attributions_logo img{
    margin-top: 25vh;
    width: 60%;
    height: auto;
    padding-right: 0;
}

/*notebook页*/
.notebook_logo{
    display: flex;
    justify-content: center;
}

.notebook_logo img{
    margin-top: 25vh;
    width: 60%;
    height: auto;
    padding-right: 0;
}

/*humanpractice页*/
.human_practices_logo{
    display: flex;
    justify-content: center;
}

.human_practices_logo img{
    margin-top: 25vh;
    width: 60%;
    height: auto;
    padding-right: 0;
}

/*parts页*/
.parts_logo{
    display: flex;
    justify-content: center;
}

.parts_logo img{
    margin-top: 25vh;
    width: 60%;
    height: auto;
    padding-right: 0;
}

/*results页*/
.results_logo{
    display: flex;
    justify-content: center;
}

.results_logo img{
    margin-top: 25vh;
    width: 60%;
    height: auto;
    padding-right: 0;
}

/*design页*/
.design_logo{
    display: flex;
    justify-content: center;
}

.design_logo img{
    margin-top: 25vh;
    width: 60%;
    height: auto;
    padding-right: 0;
}

/*description页*/
.description_logo{
    display: flex;
    justify-content: center;
}

.description_logo img{
    margin-top: 25vh;
    width: 90%;
    height: auto;
    padding-right: 0;
}


/*protocol页*/
.protocol_logo{
    display: flex;
    justify-content: center;
}

.protocol_logo img{
    margin-top: 25vh;
    width: 90%;
    height: auto;
    padding-right: 0;
}

/*member页*/
.members_logo{
    background-color: none;

}

.members_logo img{
    margin-top: 0;
    width: 100%;
    height: auto;
    padding-right: 0;
}

.member_1{
    display: flex;
    justify-content:space-between;
    background-color: none;
    width: 100%;
    height: auto;
}

.member_1 img{
    width: auto; 
    height: 500px; 
    object-fit: contain;
}

.member_2{
    display: flex; /* 允许图片换行 */
    justify-content: center; /* 水平居中对齐 */
    align-items: center; /* 垂直居中对齐 */
    gap: 0; /* 设置图片之间的间距 */
}

.member_2 img{
    width: auto; 
    height: 400px; 
    object-fit: contain;
    margin-inline: -500px;
}

#instructors h1{
    color: #4ebcb5;
    text-align: center;
    font-style: normal;
    font-size: 400%;
    font-weight: 800;
}

.instructors img{
    width: 100%;
}

/*页面内容们*/
.content_1{
    background-size: cover;
    position: relative;
    padding-left: 0;
    margin-top: -75vh;
    margin-left: 20%;
    margin-right: auto;
    margin-bottom: auto;
    width: 80%;
    height: auto;
    padding-top: 2%; 
    background-color:#f0f7f5;
    transition: transform 0.5s ease-in-out; /* 添加平滑过渡效果 */
}

.content_1 image{
    width: 100%;
    height: auto;
    padding-top: 0;
}


section.content1{
    margin: 120px;
    margin-bottom: 5%;
    margin-left: 8%;
    margin-right: 6%;
    height: auto;
    width: 86%; 
}

section.content2{
    margin-top: 5%;
    margin-bottom: 2.5%;
    height: auto;
    width: 95%;   
}

section.content2 p{
    text-align: center;
}

section.content1 img{
    padding: center;
    height: 300px;
}

.formular{
    height: 1px;
    width: 90%;
}

.zhongjian{
    display: block;
    justify-content: center;
    text-align: center;
}

.zhongjian  img{
    padding: center;
    height: 300px;
}

footer a,p,h4,ul { color: #1d9bbe;; text-decoration: none; }

footer a:hover { color: black; text-decoration: underline; }
footer{
    position: relative;
    background-image: url(https://static.igem.wiki/teams/5339/large-items/footer.png);
    background-size: cover;
    background-position: bottom;
   /* background-color: blue;*/
    height: 440px;
}

.football{
    display: flex;
    position: relative;
    padding-top: 10%;
    padding-left: 2%;
}

.football img{
    display: flex;
    height: 90px;
    width: auto;
    margin-right: 2%;
}

.soccer{
    position: relative;
    padding-top: 1%;
    padding-left: 2%;
    gap:2vh;
}

.soccer img{
    height: 100px;
    width: auto;
}

.football p{
    padding-top: 1%;
    display: flex;
    color: #0a8188;
    font-size: 100%;
}

/*电梯导航栏（新）*/
.sidebar {
    list-style: none;
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    height: 75vh;
    overflow-y: auto;
    padding: 20px;
    scrollbar-width: none; /* Firefox */
    background: rgba(255, 255, 255, 0.9); /* 半透明的背景 */
    width: 20%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
    margin-right: 10px; /* 与页面右侧保持一定距离 */
    transition: transform 0.3s ease-in-out; /* 为滚动添加过渡效果 */
}

/* 当页面滚动到一定位置时，改变导航栏的位置 */
body.scrolled .sidebar {
    transform: translateX(-100%); /* 隐藏导航栏 */
}

.navigation {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.navigation li a {
    text-decoration: none;
    color: #31a5ab;
    font-size: 16px;
    display: block;
    padding: 8px 16px;
    margin-bottom: 8px;
    border-left: 2px solid transparent; /* 用于交互的边框 */
    transition: color 0.3s, border-color 0.3s; /* 过渡效果 */
}

.navigation li a:hover,
.navigation li a:focus {
    color: #111; /* 鼠标悬停或聚焦时的文字颜色 */
    border-left-color: #31a5ab; /* 鼠标悬停或聚焦时的边框颜色 */
}

.navigation li a.active {
    font-weight: bold; /* 激活项的字体加粗 */
    border-left-color: #31a5ab; /* 激活项的边框颜色 */
}

/* 自定义滚动条样式 */
.sidebar::-webkit-scrollbar {
    width: 6px; /* 滚动条宽度 */
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3); /* 滚动条颜色 */
    border-radius: 3px; /* 滚动条圆角 */
}

.sidebar::-webkit-scrollbar-track {
    background-color: transparent; /* 滚动条轨道颜色 */
}



/*
.sidebar {
	list-style: none;
	position: sticky;
	top:80px;
	display: block;
	height:75vh;
	overflow-y: scroll;
	padding-top:20px;
	scrollbar-width: none;
    background-size: 100% 100%;
    width: 30%;
    border-radius: 10px;
}

.navigation {
    list-style-type: none;
    padding-left: 10%;
    padding-top: 20%;
}

.navigation li a {
    text-decoration: none;
    color: #31a5ab;
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
}

.navigation li a:hover {
    color: #7ad4b5;
    font-weight: bold;
}*/

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