body {
    margin: 0;
}


.icon {
    cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 11;
}

.icon:hover {
    transform: scale(1.1);
  }
  
  .hidden {
    display: none;
  }

  .icon2 {
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  
  .icon2:hover{
    transform: scale(0.98);
  }
  
  .scene-container {
    position: relative; /* Enables positioning elements inside it */
    width: 100%;
    height: 100vh; /* Full screen height */
     /* Ensures no content spillsS outside */
     overflow: hidden;
  }
  
  /* Style for the SVG */
  svg {
    width: 100%;
    height: auto;
    display: block; /* Ensure no extra margins */
  }
  
  /* Position the GIF on top */
  .animated-gif {
    position: absolute; /* Places it on top of the SVG */
    top: 30%; /* Center vertically */
    left: 45%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Offset for perfect centering */
    width: 150px; /* Adjust size */
    height: auto; /* Keep aspect ratio */
    z-index: 9; /* Ensure it's above everything */
  }
  .happybird {
  position: absolute; /* Places it on top of the SVG */
    top: 25%; /* Center vertically */
    left: 16%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Offset for perfect centering */
    width: 1155px; /* Adjust size */
    height: auto; /* Keep aspect ratio */
    z-index: 9;
    pointer-events: none;
  
  }

  #jidlo {
    cursor: move;

   }
   #jidlo:active {
    cursor: grabbing;
  }

  .opice-gif {
    position: absolute; /* Places it on top of the SVG */
    top: 72%; /* Center vertically */
    left: 26%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Offset for perfect centering */
    width: 100px; /* Adjust size */
    height: auto; /* Keep aspect ratio */
    z-index: 4; /* Ensure it's above everything */

  }

.monkeyend {
  position: absolute; /* Places it on top of the SVG */
  top: 70%; /* Center vertically */
  left: 11%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Offset for perfect centering */
  width: 690px; /* Adjust size */
  height: auto; /* Keep aspect ratio */
  z-index: 5; /* Ensure it's above everything */
  pointer-events: none;


}

.mravenecnik-gif {
  position: absolute; /* Places it on top of the SVG */
  top: 70%; /* Center vertically */
  left: 75%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Offset for perfect centering */
  width: 350px; /* Adjust size */
  height: auto; /* Keep aspect ratio */
  z-index: 10; /* Ensure it's above everything */
}

.mravenecnikend {
  position: absolute; /* Places it on top of the SVG */
  top: 70%; /* Center vertically */
  left: 31%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Offset for perfect centering */
  width: 1985px; /* Adjust size */
  height: auto; /* Keep aspect ratio */
  z-index: 6; /* Ensure it's above everything */
  pointer-events: none;

}

.jaguar-gif {
  position: absolute; /* Places it on top of the SVG */
  top: 66%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Offset for perfect centering */
  width: 350px; /* Adjust size */
  height: auto; /* Keep aspect ratio */
  z-index: 5; /* Ensure it's above everything */

}

.jaguarend {
  position: absolute; /* Places it on top of the SVG */
  top: 67.5%; /* Center vertically */
  left: 4%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Offset for perfect centering */
  width: 2110px; /* Adjust size */
  height: auto; /* Keep aspect ratio */
  z-index: 5; /* Ensure it's above everything */
  pointer-events: none;

}

.mravenci {
  transform: translate(860px, 830px);
}

#otevrenakniha {
  position: absolute;
  z-index: 999;
  display: none;
  
}



#opicebublina {
  position: absolute;
  width: 200px;
  height: auto;
  top: 60%; /* Center vertically */
  left: 30%; /* Center horizontally */
  transform: translate(-50%, -50%);
  display: none;

}

#jaguarbublina {
  position: absolute;
  width: 200px;
  height: auto;
  top: 45%; /* Center vertically */
  left: 45%; /* Center horizontally */
  transform: translate(-50%, -50%);
  display: none;
}

#mravenecnikbublina {
  position: absolute;
  width: 200px;
  height: auto;
  top: 53%; /* Center vertically */
  left: 75%; /* Center horizontally */
  transform: translate(-50%, -50%);
  display: none;
}

#papousekbublina {
  position: absolute;
  width: 200px;
  height: auto;
  top: 20%; /* Center vertically */
  left: 47%; /* Center horizontally */
  transform: translate(-50%, -50%);
  display: none;
}

.svgkniha {
  z-index: 80;
  position: absolute;
}

.tlacitko {
  z-index: 100;
  position: absolute;

}

.svginstrukce {
  z-index: 80;
  position: absolute;
}

*::selection {
  background-color: none;
  color: none;
  background: none;
}

#prednikytky {
  z-index: 900;
  position: absolute;
  opacity: 0.3; /* Correct opacity to use 0-1 scale */
  height: 100%;
  width: 100%;
  object-fit: cover; /* Prevent distortion or gaps */
  pointer-events: none;
  top: 0;
  left: 0;

  
  
}

#krovi {
  z-index: 1;
  position: absolute;
  height: 200px;
  width: auto;
  top: 48%; /* Center vertically */
  left: 67%; /* Center horizontally */
}

#wellDoneSvg {
  position: absolute;
  z-index: 1000;
  display:none;
}

#trava1 {
  position: absolute;
  height: 400px; /* Adjust GIF size as needed */
  width: auto; /* Maintain aspect ratio */
  bottom: -200px; /* Move GIF partially out of the bottom */
  right: -200px; /* Move GIF partially out of the right */
  pointer-events: none; /* Optional: Prevent the GIF from blocking interactions */
  z-index: 800;
  opacity: 0.6;
}

#trava2 {
  position: absolute;
  height: 400px; /* Adjust GIF size as needed */
  width: auto; /* Maintain aspect ratio */
  bottom: -175px; /* Move GIF partially out of the bottom */
  left: -150px; /* Move GIF partially out of the right */
  pointer-events: none; /* Optional: Prevent the GIF from blocking interactions */
  z-index: 800;
  opacity: 0.6;
}

#lijany {
  position: absolute;
  z-index: 900;
  pointer-events: none;
  object-fit: cover;
  width: 1980; /* Adjust as needed */
  height: auto; /* Adjust as needed */
  opacity: 0.3;
}