body {
    padding-top: 56px;
}

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


.bg-dark {
    background-color: transparent !important; /* 设置背景颜色为透明 */
    background-image: url('https://static.igem.wiki/teams/5397/footer/foot.png'); /* 替换 'your-background-image.jpg' 为你的背景图片链接 */
    background-size: cover; /* 背景图片覆盖整个元素 */
    background-position: center; /* 背景图片居中显示 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    opacity: 1; /* 设置透明度为不透明 */
}

.bg-hero {
    background-image: linear-gradient(to top, rgba(37, 255, 211, 0) 100%, rgba(207, 183, 236, 0) 0%);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;

}

.bg-light-purple {
    /*background-color: #f3ebdf;*/
    /* background-image: linear-gradient(to top, #9591de 0%, #5c5fc7 100%); */
    background-color: #bec5f5;
}



/* CALLOUT */
.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e6e0ec;
    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: #65c6e4
}

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

#text {
  /*font-family: primary_font;*/
  font-size: 6em;
  line-height: 1em;
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  &:hover {
    cursor: default;
  }

  .wrapper {
    display: inline-block;
    top: -900px;
    position: relative;
    height: 150px; /* default */
    width: 90px; /* default */
    transition: ease 0.3s all;

    span {
      position: absolute;
      top:0;
      right:0;

      transition: ease 0.3s all;

      &.letter-2 {
        color: #dd7575;
      }

      &.letter-1 {
        color: #bb2d3b;
        z-index: 1;

        &:hover {
           top: -3px;
           right: -3px;

           ~ .letter-2 {
             top: 3px;
             right: 3px;
           }
        }
      }

      &.space {
        padding: 0;
        min-width: 30px;
        display: inline-block;
      }
    }
  }
}