#s3 {
  left: 40%;
}

#s4 {
  left: 85.5%;
}

#N1,
#NH1,
#N2,
#NH2,
#N3,
#NH3 {
  left: 5%;
}

#N2,
#NH2 {
  top: 43%;
}

#N3line,
#NH3line {
  width: 55px;
  left: 31%;
}

/* #N5,
#NH5 {
  left: 75%;
}

#N6,
#NH6 {
  top: 43%;
  left: 79%;
  text-align: left;
} */

#N2line,
#NH2line {
  width: 100px;
  left: 27%;
}

#N4 {
  left: 34%;
}

#NH4 {
  top: -20%;
}

#NH4line {
  height: 100px;
  top: -13%;
  left: 48%;
  transform: rotate(320deg);
}

@media screen and (max-width: 800px) {
  .soon {
    font-size: 1.5em;
  }

  #N1line,
  #NH1line {
    width: 130px;
    left: 18%;
  }

  .controller {
    margin: 80px auto 0px;
    font-size: 0.8em;
  }

  #N2,
  #NH2 {
    top: 42%;
    left: 3%;
  }

  #N1,
  #NH1,
  #N3,
  #NH3 {
    left: 3%;
  }

  #N2line,
  #NH2line {
    width: 90px;
    left: 23%;
  }

  #N3line,
  #NH3line {
    width: 60px;
    left: 27%;
  }

  #N4 {
    left: 37%;
  }

  #NH4 {
    left: 22%;
  }

  #N5,
  #NH5 {
    left: 77%;
    top: 13%;
  }

  #N6,
  #NH6 {
    top: 42%;
    left: 77%;
  }

  #NH4line {
    height: 74px;
    top: -15%;
    left: 46%;
    transform: rotate(311deg);
  }
}

@media screen and (max-width: 1100px) and (orientation: landscape) {
  #N1line,
  #NH1line {
    width: 130px;
    left: 18%;
  }

  .controller {
    margin: 80px auto 0px;
  }

  #N2,
  #NH2 {
    top: 40%;
    left: 3%;
  }

  #N2line,
  #NH2line {
    width: 70px;
    left: 26%;
  }

  #N3line,
  #NH3line {
    width: 60px;
    left: 27%;
  }

  #N4 {
    left: 29%;
  }

  #N5,
  #NH5 {
    left: 76%;
  }

  #N6,
  #NH6 {
    top: 40%;
    left: 76%;
  }

  #NH4line {
    height: 50px;
    top: -10%;
  }
}

@media screen and (max-width: 734px) {
  #s2,
  #s3,
  #s4 {
    top: 56%;
  }
  #s3 {
    left: 39%;
  }
  #s4 {
    left: 84.5%;
  }

  .controller {
    font-size: 1em;
  }
}