App.css

body {
  padding-top: 56px;
}

.left-aligned {
  margin-left: auto;
}

.bg-dark {
  background-color: #343a40 !important;
}

.bg-hero {
  background-color: #45b06cff;
}

.bg-rice_yellow {
  background-color: rgb(245, 245, 220);
}


/* CALLOUT */
.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #e9ecef;
  border-left-width: 0.25rem;
  border-radius: 0.25rem;
}

.bd-callout h4 {
  margin-bottom: 0.25rem;
}

.bd-callout p:last-child {
  margin-bottom: 0;
}

.bd-callout code {
  border-radius: 0.25rem;
}

.bd-callout + .bd-callout {
  margin-top: -0.25rem;
}

.bd-callout-info {
  border-left-color: #5bc0de;
}

.bd-callout-warning {
  border-left-color: #f0ad4e;
}

.bd-callout-danger {
  border-left-color: #d9534f;
}

/* footer */
footer a {
  color: white;
  font-weight: bold;
  text-decoration: none;
}

footer a:hover {
  color: white;
  text-decoration: underline;
}

/* navbar */
.custom-dropdown-menu {
  /* navbar folder的设置 */
  /* background-color: #1b1a1a;  //自定义背景色 */
  color: #030303;  /* 自定义文字颜色 */
}

.custom-dropdown-menu.dropdown-item {
  /* navbar folder 展开时字体颜色与背景 */
  /* background-color: #4d4949; */
  color: #000000;  /* 自定义每个菜单项的文字颜色 */
}

.custom-dropdown-menu.dropdown-item:hover {
  background-color: #e4dfb4;  /* 鼠标悬停时的背景色 */
  color: #39d197;  /* 鼠标悬停时的文字颜色 */
}

/* header */
.custom-header-home {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/image/zxa-tp.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */
}

.custom-header-team {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */
}

.custom-header-attributions {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}

.custom-header-contribution {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}

.custom-header-description {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}

.custom-header-education {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}
.custom-header-engineering {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}
.custom-header-entrepreneurship {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}
.custom-header-experiments {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}
.custom-header-hardware {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}
.custom-header-human-practices {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}
.custom-header-inclusivity {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}
.custom-header-measurement {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}
.custom-header-model {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}
.custom-header-notebook {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}
.custom-header-plant {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}
.custom-header-results {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}
.custom-header-safety {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}
.custom-header-software {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}
.custom-header-sustainable {
  width: 100vw;
  height: 100vh;
  background-image: url('https://static.igem.wiki/teams/5378/school-badge/yanyintech.webp'); /* 背景图片路径 */
  background-size: cover;        /* 使背景图片覆盖整个容器 */
  background-position: center;   /* 居中对齐背景图片 */
  background-repeat: no-repeat;  /* 防止背景图片重复 */
  background-attachment: fixed;  /* 固定背景图片，使其在滚动时不移动 */

}

.promotion-video {
  height: 30vh; /* 设置高度为视口高度的80% */
  border: none; 
  border-radius: 30px; /* 圆角效果 */
}

.responsive-img {
  width: 100%; /* 图片宽度自适应容器 */
  height: auto; /* 保持图片纵横比 */
  display: block; /* 去掉图片下方的空隙 */
}

.full-height-element {
  height: 100vh; /* 设置元素的高度为视口高度的 100% */
}

/* 以下几个是team member响应式卡片 */
.card-container {
  max-width: 300px;
  margin: auto;
  height: 500px;
}

.card {
  transition: transform 0.2s;
}

.card-img-top {
  width: 300px;
  height: 400px;
}

.card-container:hover .card {
  transform: scale(1.05);
}

.row-custom-height-card {
  height: 300px; /* 你可以根据需要调整高度 */
}

.row-custom-height-card-space {
  height: 100px; /* 你可以根据需要调整高度 */
}

/* wet-lab,dry-lab用的内容框框 */
.rounded-border {
  margin: 50px;
  padding: 50px;
  border: 2px solid #f7a901; /* 设置边框的宽度和颜色 */
  border-radius: 10px; /* 设置圆角半径 */
  margin-bottom: 100px;
}

/* 页面title的水平与垂直居中 */
.centered-title {
  height: 100%; /* Full height of the container */
  display: flex;
  align-items: center; /* Vertical center */
  justify-content: center; /* Horizontal center */
}

/* 文本居中 */
.center-text {
  text-align: center; /* 将文本水平居中 */
}

/* 文本开头有缩进，起到空格作用 */
.indent {
  text-indent: 20px; /* 设置首行缩进 20px */
}

.side-navbar {
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  height: 30%;
  background-color: rgb(245, 245, 220);
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  margin-top: 300px;
  margin-left: 20px;
}

.side-navbar .nav-link {
  margin-bottom: 10px;
  font-weight: bold;
}

.side-navbar .nav-link.active {
  background-color: rgb(172, 172, 108);
}

.side-navbar .nav-link.notActive {
  background-color: rgb(245, 245, 220);
}