.laohuji {
  position: sticky;
  top: 15vh;
  width: 25vw;
}
.laohuji-bg {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-image: url("https://static.igem.wiki/teams/5038/img-notebook/laohuji.png");

  pointer-events: none;
}

.laohuji-left {
  z-index: -1;
  position: absolute;
  left: 19%;
  top: 20%;
  height: 68%;
  width: 29%;
  background-color: rgb(255, 247, 222);
  overflow: hidden;
}

.laohuji-right {
  z-index: -1;

  position: absolute;
  left: 52%;
  top: 20%;
  height: 68%;
  width: 29%;
  background-color: rgb(255, 247, 222);
  overflow: hidden;
}
.string-1 {
  display: flex;
  flex-direction: column;
  margin-top: 0;
}
.string-2 {
  display: flex;
  flex-direction: column;
  margin-top: 0;
}
.laohuji-left-item {
  position: relative;
  width: 100%;
  height: 10%;
  background-color: rgba(255, 200, 113);
  margin-bottom: 18%;

  text-align: center;
  font-family: "cg";

  border: black solid 2px;
  user-select: none;
}

.laohuji-right-item {
  position: relative;
  width: 100%;
  height: 10%;
  margin-bottom: 18%;

  text-align: center;
  font-family: "cg";

  border: black solid 2px;
  user-select: none;
}
.laohuji-right-item:nth-child(1) {
  background-color: rgb(253, 139, 114);
}
.laohuji-right-item:nth-child(2) {
  background-color: rgb(253, 161, 114);
}
.laohuji-right-item:nth-child(3) {
  background-color: rgb(166 226 243);
}
.laohuji-right-item:nth-child(4) {
  background-color: rgb(244 151 156);
}
.laohuji-right-item:nth-child(5) {
  background-color: rgb(201 174 230);
}
.laohuji-right-item:nth-child(6) {
  background-color: rgb(253, 139, 114);
}
.laohuji-right-item:nth-child(7) {
  background-color: rgb(253, 161, 114);
}
.laohuji-right-item:nth-child(8) {
  background-color: rgb(166 226 243);
}
.laohuji-right-item:nth-child(9) {
  background-color: rgb(244 151 156);
}

.notebook-container {
  width: 100vw;
  height: auto;
  display: flex;
  padding-top: 20vh;
  padding-bottom: 20vh;
}
.notebook-box-bg {
  position: relative;
  left: 5vw;
  height: auto;
  width: 65vw;
  background-color: white;
  background-image: linear-gradient(
    130deg,
    rgb(228, 206, 243) 2%,
    rgb(223, 190, 247) 10%,
    rgb(189, 182, 247) 60%,
    rgb(176, 212, 249) 100%
  );
  border-radius: 1vw;
}
.notebook-box {
  position: relative;
  left: 0;
  top: 0;
  width: 97%;
  margin: 2vh auto;
  height: auto;
  background-size: 100% 100%;
  background-color: white;
  border-radius: 1vw;
  padding: 3vh 3vw;

  scroll-margin-top: 10vh;
}
.notebook {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  background-size: 100% 100%;
  overflow: visible;

  scroll-margin-top: 9vh;
  /* background-color: rgba(139, 20, 20, 0.151); */
}
.wetlab::before {
  content: "";
  position: absolute;
  left: -17.5px;
  top: 0;
  width: 5px;
  height: 100%;
  background-image: linear-gradient(
    to bottom,
    rgb(253, 139, 114) 0%,
    rgb(253, 139, 114) 60%,
    transparent 50%
  );
  background-size: 5px 30px;
  background-repeat: repeat-y;
  /* background-color: rebeccapurple; */
}
.wetlab .notebook-time {
  position: relative;

  color: rgb(253, 139, 114);
  font-size: 30px;
  line-height: 40px;
  height: 40px;
  text-indent: 1%;
  margin-top: 2vh;
}
.notebook-time:nth-child(1) {
  margin-top: 0;
}
.wetlab .notebook-time::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30px;
  width: 30px;
  height: 30px;
  background-color: rgb(253, 139, 114);

  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}
.wetlab .notebook-title-1 {
  position: relative;
  min-height: 40px;
  color: rgb(253, 139, 114);
  font-size: 30px;
  line-height: 40px;

  text-indent: 1%;
  margin-bottom: 4vh;
}
.wetlab .notebook-title-1::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -25px;
  width: 20px;
  height: 20px;
  background-color: rgb(253, 139, 114);

  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  transform: scale(1.2);
}
.wetlab .notebook-title-2 {
  position: relative;
  color: rgb(253, 139, 114);

  font-size: 20px;
  line-height: 30px;

  margin: 1vh 0;
  text-align: justify;
  text-indent: 1%;
}
.notebook-text {
  position: relative;
  color: black;
  font-size: 20px;
  line-height: 30px;

  margin: 1vh 0;
  padding-left: 3%;
  text-align: justify;
}

.img-container {
  height: auto;
  width: 100%;
  min-height: 20vh;
  /* background-color: red; */
}

/* // model // */
.model::before {
  content: "";
  position: absolute;
  left: -17.5px;
  top: 0;
  width: 5px;
  height: 100%;
  background-image: linear-gradient(
    to bottom,
    rgb(253 162 115) 0%,
    rgb(253 162 115) 60%,
    transparent 50%
  );
  background-size: 5px 30px;
  background-repeat: repeat-y;
  /* background-color: rebeccapurple; */
}
.model .notebook-time {
  position: relative;

  color: rgb(253 162 115);
  font-size: 30px;
  line-height: 40px;
  height: 40px;
  text-indent: 1%;
  margin-top: 2vh;
}
.model .notebook-time::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30px;
  width: 30px;
  height: 30px;
  color: rgb(253 162 115);

  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}
.model .notebook-title-1 {
  position: relative;
  min-height: 40px;

  color: rgb(253 162 115);
  font-size: 30px;
  line-height: 40px;

  text-indent: 1%;
  margin-bottom: 4vh;
}
.model .notebook-title-1::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -25px;
  width: 20px;
  height: 20px;
  background-color: rgb(253 162 115);

  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  transform: scale(1.2);
}
.model .notebook-title-2 {
  position: relative;
  color: rgb(253 162 115);

  font-size: 20px;
  line-height: 30px;

  margin: 1vh 0;
  text-align: justify;
  text-indent: 1%;
}
/* hp */
.hp::before {
  content: "";
  position: absolute;
  left: -17.5px;
  top: 0;
  width: 5px;
  height: 100%;
  background-image: linear-gradient(
    to bottom,
    rgb(167, 224, 241) 0%,
    rgb(167, 224, 241) 60%,
    transparent 50%
  );
  background-size: 5px 30px;
  background-repeat: repeat-y;
  /* background-color: rebeccapurple; */
}
.hp .notebook-time {
  position: relative;

  color: rgb(167, 224, 241);
  font-size: 30px;
  line-height: 40px;
  height: 40px;
  text-indent: 1%;
  margin-top: 2vh;
}
.hp .notebook-time::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30px;
  width: 30px;
  height: 30px;
  color: rgb(167, 224, 241);

  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}
.hp .notebook-title-1 {
  position: relative;
  min-height: 40px;

  color: rgb(167, 224, 241);
  font-size: 30px;
  line-height: 40px;

  text-indent: 1%;
  margin-bottom: 4vh;
}
.hp .notebook-title-1::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -25px;
  width: 20px;
  height: 20px;
  background-color: rgb(167, 224, 241);

  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  transform: scale(1.2);
}
.hp .notebook-title-2 {
  position: relative;
  color: rgb(167, 224, 241);

  font-size: 20px;
  line-height: 30px;

  margin: 1vh 0;
  text-align: justify;
  text-indent: 1%;
}

/* //wiki// */

.wiki::before {
  content: "";
  position: absolute;
  left: -17.5px;
  top: 0;
  width: 5px;
  height: 100%;
  background-image: linear-gradient(
    to bottom,
    rgb(244 152 157) 0%,
    rgb(244 152 157) 60%,
    transparent 50%
  );
  background-size: 5px 30px;
  background-repeat: repeat-y;
  /* background-color: rebeccapurple; */
}
.wiki .notebook-time {
  position: relative;

  color: rgb(244 152 157);
  font-size: 30px;
  line-height: 40px;
  height: 40px;
  text-indent: 1%;
  margin-top: 2vh;
}
.wiki .notebook-time::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30px;
  width: 30px;
  height: 30px;
  color: rgb(244 152 157);


  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}
.wiki  .notebook-title-1 {
  position: relative;
  min-height: 40px;

  color: rgb(244 152 157);
  font-size: 30px;
  line-height: 40px;

  text-indent: 1%;
  margin-bottom: 4vh;
}
.wiki .notebook-title-1::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -25px;
  width: 20px;
  height: 20px;
  background-color: rgb(244 152 157);

  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  transform: scale(1.2);
}
.wiki .notebook-title-2 {
  position: relative;
  color: rgb(244 152 157);

  font-size: 20px;
  line-height: 30px;

  margin: 1vh 0;
  text-align: justify;
  text-indent: 1%;
}

/* //pre// */

.pre::before {
  content: "";
  position: absolute;
  left: -17.5px;
  top: 0;
  width: 5px;
  height: 100%;
  background-image: linear-gradient(
    to bottom,
    rgb(201 175 230) 0%,
    rgb(201 175 230) 60%,
    transparent 50%
  );
  background-size: 5px 30px;
  background-repeat: repeat-y;
  /* background-color: rebeccapurple; */
}
.pre .notebook-time {
  position: relative;

  color: rgb(201 175 230);
  font-size: 30px;
  line-height: 40px;
  height: 40px;
  text-indent: 1%;
  margin-top: 2vh;
}
.pre .notebook-time::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30px;
  width: 30px;
  height: 30px;
  color: rgb(201 175 230);


  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}
.pre  .notebook-title-1 {
  position: relative;
  min-height: 40px;

  color: rgb(201 175 230);
  font-size: 30px;
  line-height: 40px;

  text-indent: 1%;
  margin-bottom: 4vh;
}
.pre .notebook-title-1::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -25px;
  width: 20px;
  height: 20px;
  background-color: rgb(201 175 230);

  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  transform: scale(1.2);
}
.pre .notebook-title-2 {
  position: relative;
  color: rgb(201 175 230);

  font-size: 20px;
  line-height: 30px;

  margin: 1vh 0;
  text-align: justify;
  text-indent: 1%;
}

.notebook-img {
  position: relative;
}

.img-container {
  position: relative;
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
}
.img-container > * {
  position: relative !important;
  flex-grow: 1;
  flex-shrink: 1;
  left: 0 !important;
}

.h30 {
  height: 30vw;
}