/* Background team image */
.bg-hero { 
  background-image: url('https://static.igem.wiki/teams/5253/header/medals.png');
  background-size: 35% auto; /* Ensure the whole image is visible */
  background-position: right center; /* Position image to the right */
  background-repeat: no-repeat;
  height: 300px; /* Height of the container */
  width: 100%; /* Full width */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
  .bg-hero {
      background-size: 50% auto; /* Make the image cover the full width */
      background-position: right bottom; /* Align to the bottom */
      height: 250px; /* Reduce height for smaller screens */
  }
}

@media (max-width: 480px) {
  .bg-hero {
      background-size: 40% auto; /* Ensure the image fully covers smaller devices */
      background-position: right center; /* Keep it centered and aligned at the bottom */
      height: 200px; /* Further reduce the height */
  }
} 

/* CSS for the title block */
.title-block h1 {
  color: #25336b; /* Replace with your desired color */
  font-size: 60px; /* Adjust as needed */
  font-weight: bold; /* Adjust as needed */

}


/* Center the tables within their containers */
.table-container {
  text-align: center; /* Center the content within this container */
  margin: 0 auto; /* Center the container itself within the parent */
  max-width: 100%; /* Ensure the container doesn't exceed the viewport width */
  margin-bottom: 2rem; /* Space between containers */
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Add a 5px solid border around each table */
.table {
  border: 5px solid #FFDE5A; /* Add a 5px solid border with the specified color */
  border-collapse: collapse; /* Ensure borders are displayed correctly */
  padding-right: 30px;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Ensure text in the tables is aligned to the left */
.table th, .table td {
  text-align: left;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}

/* Left-align the section headers */
.header {
  text-align: left;
}

/* Optional: Add border to improve readability */
.table th, .table td {
  border: 1px solid #ddd; /* Add border to table cells */
}

li {
  font-size: 15px;
  font-family: 'Avenir', 'Century Gothic', sans-serif;
}