* {
  margin: 0;
  padding: 0;
}

.rotate1 {
  transform: rotate(90deg);
  transition: 1s all;
}




@font-face {
  font-family: 'comic';
  src: url('https://static.igem.wiki/teams/4613/wiki/font-family/comic-sans-ms-bold.ttf');
  font-weight: normal;
  font-style: normal;
}


.parallax .section_4 {
  position: sticky;
  top: 0;
}

.parallax .section_4 .scene img {
  width: 8vw;
  position: absolute;
}

.parallax .section_4 .scene li:first-child {
  background-color: rgb(255,250,234);
}

.parallax .section_4 .scene li:first-child p {
  position: absolute;
  top: 45vh;
  color: black;
  font-size: 1.6rem;
  width: 90%;
}

.parallax .section_4 ul li:nth-child(2) img {
  width: 8vw;
}

.parallax .section_4 ul li:nth-child(3) img {
  width: 8vw;
}

.parallax .section_4 .scene {
  width: 100%;
  height: 100%;
}

.parallax .section_4 .scene li:first-child {
  width: 100%;
  height: 100vh;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

#OAT img {
  width: 3vw;
}

.section_4 .scene .inside p {
  opacity: 0;
  text-align: center;
  font-family: 'comic';
}

@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes charcUp {
  0% {
    font-size: 1.6rem !important;
  }

  100% {
    font-size: 1.8rem !important;
  }
}

@keyframes floatdown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

@keyframes floatOTAUp {
  0% {
    opacity: 0;
    /* bottom: 5vh; */
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    /* bottom: 45vh; */
    transform: scale(1);
  }
}

@keyframes floatOTAUp2 {
  0% {
    opacity: 0;
    /* bottom: 5vh; */
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    /* bottom: 45vh; */
    transform: scale(1);
    /* display: none; */
  }
}

@keyframes floatUp3 {
  0% {
    opacity: 0;
    transform: translateY(15vh);
  }

  100% {
    opacity: 1;
    transform: translateY(-110vh);
  }
}

@keyframes floatOTADown {
  0% {
    opacity: 0;
    /* bottom: 45vh; */
    transform: scale(1);
  }

  100% {
    opacity: 0;
    /* bottom: 0vh; */
    transform: scale(0.5);
    display: none;
  }
}

.auto_rise {
  display: flex;
  width: 90%;
  margin: 0 auto;
  justify-content: space-evenly;
  opacity: 0;
}

.auto_rise .left {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.3rem;
  padding-bottom: 1.3rem;
  width: 45%;
  border: 4px solid rgb(177, 159, 208);
  border-radius: 25px;
}

.auto_rise .right {
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1.3rem;
  padding-bottom: 1.3rem;
  width: 45%;
  border: 4px solid rgb(177, 159, 208);
  border-radius: 25px;
}

.auto_rise .middle {
  width: 6%;
  display: flex;
  align-items: center;
}

.auto_rise .middle img {
  width: 100%;
}

.auto_rise p {
  font-size: 1.6rem;
  font-family: 'comic';
}

.auto_rise .left span {
  transition: all 1s;
}

.auto_rise .right span {
  transition: all 1s;
}

.doubt {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.doubt span:first-child {
  font-family: 'comic';
  font-size: 6rem;
  margin-bottom: 50px;
  text-align: center;
}

.doubt span:last-child {
  font-family: 'comic';
  font-size: 1.5rem;
  margin-bottom: 50px;
}

.parallax .section_4 .scene .after img {
  opacity: 0;
}

/* 酒杯碰撞 */
@keyframes collision1 {
  0% {
    transform: rotate(25deg);
  }

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

  100% {
    transform: rotate(25deg);
  }
}

@keyframes collision2 {
  0% {
    transform: rotate(-35deg);
  }

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

  100% {
    transform: rotate(-35deg);
  }
}

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

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.bottle_crush {
  display: flex;
  justify-content: center;
  padding-top: 50px;
  padding-bottom: 50px;
  position: relative;
}

.bottle_crush .right img {
  width: 120px;
  animation: collision1 2s infinite;
}

.bottle_crush .left img {
  width: 145px;
  /* position: absolute; */
  /* transform: translate(-60px, -32px) rotate(-3deg); */
  transform-origin: center;
  animation: collision2 2s infinite;
}

.bottle_crush_container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bottle_crush .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: collision3 1s infinite;
}

.OTAkiller_container {
  display: flex;
  justify-content: center;
  position: sticky;
  top: 45vh;
  /* opacity: 0; */
  z-index: 1;
}

.OTA_container {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.OTA_container .left {
  display: flex;
  flex-direction: column;
}

.OTA_container .right {
  display: flex;
  flex-direction: column;
}

.OTA_container .left img {
  width: 70px;
}

.OTA_container .right img {
  width: 70px;
}

.header {
  position: relative;
  text-align: center;
}

.waves {
  position: relative;
  width: 100%;
  height: 15vh;
  margin-bottom: -7px;
  /*Fix for safari gap*/
  min-height: 100px;
  max-height: 150px;
}

.content {
  position: relative;
  height: 20vh;
  text-align: center;
  background-color: white;
}

.content a {
  margin: 0 5px;
  font-size: 12px;
  color: #333;
}

.content a:hover {
  color: #000;
}

/* Animation */

.parallax>use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.parallax>use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.parallax>use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.parallax>use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.parallax>use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height: 40px;
    min-height: 40px;
  }

  .content {
    height: 30vh;
  }

  h1 {
    font-size: 24px;
  }
}


.OTApara p {
  text-align: center;
  font-family: 'comic';
}

.wordcontainer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 25vh;
  padding-top: 25vh;
  background-color: rgb(255, 250, 234);
}

.bottle_container {
  background-color: rgb(255, 250, 234);
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bottlecrushpara {
  display: flex;
  justify-content: center;
}

.bottlecrushpara p {
  font-size: 2rem;
  font-family: 'comic';
}

.auto_rise_container {
  padding-top: 15vh;
  padding-bottom: 15vh;
  background-color: rgb(255, 250, 234);
}

.doubt_container {
  padding-bottom: 20vh;
  padding-top: 20vh;
  background-color: rgb(255, 250, 234);
}


.map img {
  width: 99vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}

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

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.xxparagraph {
  font-size: 3rem;
  font-family: 'comic';
  position: absolute;
  bottom: 0;
  padding-bottom: 10vh;
  padding-top: 40vh;
}
#OAT img{
  opacity: 0;
}