@font-face {
  font-family: SF-Heavy;
  src: url(https://static.igem.wiki/teams/4628/wiki/fonts/sf-heavy.otf);
}

@font-face {
  font-family: Montserrat-Mid;
  src: url(https://static.igem.wiki/teams/4628/wiki/fonts/montserrat-mid.ttf);
}

@font-face {
  font-family: Montserrat-Ex;
  src: url(https://static.igem.wiki/teams/4628/wiki/fonts/montserrat-ex.ttf);
}

.contain * {
  background-size: contain;
  background-repeat: no-repeat;
}

.contain {
  position: relative;
  width: 100vw;
  min-height: calc(100vh - 90px);
  margin-bottom: 0;
  font-size: min(3vmin, 25px);
  font-family: Montserrat-Reg;
}

#s0,
#s1,
#s2,
#s3,
#s4,
#s5,
#s6,
#s7,
#s8,
#s9 {
  position: relative;
  width: 100vw;
  min-height: calc(100vh - 90px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.contain #s2 {
  margin-top: -20vmin;
}

.contain #s1 .bg {
  position: relative;
  top: -5vmin;
  width: 80vmin;
  height: 50vmin;
  border-radius: 5vmin;
  background-color: var(--mg);
  color: var(--bg);
}

.contain #s1 .bg p {
  position: relative;
  top: 40%;
  left: 5%;
  width: 56vmin;
  height: 25vmin;
  text-align: left;
  line-height: 100%;
  font-size: min(3vmin, 30px);
  font-family: Montserrat-Reg;
  line-height: 1.5em;
}

.contain .shadow {
  position: relative;
  padding: 2px;
  -webkit-text-stroke: 8px transparent;
}

.contain .shadow::after {
  content: attr(data-text);
  display: block;
  position: absolute;
  z-index: 1;
  width: fit-content;
  height: 100%;
  word-wrap: nowrap;
  padding: 2px;
  -webkit-text-stroke: 8px transparent;
}

.contain #s1 .bg p span {
  font-size: 1.5em;
  display: inline-block;
  left: -2px;
  top: 2px;
  font-family: Montserrat-Bold;
  background-color: var(--bg);
  transform: rotate(-3deg);
  transform-origin: left bottom;
}

.contain #s1 .bg p span::after {
  left: 2px;
  top: -2px;
  color: var(--mg);
  background-color: var(--bg);
}

#s1 .greet {
  position: absolute;
  top: -5vmin;
  left: -10vmin;
  width: 50vmin;
  height: 20vmin;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/1-greet.svg);
}

#s1 .l {
  position: absolute;
  bottom: -7vmin;
  left: -10vmin;
  width: 17vmin;
  height: 20vmin;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/1-l.svg);
}

#s1 .r {
  bottom: -10vmin;
  right: -23vmin;
  position: absolute;
  width: 59vmin;
  height: 40vmin;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/1-r.svg);
}

.contain #s2 .bg {
  position: relative;
  top: -5vmin;
  width: 90vmin;
  height: 36vmin;
  border-radius: 5vmin;
  background-color: #f5e1a9;
  color: var(--mg);
  transform-style: preserve-3d;
  padding-top: 2vmin;
}

.contain #s2 .bg::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 5vmin;
  left: -1.5vmin;
  top: 1.5vmin;
  background-color: #f5e1a9;
  transform: translateZ(-10px);
}

.contain #s2 .bg .r1,
.contain #s2 .bg .r2,
.contain #s2 .bg .r3 {
  position: relative;
  left: 8vmin;
  top: 6vmin;
  width: 74vmin;
}

.contain #s2 .bg .r1 {
  display: flex;
  padding-left: 5vmin;
  gap: 6vmin;
}

.contain #s2 .bg .r1 .l {
  font-size: 2.4em;
  display: inline-block;
  left: -4px;
  top: 4px;
  font-family: Montserrat-Bold;
  background-color: #f5e1a9;
  transform: rotate(-5deg);
  color: #f5e1a9;
  transform-origin: left bottom;
}

.contain #s2 .bg .r1 .l::after {
  left: 4px;
  top: -4px;
  width: fit-content;
  height: 100%;
  word-wrap: nowrap;
  color: var(--mg);
  background-color: var(--bg);
}

.contain #s2 .bg .r2 {
  margin-top: 3vmin;
}

.contain #s2 .bg .r3 {
  position: absolute;
  top: calc(100% + 22vmin);
  color: #e46d39;
  text-align: center;
}

.contain #s2 .bg .r2 .red {
  color: #e46d39;
}

.contain #s2 .rbg {
  position: absolute;
  bottom: -18vmin;
  left: 2vmin;
  width: 50vmin;
  height: 25vmin;
  border-radius: 3vmin;
  border: 2vmin solid #f37952;
  background-color: #f5e1a9;
}

.contain #s2 .rbg:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 3vmin;
  left: -.5vmin;
  top: -3.5vmin;
  background-color: #f5e1a9;
  border: 2vmin solid #f5e1a9;
}

.contain #s2 .rbg .l {
  left: 4vmin;
  top: 7vmin;
  font-family: SF-Heavy;
  transform: scaleY(1.4) rotate(-.5deg);
  font-size: 4.5vmin;
  line-height: 4.5vmin;
  transform-origin: left bottom;
  position: absolute;
  z-index: 5;
  color: #ff7549;
}

.contain #s2 .rbg .l::after {
  display: block;
  content: "";
  position: absolute;
  width: 7vmin;
  height: 7vmin;
  top: -1.5vmin;
  right: 1.5vmin;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/2-feather.svg);
  transform: rotate(10deg);
}

.contain #s2 .rbg .r {
  top: 2vmin;
  position: absolute;
  z-index: 6;
  left: 23vmin;
  width: 100px;
  height: 50px;
  font-family: Montserrat-Ex;
}

.contain #s2 .rbg .r .yellow {
  width: fit-content;
  font-size: 5vmin;
  color: #fc997a;
  background-color: #f5e1a9;
  left: 1vmin;
  top: .5vmin;
}

.contain #s2 .rbg .r .yellow::after {
  z-index: 7;
  left: 6px;
  top: -6px;
  color: #f5e1a9;
  background-color: #f5e1a9;
  -webkit-text-stroke: 10px transparent;
}

.contain #s2 .rbg .r .red {
  font-size: 10vmin;
  color: #fc997a;
  background-color: #f5e1a9;
  left: -6px;
  top: -2vmin;
  width: 80vmin;
  -webkit-text-stroke: 15px transparent;
}

.contain #s2 .rbg .r .red::after {
  z-index: 8;
  left: 6px;
  top: -6px;
  color: #9e3636;
  background-color: #f5e1a9;
  -webkit-text-stroke: 15px transparent;
}

.contain #s2 .bg .lt {
  left: -5vmin;
  top: -5vmin;
  position: absolute;
  width: 20vmin;
  height: 20vmin;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/2-lt.svg);
}

.contain #s2 .bg .rb {
  position: absolute;
  width: 24vmin;
  height: 18.5vmin;
  right: 3vmin;
  bottom: -15vmin;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/2-panda.svg);
}

.contain #s2 .bg .rb .sign {
  position: absolute;
  width: 3vmin;
  height: 3vmin;
  bottom: 0;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/2-sign.svg);
}

.contain #s2 .bg .arrow {
  top: 5vmin;
  right: -10vmin;
  position: absolute;
  z-index: 10;
  width: 16vmin;
  height: 9.6vmin;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/2-decline.svg);
}

#s3 {
  flex-direction: column;
}

#s3 .bot,
#s3 .top {
  width: 96vmin;
  padding: 5vmin;
  position: relative;
}

#s3 .top {
  padding-bottom: 8vmin;
  color: #6d966b;
  text-align: center;
}

#s3 .top::after,
#s3 .top::before {
  display: block;
  content: "";
  position: absolute;
}

#s3 .top::before {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1vmin;
  background-color: #6d966b;
  transform: translateY(-50%);
  border-radius: .5vmin;
}

#s3 .top::after {
  width: 5vmin;
  height: 5vmin;
  bottom: -1.5vmin;
  left: 50%;
  transform: translateX(-50%);
  background-size: contain;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/3-glassicon.svg);
}

#s3 .bot {
  display: flex;
  justify-content: space-between;
}

#s3 .bot .card {
  display: flex;
  flex-direction: column;
  gap: 3vmin;
}

#s3 .bot .card .img {
  position: relative;
  border: .5vmin solid #6d966b;
  box-shadow: 0 1vmin 0 #f5e1a9;
  width: 25vmin;
  height: 30.5vmin;
  border-radius: 2.4vmin;
  overflow: hidden;
}

#s3 .bot .card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#s3 .bot .card .img img.bad {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 1s;
  pointer-events: none;
}

#s3 .bot .card .img img.good:hover ~ .bad {
  opacity: 1;
}

#s3 .bot .card .tag {
  width: 100%;
  text-align: center;
  font-family: Montserrat-Mid;
  color: #f37952;
  font-size: min(3vmin, 30px);
}

#s3 .cursor {
  position: fixed;
  z-index: 1000;
  top: 40px;
  left: 40px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 5px solid var(--mg);
  opacity: 0;
  transition: 1s;
  background-color: rgba(0, 0, 0, .3);
  pointer-events: none;
}

#s3 .cursor::after {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 100px;
  top: 136.5px;
  top: 47px;
  left: 90px;
  transform-origin: center;
  transform: rotate(135deg);
  background-color: var(--mg);
  border-radius: 5px;
}

#s3:hover .cursor {
  opacity: 1;
}

#s4 {
  flex-direction: column;
  gap: 15vmin;
}

#s4 .bot,
#s4 .top {
  width: 96vmin;
  position: relative;
}

#s4 .top {
  padding: 2vmin 8vmin;
  background-color: #f5e1a9;
  color: #f1fff0;
  text-align: center;
  border-radius: 20vmin;
  box-shadow: 0 1vmin #a4c3a2;
}

#s4 .bot {
  display: flex;
}

#s4 .bot .l {
  flex: 4;
  position: relative;
  display: flex;
  justify-content: flex-end;
}

#s4 .bot .l .bk {
  position: relative;
  width: 60%;
  aspect-ratio: 1.25;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/4-bkb.svg);
}

#s4 .bot .l .title {
  position: absolute;
  left: 0;
  top: -2vmin;
  font-family: Montserrat-Semi;
  font-size: 1.5em;
}

#s4 .bot .l .title .shadow {
  margin-bottom: -2vmin;
  color: #6d966b;
  background-color: #f5e1a9;
}

#s4 .bot .l .title .shadow::after {
  z-index: 1;
  top: -4px;
  left: 4px;
  color: #f5e1a9;
  background-color: #fff9ea;
}

#s4 .bot .l .ft {
  position: absolute;
  z-index: 3;
  width: 24%;
  aspect-ratio: .8;
  bottom: 3%;
  right: 47%;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/4-ftb.svg);
}

#s4 .bot .l .head {
  position: absolute;
  z-index: 1;
  width: 20%;
  aspect-ratio: 1;
  left: 0;
  bottom: 0;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/4-ll.svg);
}

#s4 .bot .r {
  flex: 3;
  display: flex;
  position: relative;
  align-items: end;
}

#s4 .bot .r::after {
  display: block;
  content: "";
  width: 20%;
  right: 0;
  bottom: 0;
  aspect-ratio: 1.1;
  transform: translateX(40%) translateZ(-10px);
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/4-rr.svg);
}

#s4 .bot .r .drop {
  position: absolute;
}

#s4 .bot .r .d1 {
  width: 80%;
  aspect-ratio: 1.5;
  bottom: 60%;
  left: -5%;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/4-b1.svg);
}

#s4 .bot .r .d2 {
  width: 80%;
  aspect-ratio: 1.7;
  bottom: 35%;
  right: -10%;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/4-b2.svg);
}

#s4 .bot .r .d3 {
  width: 70%;
  aspect-ratio: 1.4;
  bottom: 5%;
  left: 0;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/4-b3.svg);
}

#s4 .drop {
  filter: brightness(1);
  transition: .6s;
  transform: scale(1);
  transform-origin: center;
}

#s4 .bot .r:hover .drop {
  filter: brightness(.6);
}

#s4 .drop:hover + .pop {
  opacity: 1;
  transform: translateX(0);
}

#s4 .r > .drop:hover {
  filter: brightness(1) !important;
  transform: scale(1.02);
}

#s4 .pop {
  font-size: .6em;
  line-height: 1.5em;
  width: fit-content;
  max-width: min(30vw, 400px);
  position: fixed;
  z-index: 1000;
  top: 100px;
  right: 0;
  background-color: #f5e1a9;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(60, 60, 60, .03);
  overflow: hidden;
  opacity: 0;
  transform: translateX(100%);
  transition: .6s;
}

#s4 .pop::before {
  display: block;
  content: "";
  position: absolute;
  width: .6em;
  height: 100%;
  background-color: #f5e1a9;
  left: 0;
  top: 0;
  z-index: 1001;
}

#s7 {
  padding: 0 max(calc(50vw - 55vmin), 100px);
  gap: 10px;
  flex-wrap: wrap;
}

#s7 .l,
#s7 .r1,
#s7 .r2 {
  min-width: 280px;
  max-width: 400px;
  aspect-ratio: .8;
}

#s7 .l {
  min-width: 300px;
  color: #6d966b;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#s7 .l b {
  font-family: Montserrat-Bold;
}

#s7 .l .top {
  font-family: Montserrat-Bold;
  font-size: 2.5em;
}

#s7 .l .bot {
  font-size: .8em;
  position: relative;
  padding-left: 5vmin;
}

#s7 .l .bot::before {
  display: block;
  content: "";
  position: absolute;
  height: 100%;
  aspect-ratio: 1;
  background-size: contain;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/7-leaf.svg);
  left: 0;
  top: 0;
  transform: translateX(-50%);
}

#s7 .r1,
#s7 .r2 {
  position: relative;
  flex: 1;
}

#s7 .pop {
  position: absolute;
  width: max(50%, 70px);
  height: auto;
  animation: float 6s ease infinite;
  animation-delay: calc(var(--i) * .4s);
}

#s7 .pop img {
  width: 100%;
  object-fit: contain;
}

#s7 .pop img.highlight {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .6s;
}

#s7 .pop:hover img.highlight {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}

#s7 .r1 .p1 {
  top: 35%;
}

#s7 .r1 .p2 {
  right: 0;
}

#s7 .r1 .p3 {
  bottom: 0;
  right: -1vmin;
}

#s7 .r2 .p1 {
  top: 25%;
}

#s7 .r2 .p2 {
  right: 0;
  top: 5%;
}

#s7 .r2 .p3 {
  bottom: 0;
  right: 3%;
}

@keyframes float {
  0%,
  100%,
  50% {
    transform: translateY(0);
  }

  25% {
    transform: translateY(3%);
  }

  50% {
    transform: translateY(-3%);
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

#s7 .l .top b {
  opacity: 0;
  animation: blink 3s linear infinite;
  animation-delay: calc(var(--i) * .3s);
}

#s8 {
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/home/8-bk.svg);
  background-size: contain;
  background-position: bottom;
  align-items: start;
  padding-top: 10%;
}

#s8 .txt-wrap {
  z-index: -1;
  width: 90vmin;
  aspect-ratio: 2.5;
  color: #4e894b;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vmin;
  justify-content: center;
  background-size: contain;
  background-position: center;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/home/8-cloud.svg);
}

#s8 .txt-wrap p {
  display: block;
  width: 98vmin;
  text-align: center;
  position: relative;
}

#s8 .txt-wrap .p1::before,
#s8 .txt-wrap .p2::before {
  display: block;
  position: absolute;
  color: #ffba57;
  font-family: Montserrat-Mid;
  font-size: 6em;
}

#s8 .txt-wrap .p1::before {
  content: '“';
  top: 0;
  left: 0;
  transform: translate(-110%, -25%);
}

#s8 .txt-wrap .p2::before {
  content: '”';
  bottom: 0;
  right: 0;
  transform: translate(100%, 75%);
}

#s8 .panda {
  position: absolute;
  bottom: 0;
  width: max(25vmin, 150px);
  aspect-ratio: .9;
  transform: translateX(-50%);
  left: 55%;
  bottom: 6%;
  background-size: contain;
  background-position: bottom;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/home/8-panda.svg);
  animation: bounce 2s infinite ease-in;
}

#s8 .p-shadow {
  position: absolute;
  background-color: #c99953;
  width: max(16vmin, 120px);
  aspect-ratio: 10;
  border-radius: 50%;
  left: 55%;
  bottom: 3%;
  transform: translateX(-50%);
  animation: shadow 2s infinite ease-in;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0) translateX(-50%);
  }

  50% {
    transform: translateY(-10%) translateX(-50%);
  }
}

@keyframes shadow {
  0%,
  100% {
    transform: scale(1) translateX(-50%);
    opacity: 1;
  }

  50% {
    transform: scale(.8) translateX(-50%);
    opacity: .8;
  }
}

#s9 {
  background-color: #f5e1a9;
  background-size: contain;
  background-position: center;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/9-bg.svg);
}

#s9 .border {
  position: relative;
  width: 70%;
  max-width: 950px;
  aspect-ratio: 1.78;
  background-color: #f5e1a9;
  border: 10px solid #ffebcf;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#s9 .title {
  top: 0;
  right: 5%;
  transform: translateY(-85%);
  font-family: Montserrat-Semi;
  font-size: 2em;
  position: absolute;
  color: #6d966b;
  background-color: #f5e1a9;
  padding: 10px;
  -webkit-text-stroke: 15px transparent;
}

#s9 .title::after {
  top: -6px;
  left: 6px;
  background-color: #f5e1a9;
  color: #ffc470;
  padding: 10px;
  -webkit-text-stroke: 15px transparent;
}

#s0 {
  transform: translateY(-10%);
  background-size: contain;
  background-position: center;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/0-bg.svg);
}

#s0 .intro {
  position: relative;
  width: 80%;
  max-width: 950px;
}

#s0 .intro img {
  width: 100%;
  object-fit: contain;
}

#s0 .color {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 2s;
}

#s0.fin .color {
  opacity: 1;
}

#s0 .go {
  position: absolute;
  bottom: -20px;
  font-family: Nunito-Bold;
  color: #6d966b;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  animation: go 4s linear infinite;
}

@keyframes go {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

#s0 .go .btn {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #f5e1a9;
  display: flex;
  justify-content: center;
  align-items: center;
}

#s0 .go .btn .line {
  position: relative;
  height: 40%;
  width: 3px;
  background-color: var(--bg);
  border-radius: 1.5px;
  transition: .6s;
}

#s0 .go .btn .line::after,
#s0 .go .btn .line::before {
  transition: .6s;
  display: block;
  content: "";
  position: absolute;
  height: 100%;
  width: 3px;
  border-radius: 1.5px;
  background-color: var(--bg);
  transform-origin: bottom;
  bottom: 0;
}

#s0 .go .btn .line::before {
  transform: rotate(-45deg);
}

#s0 .go .btn .line::after {
  transform: rotate(45deg);
}

#s0 .go .btn:hover .line,
#s0 .go .btn:hover .line::after,
#s0 .go .btn:hover .line::before {
  background-color: var(--y);
}

.bg-wrap {
  width: 100vw;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/7-bg.svg);
  background-position: center;
  background-attachment: fixed;
}

#s6 .bg {
  transform-style: preserve-3d;
  position: relative;
  font-size: .8em;
  color: #fff;
  width: 90vmin;
  aspect-ratio: 2.3;
  background-color: #f5e1a9;
  padding: 0 5%;
  padding-bottom: min(10%, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5em;
  border-radius: 20px;
  box-shadow: 10px -4px 0 #a3c394;
}

#s6 .bg p {
  text-indent: 1.5em;
  text-align: left;
}

#s6 .bg p .yellow {
  font-family: Montserrat-Semi;
  color: #f5e1a9;
}

#s6 .ft {
  line-height: 1.5em;
  text-indent: 1.5em;
  left: 15%;
  top: 80%;
  position: absolute;
  width: 60%;
  aspect-ratio: 3;
  background-color: var(--bg);
  color: #6d966b;
  font-size: .8em;
  padding: 30px 40px;
  border-radius: 20px;
  box-shadow: 6px 8px 0 #a3c394;
  display: flex;
  justify-content: center;
  align-items: center;
}

#s6 .panda {
  left: -10%;
  top: 80%;
  position: absolute;
  width: 30%;
  aspect-ratio: 1.2;
  background-size: contain;
  background-position: top;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/6-panda.svg);
}

#s6 .circle {
  top: 0;
  left: 50%;
  transform: translate(-50%, -35%) translateZ(-10px);
  position: absolute;
  width: 60%;
  aspect-ratio: 1.2;
  background-size: contain;
  background-position: top;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/6-circle.svg);
}

#s6 .title {
  position: absolute;
  top: -5em;
  left: 45%;
  transform: translateX(-50%);
}

#s6 .title p {
  font-size: 3em;
  font-family: Titan;
  color: var(--mg);
  background-color: var(--mg);
}

#s6 .title p::after {
  top: -4px;
  left: 4px;
  color: var(--mg);
  background-color: var(--bg);
}

#s6 .title p.indent {
  margin-top: -.3em;
  left: .6em;
}

#s6 .btn {
  right: min(3%, 20px);
  bottom: 0;
  transform: translateY(50%);
  position: absolute;
  background-color: var(--bg);
  border: 4px solid var(--mg);
  padding: .4em .6em;
  box-shadow: 4px 6px 0 var(--y);
  border-radius: 10px;
}

#s6 .btn i {
  position: relative;
  display: block;
  width: .6em;
  height: 4px;
  border-radius: 2px;
  position: relative;
  background-color: var(--mg);
}

#s6 .btn i::after,
#s6 .btn i::before {
  right: 0;
  bottom: 0;
  display: block;
  content: "";
  position: absolute;
  height: 4px;
  width: 70%;
  border-radius: 2px;
  background-color: var(--mg);
  transform-origin: right;
}

#s6 .btn i::before {
  transform: rotate(45deg);
}

#s6 .btn i::after {
  transform: rotate(-45deg);
}

#s6 .btn a {
  text-decoration: none;
  color: var(--mg);
  font-family: Nunito-Bold;
  font-size: 1.2em;
  display: flex;
  align-items: center;
  gap: 10px;
}

#s9 .border iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}

#s5 .wrap {
  width: 90vmin;
  height: 54vmin;
  padding: 0;
  margin: 0;
  position: relative;
  display: flex;
  gap: max(20px, 5%);
}

#s5 .wrap .l,
#s5 .wrap .r {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: justify;
  line-height: 1em;
}

#s5 .wrap .r {
  padding: 5% 0;
}

#s5 .wrap .txt {
  color: var(--mg);
  font-size: .6em;
  text-indent: 1.5em;
  padding: .8em;
  text-align: left;
}

#s5 .wrap .txt b {
  font-family: Montserrat-Bold;
}

#s5 .wrap .title {
  position: relative;
  height: 40%;
  width: 100%;
  background-size: contain;
}

#s5 .wrap .l .title {
  transform: translate(10%, -10%);
  background-position: top;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/5-bio.svg);
}

#s5 .wrap .r .title {
  transform: translate(-10%, 5%);
  background-position: bottom;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/5-zju.svg);
}

#s5 .wrap .title .pic {
  position: absolute;
  width: 65%;
  aspect-ratio: 1.6;
  border: 6px solid var(--y);
  border-radius: 20px;
  background-color: #fff;
  background-size: cover;
  background-position: center;
}

#s5 .wrap .title .pic::before {
  content: "";
  display: block;
  position: absolute;
  width: 20%;
  bottom: 0;
  aspect-ratio: .5;
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
  transform-origin: bottom;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/5-feather.svg);
}

#s5 .wrap .l .title .pic {
  top: 65%;
  left: 0;
  transform: translateX(-20%);
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/5-biopic.png);
}

#s5 .wrap .l .title .pic::before {
  left: 0;
  transform: rotate(-7deg) translateX(-50%);
}

#s5 .wrap .r .title .pic::before {
  right: 0;
  transform: rotateY(180deg) translateX(-50%) rotateX(7deg);
}

#s5 .wrap .r .title .pic {
  bottom: 50%;
  right: 0;
  transform: translateX(20%);
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/5-zjupic.png);
}

#s5 .flora {
  position: absolute;
  top: 40%;
  left: 50%;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(-8deg);
  width: 65%;
  aspect-ratio: 3;
  background-size: contain;
  background-position: bottom;
  background-image: url(https://static.igem.wiki/teams/4628/wiki/home/2l-flora.png);
}

#s5 .wrap {
  transform-origin: center;
  transform: scale(1.2);
}

#s7 .bot {
  position: relative;
  height: 2em;
}

#s7 .op {
  width: fit-content;
  font-family: Nunito-Bold;
  opacity: 0;
  position: absolute;
  top: calc(50% + .5em);
  left: 5vmin;
  transition: 1s;
}

#s7 .op.show {
  opacity: 1;
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, .75, 1);
    transform: scale3d(1.25, .75, 1);
  }

  40% {
    -webkit-transform: scale3d(.75, 1.25, 1);
    transform: scale3d(.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, .85, 1);
    transform: scale3d(1.15, .85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    opacity: 1;
  }
}

@keyframes bounceInDown {
  60%,
  75%,
  90%,
  from,
  to {
    -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(.9);
    transform: translate3d(0, 25px, 0) scaleY(.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(.95);
    transform: translate3d(0, -10px, 0) scaleY(.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(.985);
    transform: translate3d(0, 5px, 0) scaleY(.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(.1) rotate(30deg);
    transform: scale(.1) rotate(30deg);
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

#s0 .medal {
  top: 30%;
  width: 100vw;
  display: flex;
  justify-content: center;
  position: absolute;
}

#s0 #star {
  position: relative;
  right: 0;
  top: 0;
  transform: translate(35%, -35%) rotate(15deg);
  position: absolute;
  z-index: 999;
  cursor: pointer;
  transition: transform 1s;
}

#s0 #star::before {
  content: "Click Me !";
  display: block;
  position: absolute;
  top: -20px;
  left: calc(50% - 25px);
  white-space: nowrap;
  color: #6d966b;
  font-family: Montserrat-Semi;
  font-size: 12px;
  opacity: 0;
  transform-origin: center bottom;
}

#s0 #star:hover::before {
  animation: jackInTheBox 1s forwards;
}

#s0 .contain.active #star {
  transform: translate(35%, -35%) rotate(0);
}

#s0 .contain.active #star:hover::before {
  animation: none;
}

#s0 #star img {
  width: min(130px, max(15vw, 110px));
  object-fit: contain;
}

#s0 .contain.active #star img {
  animation: rubberBand 1s;
}

#s0 .medal .contain {
  position: relative;
  width: 80vw;
  max-width: 860px;
  height: fit-content;
}

#s0 .medal .contain.active .card {
  animation: flipInX 1s 1s forwards;
  pointer-events: all;
}

#s0 .medal .contain.active .card .scene .tag {
  animation: bounceInDown 1s calc(var(--delay) * .4s + 1.4s) forwards;
}

#s0 .medal .contain.active .card #scene .tag {
  animation: none;
}

#s0 .medal .contain .card {
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  border: #b9d9ac 5px solid;
  height: 200px;
  background-color: #f5e1a9;
  box-shadow: 2px 6px 0 #b9d9ac;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 155px 0;
  pointer-events: none;
}

#s0 .medal .contain .card .bg {
  background-color: #f5e1a9;
  width: 100%;
  height: 90px;
  position: absolute;
  top: 50%;
  transform: translateY(-45px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
}

#s0 .medal .contain .card .bg::after,
#s0 .medal .contain .card .bg::before {
  content: "AWARDS";
  display: block;
  color: #fff9ea;
  font-size: 40px;
  font-family: Montserrat-Black;
  letter-spacing: .3px;
}

#s0 .medal .contain .card .scene {
  top: calc(50% - 55px);
  left: calc(50% - 55px);
  position: absolute;
  width: 110px;
  height: 110px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#s0 .medal .contain .card #scene {
  opacity: 0;
}

#s0 .medal .contain .card #scene.show {
  opacity: 1;
}

#s0 .medal .contain .card .scene .tag {
  position: absolute;
  width: 110px;
  height: 110px;
  opacity: 0;
}

#s0 .medal .contain.active .card .scene.hide .tag {
  animation: hide .01s;
}

@keyframes hide {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

#s0 .medal .contain .card #scene .tag {
  opacity: 1;
}

#s0 .medal .contain .card .scene .badge {
  position: relative;
}

#s0 .medal .contain .card .scene .badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#s0 .medal .contain .card .scene .badge.large {
  width: 110px;
  height: 110px;
  top: -40px;
}

#s0 .medal .contain .card .scene .badge.mid {
  width: 80px;
  height: 80px;
  top: -15px;
}

#s0 .medal .contain .card .scene .badge.small {
  width: 70px;
  height: 70px;
  top: 60px;
}

#s0 .medal .contain .card .scene .badge.l {
  right: var(--off);
}

#s0 .medal .contain .card .scene .badge.r {
  left: var(--off);
}

#s0 .medal .contain .card .scene .badge.mid.m {
  top: 55px;
  left: 18px;
}

#s0 .medal .contain .card .scene .label {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-style: italic;
}

#s0 .medal .contain .card .scene .label.orange {
  font-family: Montserrat-Bold;
  color: #fff9ea;
  background-color: #f5e1a9;
  border-radius: 23px;
  box-shadow: #6d966b 2px 4px;
  font-size: 18px;
  word-wrap: nowrap;
  white-space: nowrap;
  padding: 2px 15px;
  top: -57px;
}

#s0 .medal .contain .card .scene .label.stroke {
  color: #6d966b;
  font-family: Montserrat-Bold;
  font-size: 18px;
  padding: 2px;
  word-wrap: nowrap;
  white-space: nowrap;
  top: 53px;
}

#s0 .medal .contain .card .scene .label.thin {
  color: #6d966b;
  font-family: Montserrat-Semi;
  font-size: 16px;
  top: 105px;
}

#s0 .medal .contain .card .scene .label.thin span:last-of-type {
  font-family: Montserrat-Reg;
  font-size: 12px;
}

#s0 .medal .contain .card .scene .label span {
  display: block;
  word-wrap: nowrap;
  white-space: nowrap;
}

#s0 .medal .contain .card .close {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 4px solid #b9d9ac;
  background-color: #f5e1a9;
  position: absolute;
  cursor: pointer;
  transition: .6s;
  z-index: 1000;
  top: 20px;
  left: 20px;
  cursor: pointer;
}

#s0 .medal .contain .card .close:hover {
  transform: rotate(90deg);
}

#s0 .medal .contain .card .close::after,
#s0 .medal .contain .card .close::before {
  content: "";
  display: block;
  position: absolute;
  width: 3px;
  height: 70%;
  background-color: #f5e1a9;
  border-radius: 1.5px;
  transform-origin: center;
  left: 45%;
  top: 15%;
}

#s0 .medal .contain .card .close::before {
  transform: rotate(45deg);
}

#s0 .medal .contain .card .close::after {
  transform: rotate(-45deg);
}