* {
  border: 0;
  padding: 0;
  margin: 0;
  background-size: 100% 100%;
  box-sizing: border-box;
}

.imgLoader {
  position: fixed;
  animation: preLoad 1s steps(1);
  width: 0;
  height: 0;
}
body {
  background-size: contain;
  background-image: url("https://static.igem.wiki/teams/5038/img-team/bg-4.jpg");
  background-repeat: repeat;
}

li {
  list-style: none;
  text-decoration: none;
  list-style-type: none;
}



.main-container {
  position: relative;
  background-repeat: repeat;
  /* height: 360vw; */
  width: 100vw;
  margin: 0 auto;

  /* background-color: bisque; */
}

.container-1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 60vw;
  background-size: 100% 25%;
  margin-top: 8vh;
}

.container-2 {
  display: flex;
  flex-wrap: wrap;
  height: 105%;
  background-size: 100% 25%;
}

.sub-container-3 {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  border: 0;
  height: 30vw;
  margin: 2vh auto;
  box-shadow: 0 0 2vw 0.2vw #cec4c4f0;
  background-color: #ffb6de4d;
  border-radius: 4vw;
  /* opacity: 0.7; */
  background-image: linear-gradient(
    150deg,
    rgba(181, 240, 244, 0.721),
    rgba(114, 99, 227, 0.815),
    rgba(163, 85, 183, 0.381),
    rgba(38, 106, 223, 0.514)
  );
  /* background-color: rebeccapurple; */
}
/* 16 18 */
/* 24 20 */
.sub-container-3:nth-child(1) {
  padding-top: 1%;
  width: 27%;
  height: 37vw;
}
.sub-container-3 .group-name {
  line-height: 3.5vw;
}

.sub-container-3:nth-child(2) {
  padding-top: 1%;
  width: 55%;
  height: 37vw;
}

.sub-container-3:nth-child(3) {
  padding-top: 1%;
  width: 28%;
  height: 37vw;
  margin-left: 4vw;
}

.sub-container-3:nth-child(4) {
  padding-top: 1%;
  width: 28%;
  height: 37vw;
}

.sub-container-3:nth-child(5) {
  padding-top: 1%;
  width: 28%;
  height: 37vw;
}

.sub-container-3:nth-child(6) {
  padding-top: 1%;
  width: 27%;
  height: 37vw;
}

.sub-container-3:nth-child(7) {
  padding-top: 1%;
  width: 55%;
  height: 37vw;
}


.sub-container-3:nth-child(8) {
  padding-top: 1%;
  width: 90%;
  height: 70vw;
}
.sub-container-3:nth-child(8) > .group-name {
  margin-top: -63vw;
}
.sub-container-3:nth-child(8) > .group-name {
  line-height: 3vw;
}

.sub-container-3:nth-child(9) {
  padding-top: 1%;
  width: 90%;
  height: 37vw;
}
.sub-container-3:nth-child(9) > .group-name {
  line-height: 3vw;
}

.sub-container-3:nth-child(10) {
  padding-top: 1%;
  width: 72%;
  height: 70vw;
}
.sub-container-3:nth-child(10) > .group-name {
  margin-top: -63vw;
  width: max-content;
  line-height: 2vw;
}

.sub-container-3:nth-child(11) {
  padding-top: 1%;
  width: 72%;
  height: 70vw;
}

.sub-container-3:nth-child(11) > .group-name {
  margin-top: -63vw;
  line-height: 3vw;
}

.part-name-bg {
  position: relative;
  height: 5vw;
  width: 30vw;
  margin: 2vh auto;
  margin-top: 5vh;
  border-radius: 2vw;
  font-family: "Aqum-2-Classic";
  background-color: white;
}
.part-name {
  font-family: "Career";
  position: relative;
  left: 4%;
  top: 10%;
  width: 92%;
  height: 80%;
  border-radius: 2vw;
  background-color: rgb(255, 254, 254);
  color: rgba(113, 2, 150, 0.502);

  color: transparent;
  background-clip: text;

  font-size: 3vw;
  text-align: center;
  line-height: 4vw;
}
.part-name-1 {
  background-image: linear-gradient(
    135deg,
    rgba(126, 116, 203, 0.137),
    rgba(196, 118, 215, 0.842),
    rgba(38, 106, 223, 0.493),
    rgba(181, 240, 244, 0.721)
  );
}
.part-name-2 {
  margin-top: 20vh;
  background-image: linear-gradient(
    150deg,
    rgba(181, 240, 244, 0.721),
    rgba(114, 99, 227, 0.815),
    rgba(163, 85, 183, 0.381),
    rgba(38, 106, 223, 0.514)
  );
}

.group-name {
  position: absolute;
  margin-top: -30vw;
  width: 30%;
  height: 6.2vw;
  line-height: 6.2vw;
  font-size: 3vw;
  text-align: center;
  color: #fdfdfd;
  font-weight: bolder;
  /* background-color: rgba(255, 0, 0, 0.518); */
}