html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: black;
}

.scroll-container {
  position: relative;
  width: 2048px;
  height: 2048px;

  background-image: url("../assets/rätsel1/background.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* exakt 2048x2048, kein Scaling */
  background-position: top left;
}

.potion1-container {
  position: absolute;
  bottom: 540px;
  left: 600px;
  transform: rotate(5deg);

  .potion1-img {
    width: 100px;
    border-radius: 60px;
    box-shadow: 0 0 10px 5px #00aaff;
    transition: box-shadow 0.4s ease;
    user-select: none;
  }

  .potion1-label {
    color: white;
    position: absolute;
    top: 69px;
    left: 44px;
    font-size: 23px;
    user-select: none;
  }

  .potion1-img:hover {
    box-shadow: 0 0 20px 10px #00aaff;
  }

}

.torch-container {
  position: absolute;
  bottom: 805px;
  left: 1276px;
  transform: rotate(5deg);

  .torch-img {
    width: 100px;
    border-radius: 60px;
    box-shadow: 0 0 10px 5px #00aaff;
    transition: box-shadow 0.4s ease;
    user-select: none;
  }

  .torch-label {
    color: white;
    position: absolute;
    top: 69px;
    left: 44px;
    font-size: 23px;
    user-select: none;
  }

  .torch-img:hover {
    box-shadow: 0 0 20px 10px #00aaff;
  }
}

.grimoire-container {
  position: absolute;
  bottom: 1025px;
  left: 1606px;
  transform: rotate(5deg);

  .grimoire-img {
    width: 100px;
    border-radius: 60px;
    box-shadow: 0 0 10px 5px #00aaff;
    transition: box-shadow 0.4s ease;
    user-select: none;
  }

  .grimoire-label {
    color: white;
    position: absolute;
    top: 69px;
    left: 44px;
    font-size: 23px;
    user-select: none;
  }

  .grimoire-img:hover {
    box-shadow: 0 0 20px 10px #00aaff;
  }
}