/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fdf6e3;
}

header {
  background-color: #f8e1e1;
  padding: 20px 0;
  text-align: center;
}

header h1 {
  margin: 0;
  font-size: 2rem;
  color: #4a6c7b;
}

nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}

nav ul li {
  margin: 0 10px;
}

nav ul li a {
  text-decoration: none;
  color: white;
  padding: 10px 20px;
  background-color: #f79b9b;
  border-radius: 3px;
}

main {
  padding: 20px;
}

/* Ideas Section: Horizontal by default */
section.ideas {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.ideas h2 {
  flex-basis: 100%;
  font-size: 1.8rem;
  color: #4a6c7b;
  margin-bottom: 20px;
}

/* Each Idea Box */
.idea {
  background-color: #4a6c7b;
  color: white;
  padding: 20px;
  flex: 1 1 calc(33.33% - 20px); /* Default: 3 items per row */
  text-align: center;
}

.idea img {
  width: 100px;
  height: 100px;
  margin: 0 auto 10px;
}

section.titles {
  margin-bottom: 20px;
}

.titles div {
  margin-bottom: 20px;
  background-color: #f79b9b;
  padding: 20px;
  text-align: center;
  color: white;
}

.links {
  background-color: #d5d5e3;
  padding: 20px;
}

.links ul {
  list-style: none;
  padding: 0;
}

.links ul li a {
  text-decoration: none;
  color: #f79b9b;
}

.links ul li {
  margin-bottom: 10px;
}

section.small-titles {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.small-titles div {
  flex: 1 1 calc(33% - 20px);
  background-color: #f79b9b;
  padding: 20px;
  text-align: center;
  color: white;
}

footer {
  background-color: #f8e1e1;
  padding: 10px 0;
  text-align: center;
}

/* Media Queries for Responsiveness */
@media (max-width: 1024px) {
  /* Ideas Section Adjusts to 2 items per row */
  .idea {
    flex: 1 1 calc(50% - 20px);
  }
}

@media (max-width: 768px) {
  /* Ideas Section Adjusts to 1 item per row */
  .idea {
    flex: 1 1 100%;
  }

  /* Navigation buttons stack vertically */
  nav ul {
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

  nav ul li {
    margin: 10px 0;
  }
}