/* 1. Center the entire content block vertically and horizontally on the page */
        body, html {
            height: 100vh;
            margin: 0;
            display: flex;
            justify-content: center; /* Center Horizontal */
            align-items: center;     /* Center Vertical */
            background-image: url('pic/DSC_3619.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-color: #f8d50f07;
            font-family: 'Kantumruy Pro', sans-serif;
            overflow-x: hidden; /* Hide horizontal scroll if image is wider than screen */
        }

        /* 2. Container for Image and Text */
        .content-wrapper {
            position: relative;
            width: 100%; /* Take full width */
            text-align: center; /* Ensures image inside (display: block + margin auto) centers horizontally */
        }

        /* 3. Image Style: Fit Horizontally ONLY (width: 100%, height: auto) */
        .content-wrapper img {
            width: 100%;
            height: auto; /* Auto height maintains aspect ratio */
            display: block;
            margin: 0 auto; /* Centers image horizontally if wrapper has defined width */
            max-width: 800px; /* Optional: Stops image from getting too large on huge screens */
        }

        /* 4. P1 Style - Positioned in the absolute middle of the image */
        p1 {
            position: absolute;
            top: 66%;
            left: 50%;
            transform: translate(-50%, -50%); /* The secret to perfect middle centering */
            z-index: 10;
            
            /* Text Styling */
            font-family: "Bokor", system-ui;
            font-weight: 400;
            font-size: 28px;
            /*font-weight: bold;*/
            color: 	#B76E79;
            text-shadow: 2px 2px 10px rgba(240, 68, 68, 0.432);
            white-space: nowrap;
            pointer-events: none; /* Click goes through to the link */
            
            /* Animation applied */
            animation: p1Pulse 2s infinite ease-in-out;
        }

        /* 5. Zoom In-Out Animation for P1 ONLY */
        @keyframes p1Pulse {
            0%, 100% {
                transform: translate(-50%, -50%) scale(1);
            }
            50% {
                transform: translate(-50%, -50%) scale(1.15);
            }
        }

        /* Mobile adjustment */
        @media (max-width: 600px) {
            p1 { font-size: 18px; }
        }

        img {
  animation: appearFromCenter 3s ease-out forwards;
  /* Start invisible and small */
  opacity: 0;
  transform: scale(0);
}

@keyframes appearFromCenter {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#guide-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
  text-align: center;
  transition: opacity 0.5s ease-in-out;
  z-index: 1000;
}

/* Initially hidden using opacity and pointer-events to prevent interaction */
.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Class to show the figure */
.visible {
  opacity: 1;
  pointer-events: auto;
}

#guide-container {
    font-family: "Bokor", system-ui;
  /* Ensure the container isn't white; it needs to be transparent or have a color */
  background: transparent; 
}

#guide-figure {
  width: 150px;
  height: auto;
  /* Use 'multiply' for white backgrounds */
  mix-blend-mode: multiply; 
  /* IMPORTANT: Add this filter to help clean up 'off-white' edges */
  filter: contrast(120%) brightness(110%);
}