Update static/styles.css

static/styles.css

@@ -4,48 +4,24 @@ body {
     background-color: #f9f9f9;
 }
 
-h1 {
-    text-align: center;
-    margin-bottom: 30px;
-}
-
-.menu-category {
-    margin-bottom: 30px;
-}
-
-.menu-items {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-}
-
 .menu-item {
     border: 1px solid #ddd;
     border-radius: 8px;
     padding: 10px;
-    width: 200px;
+    width: 300px;
     background-color: white;
     text-align: center;
+    margin-bottom: 20px;
 }
 
-.menu-item img {
+.dish-image {
     width: 100px;
     height: 100px;
     object-fit: cover;
     margin-bottom: 10px;
 }
 
-.menu-item h3 {
-    font-size: 18px;
-    margin: 10px 0;
-}
-
-.menu-item p {
-    font-size: 16px;
-    color: #333;
-}
-
-.menu-item button {
+.add-button {
     background-color: #28a745;
     color: white;
     border: none;
@@ -55,14 +31,13 @@ h1 {
     font-size: 16px;
 }
 
-.menu-item button:hover {
+.add-button:hover {
     background-color: #218838;
 }
 
-/* Pop-Up Modal */
 /* Modal Window */
 .popup {
-    display: none; /* Hidden by default */
+    display: none;
     position: fixed;
     top: 50%;
     left: 50%;
@@ -76,30 +51,9 @@ h1 {
 }
 
 .popup.show {
-    display: block; /* Show when modal is triggered */
+    display: block;
 }
 
 .popup button {
     margin-top: 10px;
 }
-
-body {
-    overflow-y: scroll; /* Keep background scrollable */
-}
-
-/* Menu Item */
-.menu-item img {
-    width: 100px;
-    height: 100px;
-    object-fit: cover;
-}
-
-.add-button {
-    background-color: #28a745;
-    color: white;
-    border: none;
-    padding: 10px;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 14px;
-}