body { background-color: #F0F5FF;  }

/* header */
.sms-header{
  background-image: url(https://static.igem.wiki/teams/5606/images/banner2-2x.webp);
  background-repeat: no-repeat;
  background-size: 1920px;
  background-position: top center;
  height: 360px;
}
.sms-header-title{
  text-align: center;
}
.sms-header-title-t1{
  font-family: GillSans;
}

/* body */

.sms-body{
  background: #F0F5FF;
  min-height: 100vh;
  padding-top: 45px;
}

.sms-body .anchor-section{
  background: #DEE5FC;
  box-shadow: 8px 8px 0px 0px rgba(117,139,219,0.3);
  border-radius: 16px;
  border: 2px solid #758BDB;
  padding: 24px 32px;
  margin-bottom: 36px;
  color: #1D2129;
}

/** 内容块标题样式 */
.sms-body h2{
  font-family: GillSansMT;
  font-weight: 800;
  font-size: 32px;
  line-height: 40px;
  text-align: left;
  color: #1D4596;
}
/** 内容块段落 */
.sms-body p{
  margin: 27px 0 72px 0;
  font-family: GillSansMT;
  font-size: 24px;
  line-height: 35px;
  text-align: justify;
}

/** 内容块图片样式 */
.sms-body .body-img{
  margin: 0 auto 36px auto;
  text-align: center;
}
.sms-body .body-img img{
  width: 700px;
}
.sms-body .body-img .body-img-title{
  text-align: center;
  font-size: 18px;
}

/* 内容块部分左边导航 */
.sms-anchor{
  position: sticky;
  top: 12px;

  background: #DBE3F4;
  box-shadow: inset 5px 5px 16px 0px rgba(255,255,255,0.18);
  border-radius: 8px;
  border: 1px solid;
  border-image: linear-gradient(335deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) 1 1;
  backdrop-filter: blur(4px);
  
}
.sms-anchor a{
  text-decoration: none;
  color: #1D2129;
  font-size: 20px;
  font-family: GillSansMT;
  line-height: 24px;
  padding: 12px 16px;
}
.sms-anchor a:hover{
  color: #1D4596;
  text-align: left;
  font-style: normal;
}

.sms-anchor .active{
  font-weight: bold;
  font-size: 24px;
  color: #1D4596;
  font-style: normal;
  box-shadow: inset 3px 0px 0px 0px #1D4596;
  background: rgba(98,118,226,0.1);
}




/* back to top */
.backtotop{
  position: fixed;
  bottom: 20px;
  right: calc(50% - 660px - 60px);
  transition: all 0.3s ease-in-out;
  display: none;
}

.backtotop img{
  cursor: pointer;
  width: 50px;
}

/* ihp */
.tip1, .tip2, .tip3, .tip4{
  display: none;
}
.tips{
  width: 100vw;
  z-index: 100;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tips .box{
  opacity: inherit;
  width: 960px;
  min-height: 300px;
  background: #DBE3F4;
  box-shadow: inset 5px 5px 16px 0px rgba(255,255,255,0.18);
  border-radius: 16px;
  border: 1px solid;
  backdrop-filter: blur(4px);
}

.tips .box-title, .tips .box-close{
  margin:17px 0;
  padding: 18px 0;
  font-size: 24px;
}
.tips .box-close{
  color: #1D2129;
  cursor: pointer;
}
.tips .box-body{
  padding: 0px 30px 30px 30px;
  font-family: GillSansMT;
  font-size: 20px;
  color: #1D2129;
  line-height: 30px;
  text-align: left;
  font-style: normal;
  text-align: justify;
}

/* protocol */
.sms-protocol-card{
  padding: 9px 16px;
  border-radius: 9px;
  width: auto;
  min-width: none;
  margin-right: 12px;
  border: 1px solid #5bc0de;
}
.sms-protocol-card a{
  text-decoration: none;
  color: #1D2129;
}

.sms-protocol-card-bg1{
  background-image: linear-gradient(135deg, rgb(201, 231, 239), rgb(67, 217, 217));
}
.sms-protocol-card-bg2{
      background-image: linear-gradient(135deg, rgb(171, 207, 181), rgb(107, 191, 128));
}
.sms-protocol-card-bg3{
  background-image: linear-gradient(135deg, rgb(208, 236, 222), rgb(141, 217, 106));
}
.sms-protocol-card-bg4{
  background-image: linear-gradient(135deg, rgb(220, 246, 207), rgb(182, 217, 54));
}
.sms-protocol-card-bg5{
  background-image: linear-gradient(135deg, rgb(98,118,226), rgb(98,118,226));
}



.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !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: 1.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 */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }