header > h1 {
  margin: 30px;
}

footer > p {
  margin: 30px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* This helps items wrap if needed */
  gap: 20px; /* Optional: adds spacing between items */
  padding: 10px;
}

.category-header-btn {
  text-decoration: none;
  color: green;
  margin: 10px;
  font-size: larger;
}

.category-header-btn:hover {
  text-decoration: underline;
}

#search-div {
  /* optional styling */
}

#category-div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* RESPONSIVE BREAKPOINT */
@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: flex-start; /* Or center, depending on your design */
  }

  #category-div {
    justify-content: flex-start;
  }

  .button-div-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .category-header-btn {
    margin: 5px 5px;
  }
}