body {
  display: relative;
  background-repeat: no-repeat; /* Prevents repeating the image */
  background-attachment: fixed; /* Keeps the background fixed when scrolling */
  background-size: cover;

  background-image: url(resources/background-3.gif);
 }

 #window {
  display: relative;
  top: 250px; /* Adjust to your needs */
  left: 400px;
  height: 800px;
  width: 1200px; 
  margin: 100px; 
  margin-left: 240px; /* Adds extra spacing */
  pointer-events: none;
}
  
#welcome {
  position: absolute;
  top: 250px;
  left: 770px; /* Center horizontally by shifting it by 50% */
  width: 562px;
  height: 562px;
  z-index: 1;
  pointer-events: none;
  background-color: rgba(25, 46, 165, 0.5); /* added background color for visibility */
  color: black; /* ensure text color is visible */
  padding: 10px;
  font-family: "Jersey 10", serif;
  font-weight: 400;
  font-size: 40px;
  
  /* Center the text */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center; /* Ensure text inside is centered */
}

 #displayPetName {
  position: absolute;
  top: 100px;
  left: 300px;
  font-size: 40px; font-weight: bold; color: white;
  z-index: 10;
  font-family: "Jersey 10", serif;
  font-weight: 400;
  font-size: 40px;
 }
 
 .character {
  position: absolute; /* Ensures image is visible */
  top: 250px; /* Adjust to your needs */
  left: 320px;
  width: 400px; /* Temporarily set for visibility */
  height: auto;
  z-index: 10;
  
}

.shape {
  position: absolute;
  top: 250px;
  left: 320px;
  width: 400px;
  height: auto;
  z-index: 10;
}

.evolved {
  position: absolute; 
  position: absolute;
  top: 250px;
  left: 320px;
  width: 400px;
  height: auto;
  z-index: 10; /* Ensure it's above other elements */
}


#frame {
  position: absolute;
  top: 250px;
  left: 320px;
  width: 400px;
  height: 400px;
  z-index: 11;
  pointer-events: none;
}
#heart{
  position: absolute;
  top: 660px;
  left: 320px;
  width: 50px;
  height: 50px;
  z-index: 11;
  pointer-events: none;
}


#frame2 {
  position: absolute;
  top: 250px;
  left: 770px;
  width: 600px;
  height: 600px;
  z-index: 11;
  pointer-events: none;
}

#statusContainerWrapper {
  position: absolute;
  top: 660px;
  left: 380px;
  width: 340px; /* Same width for both */
  height: 50px; /* Same height for both */
}

/* Heart bar on top of the status bar and status container */
#heartbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px; /* Match the width of the wrapper */
  height: 50px; /* Match the height of the wrapper */
  z-index: 12; /* Highest z-index to ensure it's above both status elements */
  overflow: hidden; /* Ensure any overflow is hidden */
}

/* Ensure the image fits within the heartbar */
#heartbar img {
  width: 100%; /* Make the image fill the width of the container */
  height: 100%; /* Make the image fill the height of the container */
  object-fit: cover; /* Ensures the image fills the space without distorting */
}

/* Status container behind the heartbar */
#statusContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 50px;
  background-color: #ddd;
  border-radius: 15px;
  z-index: 10; /* Lower z-index to be behind the heartbar */
}

/* Status bar behind the status container */
#statusBar {
  height: 50px; /* Set a fixed height for the red bar */
  width: 0%; /* Start with no width */
  background-color: #dd2121;
  transition: width 0.3s; /* Smooth transition */
  z-index: 5; /* Ensure the red bar appears behind the status container */
  position: absolute; /* Position it inside the statusContainer */
}

#statusBarContainer {
  position: absolute;
  height: 100%; /* Ensure it takes the full height of its container */
}

#hearts {
  display: none;
  position: absolute;
  position: absolute;
  top: 250px;
  left: 320px;
  width: 400px;
  height: 400px;
  z-index: 14;
}


#play, #feed {
  background-color: darkblue;
  position: absolute;
  width: 400px;
  height: 50px;
  color: white;
  font-family: "Jersey 10", serif;
  font-weight: 400;
  font-size: 40px;
  box-shadow: 10px 10px #152238;
  transition: transform 0.2s ease-out;
}

#play {
  top: 800px;
  left: 320px;
}

#feed {
  top: 730px;
  left: 320px;
}

#play:hover, #feed:hover {
  transform: translateY(-5px);
}

#skillCheckCanvas,#board {
  background-color: #Fed8b1;
  position: absolute;
  top: 250px;
  left: 770px;
  width: 600px;
  height: 600px;
  z-index: 2;

}

#board
{background-color: lightblue;
  position: absolute;
  top: 250px;
  left: 770px;
  width: 600px;
  height: 600px;
  z-index: 1;


}
#dumplingBoard
{
  background-color: 	#ffecf2;
  position: absolute;
  top: 250px;
  left: 770px;
  width: 600px;
  height: 600px;
  z-index: 1;


}