.hidden {
    display: none;
}
header {
    background: linear-gradient(135deg, #4d3a058d, #964406); /* Gradient background */
    color: white; /* White text color */
    text-align: center; /* Center the text */
    padding: 20px 10px; /* Add padding for spacing */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    margin-bottom: 20px; /* Add spacing below the header */
}
header h1 {
    font-size: 1.5rem; /* Larger font size for the main title */
    font-weight: bold; /* Make the title bold */
    margin: 0; /* Remove default margin */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a shadow to the text */
}
header h2 {
    font-size: 1rem; /* Slightly smaller font size for the subtitle */
    font-weight: 200; /* Lighter font weight for the subtitle */
    margin: 10px 0 0; /* Add spacing above and below */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Add a subtle shadow to the text */
}
#timer {
    font-size: 1rem; 
    font-weight: bold; 
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    color: rgb(206, 200, 34); /* White text color */
    padding: 5px 7px; /* Add padding for spacing */
    border-radius: 5px; /* Rounded corners */
    display: inline-block; /* Keep it inline */
    margin-top: 5px; /* Add spacing above */
}
#start-game {
    background-color: #a09215; 
    color: white; /* White text */
    padding: 5px 5px; /* Add padding for size */
    font-size: 20px; /* Font size */
    border: none; /* Remove border */
    border-radius: 2px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    margin-top: 5px; /* Add spacing above */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effect */
}
#start-game:hover {
    background-color: #e3db61; /* Darker green on hover */
    transform: translateY(-2px); /* Slight lift on hover */
}
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('images/background.jpg');
    background-size: cover;
    background-position: center;
    color: #333;
    background-color: #f5f5f5;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 20px;
    padding: 20px;
    height: 100vh;
    overflow: hidden; /* Prevent scrolling the entire page */
}

.menu {
    grid-column: 1 / 2;
    background-color: rgba(249, 249, 249, 0.9); /* Translucent background */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-size: 3em; /* Smaller text size */
    overflow-y: auto; /* Add vertical scrollbar */
    max-height: 80vh; /* Limit the height of the menu */
}

.menu-category h3 {
    margin-top: 0;
}

.menu-item {
    margin: 5px 0;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.9); /* Translucent background */
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.menu-item:hover {
    background-color: rgba(234, 234, 234, 0.9); /* Translucent background */
}

.thumbnail {
    width: 30px;
    height: 30px;
    margin-right: 5px;
}

.total {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    background-color: rgba(255, 255, 255, 0.9); /* Translucent background */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    align-self: start;
    justify-self: end;
}

.bag {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    background-color: rgba(255, 255, 255, 0.9); /* Translucent background */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    align-self: start;
    justify-self: center;
}

.running-total {
    margin-top: 20px;
    font-size: 1.2em;
    font-weight: bold;
    margin: 10px 0;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.9); /* Translucent background */
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.play-again, .submit {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #e0b310;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.play-again:hover, .submit:hover {
    background-color: #a1c510;
}
#timer {
    font-size: 25px;
    font-weight: bold;
    color: #efebeb;
    margin: 10px 0;
}

#message {
    font-size: 1.5rem;
    margin: 5px 0;
    text-align: center;
}

#message.success {
    color: rgb(182, 174, 21);
}

#message.failure {
    color: red;
}
/* Style for the Submit button */
button.submit {
    background-color: #876605; /* Green background */
    color: white; /* White text */
    padding: 10px 20px; /* Padding for size */
    font-size: 1rem; /* Font size */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    margin-top: 10px; /* Add spacing */
}

button.submit:hover {
    background-color: #dce00f; /* Darker green on hover */
}

/* Style for the Start Game button */
button#start-game {
    background-color: #d5c514c6; /* Blue background */
    color: white; /* White text */
    padding: 10px 20px; /* Padding for size */
    font-size: 1rem; /* Font size */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    margin-top: 10px; /* Add spacing */
}

button#start-game:hover {
    background-color: #db7d11; /* Darker blue on hover */
}

/* General button styling */
button {
    font-family: Arial, sans-serif;
    font-weight: bold;
}

/* Style for the menu items */
.menu-category ul li {
    list-style: none; /* Remove bullet points */
    margin: 5px 0; /* Add spacing between items */
}

.menu-category ul li button {
    margin-left: 10px; /* Add spacing between text and button */
}
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 10px;
    }

    .menu, .bag, .total {
        grid-column: 1 / -1;
        max-height: none; /* Remove height restriction for smaller screens */
    }
}
footer {
    background-color: #4d3a05; /* Dark background */
    color: white; /* White text */
    text-align: center; /* Center the text */
    padding: 10px 0; /* Add padding for spacing */
    position: fixed; /* Fixed position at the bottom */
    bottom: 0; /* Align to the bottom */
    left: 0; /* Align to the left */
    width: 100%; /* Full width */
}
footer p {
    margin: 0; /* Remove default margin */
    font-size: 0.8rem; /* Smaller font size */
}
footer a {
    color: #e3db61; /* Link color */
    text-decoration: none; /* Remove underline */
}
footer a:hover {
    text-decoration: underline; /* Underline on hover */
}
footer a:visited {
    color: #e3db61; /* Visited link color */
}
footer a:active {
    color: #e3db61; /* Active link color */
}