/*BACKGROUND*/
.parent-container {
    position: relative; /* Establishes a positioning context for children */
    width: 600px;
    height: 400px;
    margin: auto; /* Center the container for example */
}

.background-image-container {
    position: absolute; /* Position the background container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Lower z-index for the back layer */
}

.background-image-container img {
     position:absolute;
    justify-content: center; 
    left:-355px;
    top: 10px;
    width: 220%;
    height: 220%;
    object-fit: contain; /* Ensures the image covers the container well */
}





/*CREATURE*/
.creature-container {
  position: absolute;
  /* Define the desired size of the container */
  top: 400px;
  left: -120px;
  width: 250px;
  height: 250px; 
}

.creature-container img {
  /* Make the image fill the container's dimensions */
  width: 100%;
  height: 100%;
   object-fit: contain;  
/* Optional: position the image within the container */
  object-position: center;
  opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;
}
.middlecreature {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 130px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  overflow: auto;
}
.creature-container:hover .image {
  opacity: 0.3;
}

.creature-container:hover .middlecreature {
  opacity: 1;
}
.textcreature {
  background-color: #000000;
  color: white;
  font-size: 15px;
  padding: 10px 20px;
  font-family: "Courier New";
}
.creature-container:hover { 
scale: 1.5; 
} 
.creature-container img {
  /* Chains multiple crisp shadows to cover all angles */
  filter: drop-shadow(2px 0px 0px #FFFFFF) 
          drop-shadow(-2px 0px 0px #FFFFFF) 
          drop-shadow(0px 2px 0px #FFFFFF) 
          drop-shadow(0px -2px 0px #FFFFFF);
}




/*HANGYODON*/
.hangyodon-container {
  position: absolute;
  /* Define the desired size of the container */
  top: 580px;
  left: 300px;
  width: 150px;
  height: 150px;  
}

.hangyodon-container img {
  /* Make the image fill the container's dimensions */
  width: 100%;
  height: 100%;
   object-fit: contain;
/* Optional: position the image within the container */
  object-position: center;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;  
}
.middlehangyodon {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 130px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  overflow: auto;
}
.hangyodon-container:hover .image {
  opacity: 0.3;
}

.hangyodon-container:hover .middlehangyodon {
  opacity: 1;
}
.texthangyodon {
  background-color: #000000;
  color: white;
  font-size: 15px;
  padding: 10px 20px;
  font-family: "Courier New";
}
.hangyodon-container:hover { 
scale: 1.5 
} 
.hangyodon-container img {
  /* Chains multiple crisp shadows to cover all angles */
  filter: drop-shadow(2px 0px 0px #FFFFFF) 
          drop-shadow(-2px 0px 0px #FFFFFF) 
          drop-shadow(0px 2px 0px #FFFFFF) 
          drop-shadow(0px -2px 0px #FFFFFF);
}



/*ABESAPIEN*/
.abesapien-container {
  position: absolute;
  /* Define the desired size of the container */
  top: 130px;
  left: 120px;
  width: 290px;
  height: 290px;  
}

.abesapien-container img {
  /* Make the image fill the container's dimensions */
  width: 100%;
  height: 100%;
   object-fit: contain;  
/* Optional: position the image within the container */
  object-position: center;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden; 
 
}

.middleabesapien {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 130px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  overflow: auto;
}
.abesapien-container:hover .image {
  opacity: 0.3;
}

.abesapien-container:hover .middleabesapien {
  opacity: 1;
}
.textabesapien {
  background-color: #000000;
  color: white;
  font-size: 15px;
  padding: 10px 20px;
  font-family: "Courier New";
}
.abesapien-container:hover { 
scale: 1.5 
} 
.abesapien-container img {
  /* Chains multiple crisp shadows to cover all angles */
  filter: drop-shadow(2px 0px 0px #FFFFFF) 
          drop-shadow(-2px 0px 0px #FFFFFF) 
          drop-shadow(0px 2px 0px #FFFFFF) 
          drop-shadow(0px -2px 0px #FFFFFF);
}




/*AMPHIBIANMAN*/
.amphibianman-container {
  position: absolute;
  /* Define the desired size of the container */
  top: 300px;
  left: 500px;
  width: 260px;
  height: 260px;  
}

.amphibianman-container img {
  /* Make the image fill the container's dimensions */
  width: 100%;
  height: 100%;
   object-fit: contain;  
/* Optional: position the image within the container */
  object-position: center;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;  
}
.middleamphibianman {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 130px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  overflow: auto;
}
.amphibianman-container:hover .image {
  opacity: 0.3;
}

.amphibianman-container:hover .middleamphibianman {
  opacity: 1;
}
.textamphibianman {
  background-color: #000000;
  color: white;
  font-size: 15px;
  padding: 10px 20px;
  font-family: "Courier New";
}
.amphibianman-container:hover { 
scale: 1.5 
} 
.amphibianman-container img {
  /* Chains multiple crisp shadows to cover all angles */
  filter: drop-shadow(2px 0px 0px #FFFFFF) 
          drop-shadow(-2px 0px 0px #FFFFFF) 
          drop-shadow(0px 2px 0px #FFFFFF) 
          drop-shadow(0px -2px 0px #FFFFFF);
}



/*HOMEPAGE LINK - RABBIT*/
.image-link-container {
    /* Set the container position relative so the text can be positioned absolutely within it */
    position: relative;
    /* Optional: display as block for better control over dimensions */
    display: inline-block;
    width: fit-content;
    height: fit-content;
    box-sizing: border-box;
    z-index: 99; /* Lower z-index for the back layer */
   

}

.image-text {
    /* Position the text absolutely within its parent container */
    position: absolute;
    /* Adjust these values to position the text exactly where you want */
    top: 85%;
    left: 60%;
    /* The transform is used to center the text precisely */
    transform: translate(-50%, -50%);
    /* Optional: styling for readability */
    color: White; /* Example text color */
    background-color: rgba(0, 0, 0, 0); /* Example background for readability */
    padding: 10px;
    font-size: 15px;
    text-align: center;
    font-family: "Courier New", monospace; /* Change the font family */
 
}

/* Optional: Add hover effect to the text or the link */
.image-link-container:hover .image-text {
    background-color: rgba(0, 0, 0, 0);
    color: #cc1d10;
    font-family: 'Brush Script MT', cursive; /* Change the font family */
}