html {
  min-height:100vh;
  scroll-padding-top: 60px;
}

body:focus-visible {
  outline: none;
}

body {
  color: black;
  background-image: url("/image-assets/background.png");
  background-repeat: repeat-y;
  background-size: cover;
  display: flex; /* Makes the body a flex container */
  flex-direction: column; /* Stacks children vertically (default is row) */
  align-items: center; /* Centers items horizontally along the cross-axis */
  justify-content: center; /* Centers items vertically along the main-axis */
  min-height: 100vh; /* Ensures the body takes at least the full viewport height */
  margin: 0; /* Remove default body margin */
  cursor: url("/image-assets/buzzing-bee.cur"), auto; /* Use local bee cursor with fallback */
}

h1 {
    text-align: center;
    font-family: "Pixelify Sans", sans-serif; /* Corrected font-family and added fallback */
    color: #0A400C;
    margin-bottom: 20px; /* Add some space below the title */
}

#frog-trigger-area {
    /* Set dimensions to be larger than the frog-container */
    width: 500px; /* Example: 50px larger than frog-container width */
    height: 500px; /* Example: 50px larger than frog-container height */
    
    /* Center the frog-container within this trigger area */
    display: flex;
    justify-content: center;
    align-items: center;

}

/* Your existing #frog-container (keep its original size) */
#frog-container {
    position: relative;
    width: 200px; /* Keep this the size of your visible frog */
    height: 200px; /* Keep this the size of your visible frog */
    overflow: visible;
}

#frog-normal,
#frog-open-mouth {
    position: absolute; /* Position both frogs relative to the container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%; /* Make the background image fill the div */
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.2s ease-in-out; /* Smooth transition for image changes */
}

#frog-normal {
    background-image: url("../image-assets/frog-normal-final.png");
    opacity: 1; /* Initially visible */
}

#frog-open-mouth {
    background-image: url("../image-assets/frog-mouth-open-final.png");
    opacity: 0; /* Initially hidden */
}

/* --- Tongue Styling --- */
#frog-tongue {
    position: absolute;
    top: 50%; /* Adjust this percentage based on your frog image */
    left: 75%; /* Adjust this percentage based on your frog image */

    width: 0px; /* Initially hidden (no length) */
    height: 10px; /* Base thickness of the tongue */
    background-color: red; /* Or use a tongue image */
    border-radius: 5px; /* Rounded edges for the tongue tip */
    transform-origin: 0% 50%; /* Crucial: Rotates and scales from the left edge (the base) */
    transition: none; /* JavaScript will handle movement, so no CSS transition here */
    z-index: 1; /* Ensure tongue is above the open mouth frog image */
    pointer-events: none; /* Let mouse events pass through */
    /* If you want a more complex tongue shape, use a background-image instead of background-color */
    /* background-image: url("image-assets/tongue.png"); */
    /* background-size: contain; */
    /* background-repeat: no-repeat; */
    mask-image: linear-gradient(to left, black 80%, transparent 99%);
    -webkit-mask-image: linear-gradient(to left, black 80%, transparent 99%); /* For Safari compatibility */
}


/* --- Hover Effects --- */
#frog-container:hover #frog-normal {
    opacity: 0; /* Hide normal frog on hover */
}

#frog-container:hover #frog-open-mouth {
    opacity: 1; /* Show open mouth frog on hover */
}

#frog-container:hover #frog-tongue {
    transform: translateY(0) rotateX(0deg);
}

#chattable{
    border: none; 
    width: 600px;
    height: 400px;
    background-color: #f0f8ff; 
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}

#music-player
{
    position: relative;
    border: none;
    border-radius: var(--window-radius);
    width: 1000px !important; 
    height: 100px; 
    background-color: transparent !important;
    font-family: var(--main-font);
    left: 0;
    bottom: 0; 
}

#footer-background-color {
    background-color: #819067;
    height: 50px;
    width: 100%; /* Ensures the footer spans the full width of the screen */
    position: fixed; /* Keeps the footer sticky at the bottom of the page */
    bottom: 0px;
    left: 0px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 40px;
    box-sizing: border-box;
    z-index: 100;
}

#chat-btn  {
    background-size: contain;
    background-image: url(/image-assets/chatroom-idle.gif);
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    border-width: 2px;
    border-style: none;
    padding: 15px 32px;
    width: 20vw;
    /* max-width: 140px; */
    min-width: 60px;
    height: 45px;
    /* min-height: 50px; */
}

@media (max-width: 700px) {
  #chat-btn {
    width: 30vw;
    max-width: 90px;
    padding: 10px 10px;
  }
  #footer-background-color {
    padding-right: 10px;
    height: 40px;
  }
}