/* Global Styles for the body */
body {
  font-family: 'Press Start 2P', cursive; /* Retro font for a playful, Mario-like aesthetic */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  line-height: 1.6; /* Line height for readability */
  background-color: #5c94fc; /* Sky blue background color, reminiscent of Mario's world */
  color: #000; /* Default text color is black */
}

/* Header styles */
header {
  background: url('images/mario_skybox.gif') center/cover; /* Background image for Mario's skybox, centered and covering the area */
  background-repeat: repeat-x; /* Repeat the background image horizontally */
  background-size: 30%; /* Background image size is set to 30% */
  color: #fff; /* White text color */
  padding: 4em 1.5em; /* Padding for top and bottom, and side margins */
  text-align: center; /* Center align text */
  text-shadow: 2px 2px #000; /* Black text shadow for better readability */
}

/* Navigation and footer styles */
nav, footer {
  background: linear-gradient(to right, #0099ff, #0073e6); /* Gradient background with Mario-inspired blue shades */
  color: #fff; /* White text color */
  padding: 1.5em; /* Padding around navigation and footer */
  text-align: center; /* Center align text */
  text-shadow: 2px 2px #000; /* Black text shadow for clarity */
}

/* Navigation menu list styling */
nav ul {
  list-style: none; /* Remove default list styling */
  padding: 0; /* Remove default padding */
  display: flex; /* Flexbox for horizontal layout */
  justify-content: center; /* Center align items */
  gap: 2em; /* Space between items */
  margin: 0; /* Remove default margin */
}

/* Navigation links styling */
nav a {
  color: #fff; /* White text color */
  text-decoration: none; /* Remove underline */
  font-weight: bold; /* Bold text */
  font-size: 0.85em; /* Slightly smaller font size */
}

/* Main content area padding */
main {
  padding: 2em; /* Padding around the main content */
}

/* Section margins */
section {
  margin-bottom: 2em; /* Bottom margin to separate sections */
}

/* Menu item grid layout */
.menu-items {
  display: flex; /* Flexbox for menu item layout */
  flex-wrap: wrap; /* Allow items to wrap */
  gap: 2em; /* Space between items */
  justify-content: center; /* Center align items */
}

/* Individual menu item styles */
.menu-item {
  background-color: #ffd34e; /* Bright yellow background for a "block" effect */
  border: 3px dashed #ffcc00; /* Dashed border for a playful touch */
  border-radius: 15px; /* Rounded corners */
  padding: 1em; /* Padding inside each menu item */
  width: 250px; /* Fixed width for each item */
  box-shadow: 4px 4px 0 #000; /* Black shadow for depth */
  text-align: center; /* Center the text within the item */
}

/* Menu item image styles */
.menu-item img {
  width: 100%; /* Make images take up full width of the container */
  height: auto; /* Keep the aspect ratio of the image */
  border-radius: 10px; /* Rounded corners for images */
}

/* Form styling */
form {
  display: flex; /* Flexbox layout for form elements */
  flex-direction: column; /* Stack form elements vertically */
  gap: 1em; /* Space between form elements */
  max-width: 600px; /* Maximum width of the form */
  margin: auto; /* Center the form horizontally */
}

/* Input, textarea, button, and select fields styling */
input, textarea, button, select {
  padding: 1em; /* Padding for better spacing inside fields */
  font-size: 1em; /* Standard font size for inputs */
  border-radius: 8px; /* Rounded corners for inputs */
  border: 2px solid #ffcc00; /* Yellow border */
  background-color: #fff8dc; /* Light creamy background color */
  box-shadow: 2px 2px #aaa; /* Light shadow for depth */
}

/* Button styling */
button {
  background-color: #e52521; /* Mario red for the button background */
  color: white; /* White text color */
  border: none; /* No border for the button */
  font-weight: bold; /* Bold text */
  font-size: 1em; /* Standard font size */
  box-shadow: 2px 2px #000; /* Black shadow for depth */
  transition: transform 0.2s; /* Smooth scaling transition on hover */
}

/* Button hover effect */
button:hover {
  background-color: #bf1d1a; /* Darker red on hover */
  transform: scale(1.05); /* Slightly enlarge the button when hovered */
}

/* Confirmation message styles */
#confirmation {
  text-align: center; /* Center align the confirmation message */
  font-weight: bold; /* Bold text */
  margin-top: 1em; /* Top margin for spacing */
  color: #00cc00; /* Green color for the confirmation message */
}

/* Import custom font (Press Start 2P) */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');