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

.glass-hero {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  color: #333;
}

/* Background Colors */
.bc-DarkBlue {
  background-color: #2f5f87;
}
.bc-IceBlue {
  background-color: #B7E0E4;
}
.bc-SkyBlue {
  background-color: #336EA7;
}
.bc-Cream {
  background-color: #FAF3DE;
}
.bc-PeachPink {
  background-color: #FED2C0;
}
.bc-FoxDawn{
  background-color: #F47B5E;
}
.bc-Golden {
  background-color: #e5b767;
}
.bc-LilacMist {
  background-color: #F9F8FF;
}
.bc-IvoryDawn {
  background-color: #f7f3e1;
}
.bc-DuskSky {
  background-color: #577db5;
}
.bc-MorningHaze {
  background-color: #ecebe5;
}
.bc-SkyMist {
  background-color: #7ca6cb;
}


/*Colors */
.DarkBlue {
  color: #2f5f87;
}
.IceBlue {
  color: #B7E0E4;
}
.Cream {
  color: #FAF3DE;
}
.PeachPink {
  color: #FED2C0;
}
.SkyBlue {
  color: #336EA7;
}
.DuskSky {
  color: #577db5;
}
.FoxDawn {
  color: #F47B5E;
}
.Golden {
  color: #e5b767;
}
.LilacMist {
  color: #F9F8FF;
}
.IvoryDawn {
  color: #f7f3e1;
}
.MorningHaze {
  color: #7a5556;
}
.ClayRose {
  color: #cc6e6e;
}
.SkyMist {
  color: #7ca6cb;
}
.Midnight {
  color: #1c242b;
}

/*Home Text Sizes */
.text-hero {  /*for hero text */
  font-size: clamp(4rem, 10vw, 10rem);
  font-weight: 700;
  text-shadow: 0px 0px 2px #333;
}
.text-hero-sm {
  font-size: clamp(2.5rem, 6vw, 6rem);
  font-weight: 700;
  text-shadow: 0px 0px 2px #333;
}
.text-xxxl {
  font-size: clamp(2.5rem, 6vw, 6rem); /* 最小 3rem = 54px，最大 6rem = 108px */
  font-weight: 900;
}
.text-xxl {
  /* font-size: 4rem; */
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 900;
}
.text-xl {
  /* font-size: 3.5rem; */
  font-size: clamp(1.8rem, 4.2vw, 3.5rem);
  font-weight: 900;
}
.text-lg {
  /* font-size: 2.6rem; */
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  font-weight: 900;
}
.text-md {
  /* font-size: 1.8rem;  */
  font-size: clamp(1rem, 2.2vw, 2rem);
  font-weight: 600;
}

/*Icons */
.Icon {
  width: 25px;
  height: 25px;
  transition: fill 0.3s ease;
}

.background-Ripped-draw-paper-texture {
  background-image: url('https://static.igem.wiki/teams/5797/pictures/ripped-draw-paper-texture.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px;
}