html {
  background-color: rgb(247, 235, 213);
}

/* Define styles for the custom header */
.custom-header {
  background-color: rgb(159, 95, 51);
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

/* Style for the header links container */
.header-links {
  display: flex;
  align-items: center;
}

/* Style for each individual header link */
.header-link {
  display: inline-block;
  margin-right: 1rem;
  padding: 1rem;
}

/* Style for the hamburger menu container */
.hamburger-menu {
  display: none; /* Initially hide the hamburger menu */
  cursor: pointer;
}

/* Style for the individual bars in the hamburger menu icon */
.bar {
  width: 25px;
  height: 3px;
  background-color: #fff;
  margin: 6px 0;
}

/* Media query for responsive design - screens with a width up to 768px */
@media only screen and (max-width: 768px) {
  /* Adjust styles for header links on smaller screens */
  .header-links {
    display: none; /* Hide box elements on smaller screens */
    flex-direction: column;
    position: absolute;
    top: 3rem;
    left: 0;
    background-color: rgb(159, 95, 51);
    width: 100%;
  }

  /* Show header links on click for smaller screens */
  .header-links.show {
    display: flex;
  }

  /* Adjust styles for individual header links in mobile view */
  .header-link {
    margin: 0; /* Remove margin between links in mobile view */
  }

  /* Display the hamburger menu on smaller screens */
  .hamburger-menu {
    display: block;
  }

  .table-container {
    overflow-x: auto;
  }

}