body, html {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Keep this to hide overflow */
    font-family: Arial, sans-serif;
    background-color: black; /* Black background */
    color: white; /* White text */
    height: 100vh; /* Full viewport height */
    width: 100vw; /* Full viewport width */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    position: relative; /* Ensure text is above canvas */
}

#canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw; /* Ensure canvas takes full width */
    height: 100vh; /* Ensure canvas takes full height */
    z-index: 0; /* Push the canvas behind the text */
}

h1 {
    color: white;
    font-size: 3rem;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Text shadow */
    z-index: 1; /* Ensure text is above canvas */
}

p {
    color: white;
    font-size: 1.5rem;
    margin: 10px 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Text shadow */
    z-index: 1; /* Ensure text is above canvas */
}


/* Position the hamburger menu button */
.menu {
    position: absolute;
    top: 20px; /* Distance from the top */
    left: 20px; /* Distance from the left */
    cursor: pointer;
    z-index: 2; /* Make sure it's above other elements */
}

.line {
    width: 30px; /* Width of the lines */
    height: 4px; /* Height of the lines */
    background-color: white; /* Color of the lines */
    margin: 5px 0; /* Space between the lines */
}

.menu-content {
    display: none; /* Hidden by default */
    position: absolute;
    top: 30px; /* Align just below the hamburger icon */
    left: 0; /* Align the menu to the left of the hamburger icon */
    height: auto; /* Auto height based on content */
    width: auto; /* Set the width based on content */
    min-width: 200px; /* Ensure there's a minimum width for the menu */
    background-color: rgba(0, 0, 0, 0.9); /* Black background */
    padding: 20px 0; /* Remove side padding and keep vertical padding */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5); /* Shadow effect */
    z-index: 1; /* Below the menu button */
    text-align: left; /* Ensure text inside is left-aligned */
}

.menu-content a {
    display: block; /* Stack menu options vertically */
    color: white; /* Text color */
    text-decoration: none; /* Remove underline */
    margin: 10px 0; /* Space between options */
    font-size: 1.2rem; /* Increase font size */
    padding-left: 20px; /* Align the text further if needed */
}

.menu-content a:hover {
    text-decoration: underline; /* Underline on hover */
}

.menu-content.show {
    display: block; /* Show the menu when toggled */
}