/* Puzzle 1 */

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

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

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

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

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

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

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

/* Puzzle 2 */

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

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

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

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

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

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

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

/* Puzzle 3 */

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

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

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

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

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

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

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

/* Puzzle 4 */

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

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

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

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

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

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

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

/* Puzzle 5 */

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

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

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

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

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

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

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

/* Puzzle 6 */

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

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

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

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

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

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

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

/* Puzzle 7 */

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

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

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

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

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

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

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

/* Puzzle 8 */

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

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

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

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

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

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

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

/* Puzzle 9 */

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

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

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

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

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

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

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



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

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

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

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

  /* Puzzle 2  */

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

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

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

  /* Puzzle 3  */

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

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

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

  /* Puzzle 4  */

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

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

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

  /* Puzzle 5  */

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

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

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

  /* Puzzle 6  */

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

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

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

  /* Puzzle 7  */

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

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

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

  /* Puzzle 8  */

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

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

  #ChapterThree-puzzle8-solution-Container{
    width: 100vh;
    top: 50%;
  }


  /* Puzzle 9  */

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

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

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