body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Mukta', sans-serif; /* Apply the font to the entire document */
}

.full-screen-image {
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* Ensures the image covers the entire area without distortion */
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* Places the image behind other content */
  transition: opacity 0.5s ease-in-out; /* Smooth transition for opacity */
}

.overlay-image {
 position: absolute;
  width: 60px;
  height: 50px;
  z-index: 1; /* Ensure it is above the background image */
}

.hidden {
  display:none;
}

canvas {
  display: block;
}

h1 {
  color: white; /* Adjust color as needed */
  font-family: 'Mukta', sans-serif; /* Apply the font to the h1 element */
  font-weight: 700; /* Use bold weight */
  margin-bottom: 20px; /* Add some space below the h1 */
}

.navigate-button {
  padding: 10px 20px;
  font-size: 16px;
  font-family: 'Mukta', sans-serif;
  font-weight: 700;
  color: rgb(214, 214, 214);
  background-color: #254747; /* Button background color */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;

  top: 60vh; /* SYD: (you may want to change the position)Position it 50% from the top */
  left: 80vw; /* SYD: Position it 50% from the left */
  position: absolute; /* Syd: had to add this to make z index work */
  z-index: 0; /* Ensure it's behind canvas and 
                  above the image */

  transform: rotate(-29deg);
  
}

.navigate-button:hover {
  background-color: #689c94; /* lighter shade on hover */
}

/* Add styles for the next page button */
.TOMAT03S-button {
  padding: 10px 20px;
  font-size: 16px;
  font-family: 'Mukta', sans-serif;
  font-weight: 700;
  color: rgb(0, 0, 0);
  background-color: #ffee00; /* Button background color */
  border: none;
  border-radius: 10%; /* Make the button circular */
  cursor: pointer;
  transition: background-color 0.3s;
}

.TOMAT0ES-button:hover {
  background-color: #00ff95; /* Darker shade on hover */
}