.protocol-container {
  width: 100vw;
  margin-top: 6vh;
  padding-top: 1px;
}
.protocol-title {
  position: relative;
  height: 6vh;
  background-image: linear-gradient(
    130deg,
    rgb(255, 255, 255) 2%,
    rgb(223, 190, 247) 10%,
    rgb(189, 182, 247) 60%,
    rgb(176, 212, 249) 100%
  );

  font-size: 3vh;
  line-height: 6vh;
  margin-top: 2vh;
  margin-bottom: 1vh;
  border-radius: 0.5vw;
  width: 33%;
  text-indent: 17%;
  font-family: "CG-bold";
  color: rgb(139, 97, 161);
}

.protocol-title::before {
  content: "";
  position: absolute;
  width: 10%;
  left: 6%;
  top: 10%;
  height: 80%;
  background-size: 100% 100%;
}
.protocol-box {
  width: 80%;
  margin: 0 auto;
}
.protocol-btn-container {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 1vh;
}
.protocol-btn-container :last-child {
  margin-right: 0;
}
.protocol-btn {
  z-index: 4;

  flex-shrink: 1;
  flex-grow: 1;
  position: relative;
  width: 30%;
  text-align: left;
  border-radius: 0.5vw;

  border: 3px solid rgb(189, 189, 246);
  color: rgb(189, 189, 246);

  text-indent: 1vw;
  font-size: 1.5vh;
  line-height: 5vh;
  margin-right: 0.3vw;
  width: 32%;

  background-color: #fff;
  font-family: "CG-bold";
  font-weight: 800;

}
.btn-rotate-1::after {
  background-image: url("https://static.igem.wiki/teams/5038/img-protocol/arrow-img/arrow-4.png") !important;
  transition: transform 1s;
  transform: rotate(0deg);
}
.btn-rotate-1{
  background-color: rgb(189, 189, 246);
  color: white;
}
.btn-rotate-2::after {
  transition: all 1s;
  transform: rotate(0deg);
}
.protocol-btn::after {
  content: "";
  position: absolute;
  width: 10%;
  left: 88%;
  top: 10%;
  height: 80%;

  background-size: 100% 100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-protocol/arrow-img/arrow-1.png");
}

.protocol-container > :nth-child(1) .protocol-btn::after {
  background-image: url("https://static.igem.wiki/teams/5038/img-protocol/arrow-img/arrow-3.png");
}
.protocol-container > :nth-child(2) .protocol-btn::after {
  background-image: url("https://static.igem.wiki/teams/5038/img-protocol/arrow-img/arrow-2.png");
}
.protocol-container > :nth-child(3) .protocol-btn::after {
  background-image: url("https://static.igem.wiki/teams/5038/img-protocol/arrow-img/arrow-1.png");
}

.protocol-container > :nth-child(1) .protocol-title::before {
  background-image: url("https://static.igem.wiki/teams/5038/img-protocol/part-title-1/1.png");
}
.protocol-container > :nth-child(2) .protocol-title::before {
  background-image: url("https://static.igem.wiki/teams/5038/img-protocol/part-title-1/2.png");
}
.protocol-container > :nth-child(3) .protocol-title::before {
  background-image: url("https://static.igem.wiki/teams/5038/img-protocol/part-title-1/3.png");
}

.protocol-container > :nth-child(2) .protocol-btn {
  border: 3px solid rgb(220, 200, 246);
  color: rgb(220, 200, 246);
}
.protocol-container > :nth-child(3) .protocol-btn {
  border: 3px solid rgb(170, 200, 246);
  color: rgb(170, 200, 246);
}

.protocol-container > :nth-child(2) .btn-rotate-1{
  background-color: rgb(220, 200, 246) !important;
  color: white !important;
}
.protocol-container > :nth-child(3) .btn-rotate-1{
  background-color: rgb(170, 200, 246) !important;
  color: white !important;
}

.protocol-text {
  z-index: 3;
  display: none;
  background-color: #fff;
  padding: 4vh;
  border-radius: 1vw;
}
.protocol-text-container {
  position: relative;
}
.protocol-text-title-1 {
  width: 100%;
  text-align: center;

  font-size: xx-large;
  font-family: "cg-bold";
  color: rgb(139, 97, 161);
}
.protocol-text-title-2 {
  width: 100%;
  text-align: left;

  font-size: x-large;
  font-family: "cg-bold";
  color: rgb(159, 119, 180);
}
.protocol-text-title-3 {
  width: 100%;
  text-align: left;

  font-size: 1.3vw;
  font-family: "cg-bold";
  color: black;
  margin-top: 3vh;
}
.protocol-text > * {
  margin: 0 auto;
}
.protocol-content {
  color: black;
  min-height: 3vh;
  line-height: 3vh;
  font-size: 2vh;
  padding-left: 2vw;
  font-family: "cg";
}