/* Puzzle 1 */

#ChapterOne-puzzle1-hint1-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    width: 35vw;
    max-width: 470px;
    transform: translate(-50%, -50%);
}

#ChapterOne-puzzle1-hint1-hintTwoBtn{
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 52%;
  height: 12%;
}

#ChapterOne-puzzle1-hint2-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 65vw;
    max-width: 920px;
}

#ChapterOne-puzzle1-hint2-backBtn{
    position: absolute;
    bottom: 14%;
    left: 22%;
    height: 12%;
    width: 27%;
}

#ChapterOne-puzzle1-hint2-solutionBtn{
  position: absolute;
  bottom: 14%;
  height: 12%;
  width: 27%;
  left: 51%;
}

#ChapterOne-puzzle1-solution-Container{
  position: absolute;
  width: 65vw;
  top: 45%;
  left: 55%;
  transform: translate(-50%, -50%);
  max-width: 920px;
}

#ChapterOne-puzzle1-solution-backBtn{
  position: absolute;
  bottom: 12%;
  width: 27%;
  height: 13%;
  left: 50%;
  transform: translateX(-50%);
}

/* Puzzle 2 */

#ChapterOne-puzzle2-hint1-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    width: 35vw;
    max-width: 470px;
    transform: translate(-50%, -50%);
}

#ChapterOne-puzzle2-hint1-hintTwoBtn{
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 52%;
    height: 13%;
}

#ChapterOne-puzzle2-hint2-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 65vw;
    max-width: 920px;
}

#ChapterOne-puzzle2-hint2-backBtn{
    position: absolute;
    bottom: 12%;
    left: 22%;
    height: 12%;
    width: 27%;
}

#ChapterOne-puzzle2-hint2-solutionBtn{
  position: absolute;
  bottom: 12%;
  height: 12%;
  width: 27%;
  left: 51%;
}

#ChapterOne-puzzle2-solution-Container{
  position: absolute;
  width: 65vw;
  top: 45%;
  left: 55%;
  transform: translate(-50%, -50%);
  max-width: 920px;
}

#ChapterOne-puzzle2-solution-backBtn{
  position: absolute;
  bottom: 5%;
  width: 27%;
  height: 13%;
  left: 50%;
  transform: translateX(-50%);
}

/* Puzzle 3 */

#ChapterOne-puzzle3-hint1-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    width: 35vw;
    max-width: 470px;
    transform: translate(-50%, -50%);
}

#ChapterOne-puzzle3-hint1-hintTwoBtn{
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 52%;
    height: 13%;
}

#ChapterOne-puzzle3-hint2-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 65vw;
    max-width: 920px;
}

#ChapterOne-puzzle3-hint2-backBtn{
    position: absolute;
    bottom: 14%;
    left: 22%;
    height: 12%;
    width: 27%;
}

#ChapterOne-puzzle3-hint2-solutionBtn{
  position: absolute;
  bottom: 14%;
  height: 12%;
  width: 27%;
  left: 51%;
}

#ChapterOne-puzzle3-solution-Container{
  position: absolute;
  width: 65vw;
  top: 45%;
  left: 55%;
  transform: translate(-50%, -50%);
  max-width: 920px;
}

#ChapterOne-puzzle3-solution-backBtn{
  position: absolute;
  bottom: 16%;
  width: 27%;
  height: 13%;
  left: 50%;
  transform: translateX(-50%);
}

/* Puzzle 4 */

#ChapterOne-puzzle4-hint1-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    width: 35vw;
    max-width: 470px;
    transform: translate(-50%, -50%);
}

#ChapterOne-puzzle4-hint1-hintTwoBtn{
    position: absolute;
    bottom: 14%;
    left: 50%;
    transform: translateX(-50%);
    width: 52%;
    height: 13%;
}

#ChapterOne-puzzle4-hint2-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 65vw;
    max-width: 920px;
}

#ChapterOne-puzzle4-hint2-backBtn{
    position: absolute;
    bottom: 13%;
    left: 22%;
    height: 12%;
    width: 27%;
}

#ChapterOne-puzzle4-hint2-solutionBtn{
  position: absolute;
  bottom: 13%;
  height: 12%;
  width: 27%;
  left: 51%;
}

#ChapterOne-puzzle4-solution-Container{
  position: absolute;
  width: 65vw;
  top: 45%;
  left: 55%;
  transform: translate(-50%, -50%);
  max-width: 920px;
}

#ChapterOne-puzzle4-solution-backBtn{
  position: absolute;
  bottom: 16%;
  width: 27%;
  height: 13%;
  left: 50%;
  transform: translateX(-50%);
}

/* Puzzle 5 */

#ChapterOne-puzzle5-hint1-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    width: 35vw;
    max-width: 470px;
    transform: translate(-50%, -50%);
}

#ChapterOne-puzzle5-hint1-hintTwoBtn{
    position: absolute;
    bottom: 13%;
    left: 50%;
    transform: translateX(-50%);
    width: 52%;
    height: 13%;
}

#ChapterOne-puzzle5-hint2-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 65vw;
    max-width: 920px;
}

#ChapterOne-puzzle5-hint2-backBtn{
    position: absolute;
    bottom: 13%;
    left: 22%;
    height: 12%;
    width: 27%;
}

#ChapterOne-puzzle5-hint2-solutionBtn{
  position: absolute;
  bottom: 13%;
  height: 12%;
  width: 27%;
  left: 51%;
}

#ChapterOne-puzzle5-solution-Container{
  position: absolute;
  width: 65vw;
  top: 45%;
  left: 55%;
  transform: translate(-50%, -50%);
  max-width: 920px;
}

#ChapterOne-puzzle5-solution-backBtn{
  position: absolute;
  bottom: 16%;
  width: 27%;
  height: 13%;
  left: 50%;
  transform: translateX(-50%);
}

/* Puzzle 6 */

#ChapterOne-puzzle6-hint1-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    width: 35vw;
    max-width: 470px;
    transform: translate(-50%, -50%);
}

#ChapterOne-puzzle6-hint1-hintTwoBtn{
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 52%;
    height: 13%;
}

#ChapterOne-puzzle6-hint2-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 65vw;
    max-width: 920px;
}

#ChapterOne-puzzle6-hint2-backBtn{
    position: absolute;
    bottom: 13%;
    left: 22%;
    height: 12%;
    width: 27%;
}

#ChapterOne-puzzle6-hint2-solutionBtn{
  position: absolute;
  bottom: 13%;
  height: 12%;
  width: 27%;
  left: 51%;
}

#ChapterOne-puzzle6-solution-Container{
  position: absolute;
  width: 65vw;
  top: 45%;
  left: 55%;
  transform: translate(-50%, -50%);
  max-width: 920px;
}

#ChapterOne-puzzle6-solution-backBtn{
  position: absolute;
  bottom: 16%;
  width: 27%;
  height: 13%;
  left: 50%;
  transform: translateX(-50%);
}

/* Puzzle 7 */

#ChapterOne-puzzle7-hint1-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    width: 35vw;
    max-width: 470px;
    transform: translate(-50%, -50%);
}

#ChapterOne-puzzle7-hint1-hintTwoBtn{
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 52%;
    height: 13%;
}

#ChapterOne-puzzle7-hint2-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 65vw;
    max-width: 920px;
}

#ChapterOne-puzzle7-hint2-backBtn{
    position: absolute;
    bottom: 13%;
    left: 22%;
    height: 12%;
    width: 27%;
}

#ChapterOne-puzzle7-hint2-solutionBtn{
  position: absolute;
  bottom: 13%;
  height: 12%;
  width: 27%;
  left: 51%;
}

#ChapterOne-puzzle7-solution-Container{
  position: absolute;
  width: 65vw;
  top: 45%;
  left: 55%;
  transform: translate(-50%, -50%);
  max-width: 920px;
}

#ChapterOne-puzzle7-solution-backBtn{
  position: absolute;
  bottom: 5%;
  width: 27%;
  height: 13%;
  left: 50%;
  transform: translateX(-50%);
}

/* Puzzle 8 */

#ChapterOne-puzzle8-hint1-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    width: 35vw;
    max-width: 470px;
    transform: translate(-50%, -50%);
}

#ChapterOne-puzzle8-hint1-hintTwoBtn{
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 52%;
    height: 13%;
}

#ChapterOne-puzzle8-hint2-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 65vw;
    max-width: 920px;
}

#ChapterOne-puzzle8-hint2-backBtn{
    position: absolute;
    bottom: 6%;
    left: 22%;
    height: 12%;
    width: 27%;
}

#ChapterOne-puzzle8-hint2-solutionBtn{
  position: absolute;
  bottom: 6%;
  height: 12%;
  width: 27%;
  left: 51%;
}

#ChapterOne-puzzle8-solution-Container{
  position: absolute;
  width: 45vw;
  top: 45%;
  left: 10vw;
  transform: translateY(-50%);
  max-width: 920px;
  z-index: 1;
}

#ChapterOne-puzzle8-solution-backBtn{
  position: absolute;
  bottom: 9%;
  width: 27%;
  height: 13%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

#chapter1hint8Extra{
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    width: 45vw;
    right: 5vw;
    z-index: 0;
}

/* Puzzle 9 */

#ChapterOne-puzzle9-hint1-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    width: 35vw;
    max-width: 470px;
    transform: translate(-50%, -50%);
}

#ChapterOne-puzzle9-hint1-hintTwoBtn{
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 52%;
    height: 13%;
}

#ChapterOne-puzzle9-hint2-Container{
    position: absolute;
    top: 45%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 65vw;
    max-width: 920px;
}

#ChapterOne-puzzle9-hint2-backBtn{
    position: absolute;
    bottom: 11%;
    left: 22%;
    height: 12%;
    width: 27%;
}

#ChapterOne-puzzle9-hint2-solutionBtn{
  position: absolute;
  bottom: 11%;
  height: 12%;
  width: 27%;
  left: 51%;
}

#ChapterOne-puzzle9-solution-Container{
  position: absolute;
  width: 65vw;
  top: 45%;
  left: 55%;
  transform: translate(-50%, -50%);
  max-width: 920px;
}

#ChapterOne-puzzle9-solution-backBtn{
  position: absolute;
  bottom: 6%;
  width: 27%;
  height: 13%;
  left: 50%;
  transform: translateX(-50%);
}



@media screen and (max-height: 490px){

  /* Puzzle 1  */
  #ChapterOne-puzzle1-hint1-Container{
    top: 50%;
    width: 60vh;
  }

  #ChapterOne-puzzle1-hint2-Container{
    top: 50%;
    width: 100vh;
  }

  #ChapterOne-puzzle1-solution-Container{
    width: 100vh;
    top: 50%;
  }

  /* Puzzle 2  */

  #ChapterOne-puzzle2-hint1-Container{
    top: 50%;
    width: 60vh;
  }

  #ChapterOne-puzzle2-hint2-Container{
    top: 50%;
    width: 100vh;
  }

  #ChapterOne-puzzle2-solution-Container{
    width: 100vh;
    top: 50%;
  }

  /* Puzzle 3  */

  #ChapterOne-puzzle3-hint1-Container{
    top: 50%;
    width: 60vh;
  }

  #ChapterOne-puzzle3-hint2-Container{
    top: 50%;
    width: 100vh;
  }

  #ChapterOne-puzzle3-solution-Container{
    width: 100vh;
    top: 50%;
  }

  /* Puzzle 4  */

  #ChapterOne-puzzle4-hint1-Container{
    top: 50%;
    width: 60vh;
  }

  #ChapterOne-puzzle4-hint2-Container{
    top: 50%;
    width: 100vh;
  }

  #ChapterOne-puzzle4-solution-Container{
    width: 100vh;
    top: 50%;
  }

  /* Puzzle 5  */

  #ChapterOne-puzzle5-hint1-Container{
    top: 50%;
    width: 60vh;
  }

  #ChapterOne-puzzle5-hint2-Container{
    top: 50%;
    width: 100vh;
  }

  #ChapterOne-puzzle5-solution-Container{
    width: 100vh;
    top: 50%;
  }

  /* Puzzle 6  */

  #ChapterOne-puzzle6-hint1-Container{
    top: 50%;
    width: 60vh;
  }

  #ChapterOne-puzzle6-hint2-Container{
    top: 50%;
    width: 100vh;
  }

  #ChapterOne-puzzle6-solution-Container{
    width: 100vh;
    top: 50%;
  }

  /* Puzzle 7  */

  #ChapterOne-puzzle7-hint1-Container{
    top: 50%;
    width: 60vh;
  }

  #ChapterOne-puzzle7-hint2-Container{
    top: 50%;
    width: 100vh;
  }

  #ChapterOne-puzzle7-solution-Container{
    width: 100vh;
    top: 50%;
  }

  /* Puzzle 8  */

  #ChapterOne-puzzle8-hint1-Container{
    top: 50%;
    width: 60vh;
  }

  #ChapterOne-puzzle8-hint2-Container{
    top: 50%;
    width: 100vh;
  }

  #ChapterOne-puzzle8-solution-Container{
    top: 40%;
  }


  /* Puzzle 9  */

  #ChapterOne-puzzle9-hint1-Container{
    top: 50%;
    width: 60vh;
  }

  #ChapterOne-puzzle9-hint2-Container{
    top: 50%;
    width: 100vh;
  }

  #ChapterOne-puzzle9-solution-Container{
    width: 100vh;
    top: 50%;
  }
}