/* 1. The Background */
body {
  background-color: #4a3737; /* Dark cocoa color from the image */
  background-image: url('your-cloud-pattern.png'); /* If you have a pattern */
  font-family: 'Segoe UI', sans-serif;
  display: flex;
  justify-content: center;
  padding: 50px;
}

/* 2. The Centered Container */
.main-container {
  max-width: 900px;
  background-color: #f8ead6; /* Cream color */
  border-radius: 30px;
  padding: 20px;
  border: 5px solid #d4a373; /* Subtle border */
}

/* 3. The Navigation Buttons */
nav ul {
  display: flex;
  list-style: none;
  gap: 10px;
  justify-content: center;
}

.nav-btn {
  text-decoration: none;
  background: white;
  padding: 10px 20px;
  border-radius: 15px;
  color: #a67c52;
  font-weight: bold;
  border-bottom: 4px solid #d4a373; /* Gives it a 3D button look */
}

.nav-btn:hover {
  background: #fff5e6;
  transform: translateY(2px);
}