* {
  padding: 0;
  margin: 0;
}
a {
  word-break: break-all;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  z-index: 1000;
}
::-webkit-scrollbar-thumb {
  border-radius: 1em;
  /* background-color: rgb(137, 136, 136); */
  background-color: #fff4c6;
}
::-webkit-scrollbar-track {
  border-radius: 1em;
  background-color: rgb(85, 85, 85);
}
@font-face {
  font-family: Kalam;
  src: url('https://static.igem.wiki/teams/4307/wiki/wikigeneralfiles/kalam/kalam-regular.ttf');
}
@font-face {
  font-family: Montserrat-Bold;
  src: url('https://static.igem.wiki/teams/4307/wiki/wikigeneralfiles/montserrat/montserrat-bold.ttf');
}

.progress {
  position: fixed;
  left: 0;
  top: 0;
  height: 10px;
  width: 100vw;
  z-index: 99;
  background-color: #accaff;
}
.progressBackground {
  position: fixed;
  left: 0;
  top: 0;
  height: 10px;
  width: 100vw;
  z-index: 98;
  background-color: #111419;
}

nav > div#topName {
  height: 10vh;
  width: 11vw;
  display: flex;
  font-family: 'Kalam', cursive;
  line-height: 20px;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 2px;
  left: 155px;
  font-size: 20px;
  font-weight: bold;
}
.topNav a {
  text-decoration: none;
  color: #fff;
  font-size: 15pt;
}
.topNav > #topNavUl {
  align-self: flex-end;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  list-style: none;
  margin-right: 5vw;
}
.topNav > #topNavUl > li {
  width: 10vw;
  position: relative;
  z-index: 0;
}

#navHome:hover ~ .navTitleBack {
  opacity: 0.8;
}
.navTitle,
#navHome {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 13pt;
  height: 10vh;
  width: 100%;
  position: absolute;
  z-index: 20;
}
.navTitleBack {
  height: 10vh;
  width: 10vw;
  background-color: #accaff;
  opacity: 0;
  z-index: 15;
  position: absolute;
  top: 0;
  left: 0;
}
input.navCheck {
  display: none;
  position: absolute;
}
input.navCheck:checked ~ .secondNavul {
  -webkit-transform: scaleY(100%);
  transform: scaleY(100%);
}
input.navCheck:checked ~ .navTitleBack {
  opacity: 0.8;
}
label.forNavCheck:hover ~ .navTitleBack {
  opacity: 0.8;
}

.secondNavul {
  list-style: none;
  position: absolute;
  top: 13vh;
  min-width: 14vw;
  width: max-content;
  overflow: hidden;
  background-color: #fff;
  padding-top: 10px;
  border-radius: 5%;
  box-shadow: 0 0 10px #accaff;
  -webkit-transform: scaleY(0%);
  transform: scaleY(0%);
  -webkit-transform-origin: top;
  transform-origin: top;
  transition: all 0.2s ease-in-out;
}
#widenUl,
#widenUl2,
#widenLi,
#widenLi2,
#widenLi3,
#widenA,
#widenA2,
#widenA3 {
  width: 15vw;
}
.secondNavLi {
  display: flex;
  align-items: center;
  min-width: 14vw;
  width: max-content;
  min-height: 6vh;
  height: fit-content;
}
.secondNavLi a {
  color: #303030;
  font-size: 12pt;
  word-break: normal;
  min-width: 14vw;
  width: max-content;
  padding-left: 10%;
  padding-right: 10%;
  overflow: hidden;
}
.secondNavLi a:hover {
  color: #accaff;
  font-size: 13pt;
}
#navStretch {
  display: none;
}
#checkNavStretch {
  display: none;
}

/* loading animation*/
/* head animation*/
@keyframes head {
  25% {
    transform: translateY(-2px) translateX(-2px);
  }
  50% {
    transform: translateY(-0px) translateX(0);
  }
  75% {
    transform: translateY(-2px) translateX(2px);
  }
}

/* eye animation */
@keyframes eyeAni {
  0% {
    transform: scaleY(1);
  }
  10% {
    transform: scaleY(0);
  }
  20% {
    transform: scaleY(1);
  }
}

/* tile animation */
@keyframes tileShake {
  0%,
  100% {
    transform: perspective(15em) rotateY(15deg);
  }
  50% {
    transform: perspective(15em) rotateY(15deg) rotate(15deg);
  }
}

/* body animation */
@keyframes bodyUpDown {
  25% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-10px);
  }
}

/* arm animation*/
@keyframes rootArm1 {
  0% {
    transform: translateY(20px) rotate(60deg);
  }
  100% {
    transform: translateY(20px) rotate(-60deg);
  }
}

/* arm animation*/
@keyframes rootArm2 {
  0% {
    transform: translateY(20px) rotate(-60deg);
  }
  100% {
    transform: translateY(20px) rotate(60deg);
  }
}

/* arm animation*/
@keyframes subArm1 {
  0% {
    transform: rotate(120deg);
  }
  100% {
    transform: rotate(60deg);
  }
}

/* arm animation*/
@keyframes subArm2 {
  0% {
    transform: rotate(60deg);
  }
  100% {
    transform: rotate(120deg);
  }
}

/* leg animation */
@keyframes rootLegWalk1 {
  0% {
    transform: rotate(25deg);
  }
  25% {
    transform: rotate(-40deg);
  }
  50% {
    transform: rotate(-30deg);
  }
  75% {
    transform: rotate(50deg);
  }
  100% {
    transform: rotate(25deg);
  }
}

/* leg animation */
@keyframes subLegWalk1 {
  0% {
    transform: rotate(-5deg);
  }
  25% {
    transform: rotate(3deg);
  }
  50% {
    transform: rotate(-85deg);
  }
  75% {
    transform: rotate(-95deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

/* leg animation */
@keyframes rootLegWalk2 {
  0% {
    transform: rotate(-25deg);
  }
  25% {
    transform: rotate(70deg);
  }
  50% {
    transform: rotate(25deg);
  }
  75% {
    transform: rotate(-40deg);
  }
  100% {
    transform: rotate(-25deg);
  }
}
/* leg animation */
@keyframes subLegWalk2 {
  0% {
    transform: rotate(-85deg);
  }
  25% {
    transform: rotate(-95deg);
  }
  50% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(-85deg);
  }
}
.spinner {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #eaeef0;
  z-index: 1000;
  box-sizing: content-box;
}

.textLoading {
  position: absolute;
  top: 60%;
  width: 400px;
  font-size: 1.7rem;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.textLoading > span {
  transform: translateX(15px);
  opacity: 0.4;
  animation: loadingText 3.2s linear infinite;
  animation-delay: calc(var(--delayLoading) * 1);
}

@keyframes loadingText {
  0% {
    opacity: 0.4;
  }
  6% {
    opacity: 0.15;
  }
  12% {
    opacity: 0.4;
  }
}

.spermieBody {
  width: 10px;
  height: 90px;
  position: relative;
  top: -10%;
  background-color: #000;
  border-radius: 6px;
  rotate: -5deg;
  animation: bodyUpDown 1s linear infinite alternate-reverse;
  scale: 0.6;
  z-index: 1003;
  box-sizing: content-box;
}

.eye {
  width: 10px;
  height: 15px;
  position: absolute;
  left: 5px;
  top: 30%;
  border-radius: 5px;
  background-color: #6c98e7;
  transform-origin: bottom;
  animation: eyeAni 2s linear infinite;
}

.head {
  width: 70px;
  height: 70px;
  position: absolute;
  border: solid 10px;
  background-color: #eaeef0;
  margin-left: -40px;
  transform-origin: center bottom;
  margin-top: -85px;
  border-radius: 50%;
  animation: head 1s infinite alternate-reverse;
  z-index: 1010;
  box-sizing: content-box;
}

.tileLine {
  fill: none;
  stroke: #000;
  stroke-width: 15px;
}
@keyframes waveSperm {
  0% {
    left: -80px;
  }
  100% {
    left: 0;
  }
}
.spermTile {
  position: absolute;
  top: -50px;
  left: 10px;
  width: 100px;
  height: 30px;
  overflow-x: hidden;
  overflow-y: clip;
  display: block;
  transform: scale(1.2) rotate(10deg);
}

.spermTile svg {
  position: absolute;
  left: -150px;
  top: -100%;
  width: 200px;
  height: 100px;
  animation: waveSperm 2s linear infinite;
}

.arm1,
.arm2,
.arm11,
.arm22,
.leg1,
.leg2,
.leg11,
.leg22 {
  width: 10px;
  border-radius: 5px;
  background-color: #000;
}

.arm1 {
  height: 80px;
  position: absolute;
  top: -10%;
  transform-origin: center top;
  animation: rootArm1 0.4s infinite linear alternate-reverse;
}

.arm11 {
  height: 90%;
  top: 95%;
  position: absolute;
  transform-origin: center top;
  animation: subArm1 0.4s infinite linear alternate-reverse;
}

.arm2 {
  height: 80px;
  position: absolute;
  transform-origin: center top;
  top: -10%;
  transform: translateY(20px) rotate(30deg);
  animation: rootArm2 0.4s infinite linear alternate-reverse;
  opacity: 0.5;
  z-index: 1001;
}

.arm22 {
  height: 90%;
  top: 95%;
  position: absolute;
  transform-origin: center top;
  animation: subArm2 0.4s infinite linear alternate-reverse;
}

.leg1 {
  height: 90%;
  position: absolute;
  top: 90%;
  left: 0%;
  transform-origin: center top;
  animation: rootLegWalk1 0.8s infinite linear;
  opacity: 0.5;
  z-index: 1001;
}

.leg11 {
  height: 95%;
  position: absolute;
  top: 95%;
  transform-origin: center top;
  animation: subLegWalk1 0.8s infinite linear;
}

.leg2 {
  height: 90%;
  position: absolute;
  top: 90%;
  left: 0%;
  transform-origin: top center;
  animation: rootLegWalk2 0.8s infinite linear;
}

.leg22 {
  height: 95%;
  position: absolute;
  top: 95%;
  transform-origin: top center;
  animation: subLegWalk2 0.8s infinite linear;
}

@media screen and (max-width: 900px) {
  #widenUl,
  #widenUl2,
  #widenLi,
  #widenLi2,
  #widenLi3,
  #widenA,
  #widenA2,
  #widenA3 {
    width: 100vw;
    text-align: center;
  }
  #navStretch {
    height: 5vh;
    width: 5vh;
    position: relative;
    right: -80vw;
    top: 3vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  }
  .navLine {
    height: 5px;
    width: 5vh;
    background-color: #fff;
    position: absolute;
    border-radius: 2px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
      opacity 0.55s ease;
  }
  .navLine:nth-of-type(1) {
    top: 1vh;
    transform-origin: 0% 0%;
  }
  .navLine:nth-of-type(2) {
    position: static;
    transform-origin: 0% 100%;
  }
  .navLine:nth-of-type(3) {
    bottom: 1vh;
  }
  #checkNavStretch:checked + label .navLine {
    opacity: 1;
    transform: rotate(45deg);
  }
  #checkNavStretch:checked + label .navLine:nth-of-type(2) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  #checkNavStretch:checked + label .navLine:nth-of-type(3) {
    transform: rotate(-45deg) translate(-0.3vh, -1.2vh);
  }
  #checkNavStretch:checked + label #navStretch {
    transform: translateY(-0.5vh);
  }
  #checkNavStretch:checked ~ #topNavUl {
    transform: scaleY(1);
  }
  #topNavUl {
    height: auto;
    position: absolute;
    top: 11vh;
    left: 0;
    width: 100vw;
    background-color: #303030;
    transform: scaleY(0);
    display: block !important;
    transform-origin: top;
    transition: all 0.5s ease;
  }
  .topNavLi {
    height: auto;
    text-align: center;
    width: 100vw !important;
    border-bottom: 1px solid #eee;
  }
  #navHome {
    display: block;
  }
  .navTitle,
  #navHome {
    position: static;
    height: 5vh;
    width: 100vw;
    font-size: 16pt;
    padding-top: 3vh;
  }
  .navTitleBack {
    display: none;
  }
  .secondNavul {
    position: static;
    width: 100vw;
    background-color: #eee;
    transform: scaleY(0);
    height: 0;
    transform-origin: top;
    overflow: hidden;
    border-radius: 0%;
  }
  .secondNavLi {
    width: 100vw;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }
  .secondNavLi a {
    color: #303030;
    text-align: center;
    width: 100vw !important;
  }
  .navCheck {
    display: none;
  }
  .navCheck:checked ~ .secondNavul {
    transform: scaleY(1);
    height: auto;
  }
}
@media screen and (min-width: 1825px) {
  nav > div#topName {
    font-size: 25px !important;
  }
  .secondNavLi a {
    font-size: 15pt !important;
  }
  .secondNavLi a:hover {
    font-size: 16pt !important;
  }
  .textLoading {
    font-size: 2.1rem !important;
  }
  .navTitle,
  #navHome {
    font-size: 20pt !important;
  }
}