body {
    margin: 0;
    overflow: hidden;
    background-image: url('start_bg.jpg'); /* Set background image */
    background-size: cover; /* Cover the entire screen */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent repetition of the image */
    height: 100vh; /* Ensure body height is 100% of viewport height */
    font-family: Arial, sans-serif; /* Font family for the entire body */
}

#menu-container {
    position: absolute; /* Fixed position to stay in place */
    bottom: 20%; /* Position it 20% from the bottom */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, 0); /* Translate to truly center horizontally */
    background: rgba(255, 255, 255, 0.829); /* Semi-transparent background for the frame */
    border-radius: 15px; /* Rounded corners for the frame */
    padding: 40px; /* Padding around the menu */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Shadow effect for depth */
    width: 65%; /* Set the width of the container */
    text-align: center; /* Center the text inside */
}

/* Hide menu when the game is active */
#menu-container.hidden {
    display: none; /* Hide the container */
}

#menu {
    color: rgb(0, 0, 0); /* Text color for the menu */
}

h1, h3 {
    margin: 0; /* Remove default margin */
    text-shadow: 5px 5px 8px rgb(255, 255, 255); /* Text shadow for headings */
}

p {
    margin: 20px 0; /* Add vertical spacing for paragraphs */
    font-size: 1.5rem; /* Increase font size for better readability */
    text-shadow: 2px 2px 8px rgb(255, 255, 255); /* Text shadow for headings */
}

.button {
    background: #FF6F61; /* Button background color */
    color: white; /* Button text color */
    border: none; /* Remove default border */
    padding: 15px 30px; /* Padding inside the button */
    margin: 10px; /* Margin around the button */
    border-radius: 8px; /* Rounded corners for buttons */
    cursor: pointer; /* Change cursor to pointer on hover */
    font-size: 1.5rem; /* Increase font size for buttons */
    transition: background-color 0.3s, transform 0.2s; /* Smooth transition for hover effects */
}

.button:hover {
    background: #FF4C3B; /* Darker shade on hover */
    transform: scale(1.1); /* Slightly enlarge button on hover */
}

.button:active {
    background: #FF3B2F; /* Even darker shade when active */
}

.instructions-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    z-index: 20; /* Ensure it is above other content */
    width: 80%; /* Responsive width */
    max-width: 500px; /* Max width for large screens */
    text-align: left; /* Align text to the left */
}

.instructions-content img {
    vertical-align: middle; /* Align images with text */
    margin-right: 10px; /* Space between image and text */
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}

.hidden {
    display: none; /* Hide elements with this class */
}

#game {
    display: none; /* Hide game section by default */
}

canvas {
    display: block; /* Display canvas as a block element */
    width: 100vw; /* Full width of the viewport */
    height: 100vh; /* Full height of the viewport */
}

#controls {
    position: fixed; /* Fixed position at the bottom */
    bottom: 20px; /* Distance from the bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Translate to truly center */
}


#gameOverContainer {
    position: fixed; /* Fixed position to overlay on the game */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Translate to truly center */
    background: rgba(255, 255, 255, 0.8); /* Light background for visibility */
    border-radius: 15px; /* Rounded corners */
    padding: 20px; /* Padding around the content */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Shadow for depth */
    text-align: center; /* Center the text inside */
    z-index: 15; /* Ensure it appears above other elements */
}

/* Hide the container by default */
.hidden {
    display: none; /* Hide the element */
}

.game-over-image {
    width: 100px; /* Set width of the image */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 15px; /* Spacing below the image */
}

#info {
    position: fixed; /* Fixed position for info display */
    top: 10px; /* Distance from the top */
    left: 10px; /* Distance from the left */
    color: #333; /* Text color */
    font-size: 20px; /* Font size for info text */
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    padding: 10px; /* Padding inside info box */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Shadow effect for info box */
}

#restart {
    position: fixed; /* Fixed position for restart button */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Translate to truly center */
}

@media (max-width: 600px) {
    #menu-container {
        position: fixed; /* Fixed position to overlay on the game */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Translate to truly center */
        width: 65%; /* Full width on small screens */
        height: 80%; /* Minimum height */
        max-height: 430px; /* Limit height */
        padding: 10px; /* Padding around the content */
    }

    #logo {
        width: 60%; /* Full width for the logo */
        height: 60%;
    }

    h1, h3 {
        margin: 0; /* Remove default margin */
        font-size: 95%;
    }
    
    p {
        margin: 10px 0; /* Add vertical spacing for paragraphs */
        font-size: 96%; /* Increase font size for better readability */ /* Text shadow for headings */
    }

    /* Instructions Window */
    #instructions-content {
        position: fixed; /* Position fixed for overlay */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Center it */
        width: 90%; /* Responsive width */
        max-width: 350px; /* Maximum width */
        height: 80%; /* Minimum height */
        max-height: 500px; /* Limit height */
        overflow-y: scroll; /* Add vertical scroll */
    }

    .button {
        padding: 8px 10px; /* Smaller padding */
        font-size: 90%; /* Adjust font size */
        width: 80%; /* Full width for buttons */
        max-width: 120px; /* Maximum width */
        margin: 10 auto; /* Center with margin */
    }
    #controls {
        display: flex;
        justify-content: space-between; /* Space between buttons */
        position: fixed; /* Fixed position at the bottom */
        bottom: 10px; /* Distance from the bottom */
        flex-direction: row; /* Ensure buttons are in a row */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Translate to truly center */
    }
    
    #info {
        font-size: 95%; /* Font size for info text */
   }
}

* {
    touch-action: manipulation;
}