/* General body and background setup */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Prevents scrolling */
    font-family: sans-serif;
}

.background-image {
    position: fixed; /* Makes the image static and not scrollable */
    top: 0;
    left: 0;
    width: 100vw; /* 100% of viewport width */
    height: 100vh; /* 100% of viewport height */
    object-fit: cover; /* Ensures the image covers the screen without distortion */
    z-index: -1; /* Puts the background behind all other content */
}

/* Character image styling */
.character-image {
    position: absolute;
    width: 20vw; /* Approximately 1/5 of the screen width */
    height: auto;
    top: 50%; /* Position from the top */
    right: 5vw; /* Position from the right */
    transform: translateY(-50%); /* Vertically centers the image perfectly */
}

/* Container for the text and buttons */
.interaction-container {
    position: absolute;
    top: 50%;
    /* Positioned to the left of the character image */
    right: 28vw; /* (character image width of 20vw + its right margin of 5vw + 3vw spacing) */
    transform: translateY(-50%);
    text-align: center;
    max-width: 350px;
}

/* Text styling */
.interaction-container p {
    font-family: 'Indie Flower', cursive; /* A playful, "funny" font */
    font-size: 2.5em; /* Large and readable */
    color: white;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7); /* Adds depth and readability */
    margin-bottom: 20px;
}

/* Button container */
.button-container {
    display: flex;
    justify-content: center;
    gap: 20px; /* Space between the buttons */
}

/* Styling for the button images */
.button-container img {
    width: 100px;
    transition: transform 0.2s ease-in-out; /* Smooth hover effect */
}

.button-container a:hover img {
    transform: scale(1.15); /* Makes the button slightly larger on hover */
}

/* Hides the default audio player controls if you only want background music */
audio {
    position: fixed;
    bottom: 10px;
    left: 10px;
    opacity: 0.5;
}