/* Reset some default styles */
body, h1, p {
    margin: 0;
    padding: 0;
}

/* Global styles */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    background: linear-gradient(to bottom, #FFD700 0%, #FFD700 30%, #8B4513 30%, #8B4513 70%, #FFD700 70%, #FFD700 100%);
    background-size: 100% 100%;
    background-attachment: fixed;
}

/* Lunch container */
.lunch-container {
    margin-top: 50px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5); /* Adjust the alpha value as needed */
    padding: 10px;
    position: absolute;
    width: 100%;
    z-index: 1; /* Set a higher z-index value for both lunch containers */
}

#lunch-display-1 {
    font-size: 46px;
    color: #333;
    font-weight: bold;
    top: 0; /* Position at the top of the page */
}

/* Styles for lunch-display-2 at the bottom */
#lunch-display-2 {
    font-size: 46px;
    color: #333;
    font-weight: bold;
    bottom: 0; /* Position at the bottom of the page */
    z-index: 9999; /* Set a high z-index value to ensure it's displayed above other elements */
}


/* Cheeseburger container */
.cheeseburger-container {
    position: relative; /* Change to relative positioning */
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 0; /* Set a lower z-index value for cheeseburger container */
}

/* Container for dynamically generated cheeseburgers */
.cheeseburgers {
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: 1; /* Set a higher z-index value to ensure cheeseburgers are above other elements */
}

/* Cheeseburger images */
.cheeseburger {
    position: absolute;
    animation: floatCheeseburger 10s infinite;
    max-width: 100px;
    /* Randomly position each cheeseburger */
    left: calc(100% * var(--random-x));
    top: calc(100vh * var(--random-y));
}

/* Randomly generate positions for each cheeseburger */
.cheeseburger:nth-child(1) {
    --random-x: 0.1; /* Adjust as needed */
    --random-y: 0.2; /* Adjust as needed */
}

.cheeseburger:nth-child(2) {
    --random-x: 0.4; /* Adjust as needed */
    --random-y: 0.6; /* Adjust as needed */
}

.cheeseburger:nth-child(3) {
    --random-x: 0.7; /* Adjust as needed */
    --random-y: 0.3; /* Adjust as needed */
}

/* Keyframes for cheeseburger animation */
@keyframes floatCheeseburger {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-50vh) rotate(360deg);
    }
    100% {
        transform: translateY(0) rotate(720deg);
    }
}