/* mobile.css */
@media (max-width: 768px) {
    body {
        background-size: contain;
        background-position: top center;
    }

    .container {
        margin-top: 400px; /* Increased margin to ensure controls are below the logo */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    input[type="text"], button {
        width: 90%; /* Ensures inputs and buttons take up full width */
        margin: 10px auto;
    }

    h1, .container label {
        font-size: 24px;
        text-align: center;
    }

    /* Styling for the audio button */
    #mute-button {
        width: 50px; /* Set a fixed width */
        height: 50px; /* Set a fixed height */
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%; /* Make it circular */
        overflow: hidden;
        padding: 0;
        position: fixed; /* Position it fixed for mobile accessibility */
        bottom: 20px; /* Adjust positioning for mobile view */
        right: 20px; /* Adjust positioning for mobile view */
        background-color: #007BFF; /* Optional: background color */
        color: #FFFFFF; /* Optional: icon color */
        z-index: 2; /* Ensures it appears above other content */
    }

    /* Styling for the hamburger menu */
    .hamburger {
        position: fixed;
        top: 20px; /* Adjust as needed for alignment */
        right: 20px; /* Adjust as needed for alignment */
        z-index: 3; /* Ensures the hamburger menu appears above other elements */
        cursor: pointer;
    }
}