/* css styles */

/* Hero container */
.hero {
  width: 100%;
  height: 100vh;         
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;         
  display: block;
}

table {
  border-collapse: collapse;
  font-size: 0.95em;
}

table th,
table td {
  padding: 6px 10px;
  text-align: center;
}

table thead th {
  border-bottom: 1.5px solid #333;
}

table tbody tr {
  border-bottom: 1px solid #ddd;
}

.label-color {
  color: #00a3a9; 
  font-weight: 600;
}

.title-hero {
  text-align: center;
  margin: 5rem auto 4rem;
  max-width: 1100px;
}

.title-hero p {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #6dc5fb;
  margin-bottom: 0.8rem;
}

.title-hero h1 {
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}

.hero-authors {
  margin-top: 2rem;
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 0.8rem;
  color: #ffffffe2;
  font-style: italic;
}

.hero-description {
  margin-top: 1.8rem;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #b2b2b2;
  max-width: 900px;
}

figcaption {
  font-size: 1.1em;
  font-weight: 400;
}

figcaption + p em {
  font-size: 0.1em;
  color: #555;
}

/* itables / DataTables on dark themes (DT v2) */
.dt-container,
.dt-container label,
.dt-container .dt-info,
.dt-container .dt-length,
.dt-container .dt-search {
  color: #e6e6e6 !important;
}

.dt-container select,
.dt-container input,
.dt-container .dt-length select,
.dt-container .dt-search input {
  color: #e6e6e6 !important;
  background-color: #1f1f1f !important;
  border: 1px solid #f7c31a !important;
}

/* Ensure dropdown options are readable too */
.dt-container select option {
  color: #e6e6e6 !important;
  background-color: #1f1f1f !important;
}