body,
h1,
h2,
h3,
p,
ul,
li {
  margin: 0;
  padding: 0;
}

/* Add a background gradient */
body {
  background-image: linear-gradient(45deg, #e0f5e0, #fff5e0);
  font-family: Arial, sans-serif;
}
@keyframes gradientAnimation {
  0% {
    background-color: #c1e6a1; /* Starting color (light green) */
  }
  25% {
    background-color: #f2f2f2; /* Color 1 (light gray) */
  }
  50% {
    background-color: #f7bd7f; /* Color 2 (light orange) */
  }
  75% {
    background-color: #f2f2f2; /* Color 3 (light gray) */
  }
  100% {
    background-color: #c1e6a1; /* Ending color (light green) */
  }
}

/* Apply the animation to the body */
body {
  animation: gradientAnimation 5s linear infinite; /* Adjust the duration as needed */
}

/* Navbar styles */
.navbar {
  background-color: #333;
  color: white;
  padding: 10px;
} /* Your existing CSS styles */

/* Add styles for the menu table here */
#menu-table {
  text-align: center;
  margin-top: 50px;
}

#menu-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

#menu-table th,
#menu-table td {
  padding: 10px;
  border: 1px solid #ccc;
}

#menu-table th {
  background-color: #f2f2f2;
}

#menu-table h2 {
  margin-top: 30px;
}

/* Your existing CSS styles */

#menu-container.centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Styles for the butler image */

.waiter-image {
  width: auto;
  height: 4em;
  margin-right: 2em; /* Increased margin to create space */
  vertical-align: middle;
  animation: zoomAnimation 5s ease-in-out;
}

/* Animation keyframes for zooming in */
@keyframes zoomAnimation {
  0% {
    transform: scale(2); /* Zoomed in to 200% */
  }
  100% {
    transform: scale(1); /* Back to original scale */
  }
}

.waiter-image {
  width: auto;
  height: 4em;
  margin-right: 2em;
  vertical-align: middle;
  animation: pulsateAnimation 3s infinite;
}

@keyframes pulsateAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

/* Add styles for the menu table here */
#menu-table {
  text-align: center;
  margin-top: 50px;
}

#menu-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

#menu-table th,
#menu-table td {
  padding: 10px;
  border: 1px solid #ccc;
}

#menu-table th {
  background-color: #f2f2f2;
}

#menu-table h2 {
  margin-top: 30px;
}
/* Menu Items  */

/* Style the menu items table */
.menu-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
}

/* Style the table header row */
.menu-table {
  width: 50%; /* Set the width to half of the page */
  margin: 0 auto; /* Center-align the table */
  align-items: left;
  border-collapse: collapse;
  border: 1px solid #ccc;
}

/* Style the menu items lists */
.menu-list {
  padding: 0;
  margin: 0;
  text-align: center;
  width: 100%; /* Make the menu items list fill the table cell */
}
.menu-list ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.menu-list li {
  background-color: #f2f2f2;
  padding: 10px;
  margin: 5px;
  border-radius: 4px;
}

.menu-list {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.menu-list ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.menu-list li {
  background-color: #f2f2f2;
  padding: 10px;
  margin: 5px;
  border-radius: 4px;
}
/* Styles for the Add Menu Item section */
/* Your existing CSS styles */

/* Centered display for #add-menu-item */
#add-menu-item {
  text-align: center;
}

/* Styles for the add menu table */
#add-menu-table {
  width: 60%; /* Adjust the width as needed */
  margin: 20px auto; /* Center-align the table */
  border-collapse: collapse;
}

#add-menu-table th,
#add-menu-table td {
  padding: 8px;
  border: 1px solid #ccc;
  text-align: center;
}

#add-menu-table th {
  background-color: #f2f2f2;
}
/* Media query for screens smaller than 768px */
@media (max-width: 768px) {
  /* ... (Existing styles for responsive layout) ... */
}
/* ... Your existing CSS styles ... */

/* Increase the size of the day selector */
#daySelector {
  font-size: 16px; /* Adjust the font size as needed */
  padding: 8px 16px; /* Adjust the padding as needed */
}

/* Styles for the styled button */
.styled-button {
  background-color: #007bff;
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.styled-button:hover {
  background-color: #0056b3;
}

/* ... Your existing CSS styles ... */

/* Media query for screens smaller than 768px */
@media (max-width: 768px) {
  /* Centered display for #menu-container */
  #menu-container.centered {
    align-items: flex-start;
  }

  /* Increase the size of the day selector */
  #daySelector {
    font-size: 14px; /* Adjust the font size as needed */
    padding: 6px 12px; /* Adjust the padding as needed */
  }

  /* Styles for the styled button */
  .styled-button {
    padding: 6px 12px;
  }

  /* Reduce the size of the table cells */
  #menu-table th,
  #menu-table td {
    padding: 8px;
  }
}
/* Your existing styles ... */

/* Styles for the send button */
.styled-button {
  font-size: 16px;
  background-color: rgb(64, 185, 64);
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  margin-top: 20px;
  align-items: center;
}

.styled-button:hover {
  background-color: #0056b3;
}

.centered {
  text-align: center;
}

.large-button {
  padding: 12px 24px; /* Increase padding to make the button larger */
}

/* Your existing styles ... */