/* style.css */
body {
    display: flex;
    justify-content: center;
    align-items: top;
    height: 100vh;
    color: white;
    font-family: 'Bungee';
    background-color: whitesmoke;
    background-image: url('images/bg6.png'); /* Path to your image */
    background-size: cover; /* This will ensure that the background covers the entire viewport */
    background-position: center; /* This centers the background image */
    background-repeat: no-repeat; /* This will prevent the image from repeating */
    background-attachment: fixed; /* This will make sure that the background is fixed when scrolling */
}

h1 {
    color: white;
    font-size: 48px;
}

button {
    background-color: black;
    color: white;
    font-size: 24px;
    font-family: 'Bungee';
    padding: 5px 40px;
    cursor: pointer;
    border: 1px solid whitesmoke;
}

button:hover {
    background-color: whitesmoke;
    color: black;
}

#game-container {
    text-align: center;
}

#gameCanvas {
    background-color: black;
    border-radius: 5px;
    margin-bottom: 20px;
}

#score, #lives {
    background-color: black;
    color: white;
    opacity: 0.9;
    margin-top: 10px;
}

#mazeBuilder {
    background-color: black;
    display: flex;
    flex-wrap: wrap;
    width: 840px; /* 20 spans * 40px + 40px border */
    height: 640px; /* 15 spans * 40px + 40px border */
    margin-bottom: 20px;
}

.square {
    width: 40px;
    height: 40px;
    border: 1px solid black;
    cursor: pointer;
    /* Add other styles like background color, border, etc., as needed */
}

.wall {
    background-color: blue;
}

.panel {
    background-color: black;
    opacity: 0.75;
    border-radius: 5px;
    padding: 10px 20px;
}