/* Ensure the timeline fits the viewport height and avoids URL bar issues */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Prevents scrolling */
}

#timeline-embed {
  width: 100%;
  height: 100vh; /* Occupies full height of the viewport */
  overflow: hidden; /* Prevents scrolling */
}

.burger-menu {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 30px;
  cursor: pointer;
  z-index: 1000; /* Ensure it stays on top */
  background: #333;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.menu-items {
  display: none;
  position: absolute;
  top: 50px;
  left: 10px;
  background: rgba(255, 255, 255, 1); /* Reduce translucency */
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); /* Change shadow */
  border: 3px solid rgba(0, 0, 0, 0.932); /* Add border */
  z-index: 1000; /* Ensure it stays on top */
  border-radius: 5px;
  overflow: hidden;
}

.menu-items button {
  display: block;
  width: 100%;
  padding: 10px 20px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #333;
  transition: background 0.3s, color 0.3s;
}

.menu-items button:hover {
  background: #f0f0f0;
  color: #000;
}

.tl-slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Aligns content to the top */
  align-items: flex-start; /* Aligns content to the left */
  width: 100%; /* Ensure the slide occupies full width */
  height: 100%; /* Ensure the slide occupies full height */
  box-sizing: border-box;
}

.tl-slide-content {
  width: 100%; /* Ensure the slide content occupies full width */
  height: 100%; /* Ensure the slide content occupies full height */
  padding: 0px !important; /* Remove padding */
  margin-top: 0; /* Remove any top margin */
}

.tl-text-content {
  width: 100% !important; /* Ensure text content occupies full width */
  text-align: left; /* Align text to the left */
  margin-top: 0; /* Remove any top margin */
  padding-left: 0 !important; /* Remove left padding */
}

.tl-headline-date {
  font-size: 40px !important; /* Increase font size for dates */
  padding-bottom: 20px; /* Add padding to the bottom */
  padding-left: 20px; /* Add padding to the left */
  word-wrap: break-word; /* Ensure long dates wrap to the next line */
  line-height: 1.2 !important; /* Increase line height to prevent overlap */
}

.tl-headline {
  text-align: left; /* Align title to the left */
}

/* Increase font size for slide navigation title */
.tl-timenav-item-title {
  font-size: 18px !important;
}

/* Responsive font sizes and padding */
@media (max-width: 600px) {
  .burger-menu {
    font-size: 24px;
    padding: 8px;
  }
  .menu-items {
    top: 40px;
    left: 5px;
  }
  .menu-items button {
    font-size: 14px;
    padding: 8px 16px;
  }
  .tl-slide {
    padding: 10px; /* Reduce padding for small screens */
  }
  .tl-headline-date {
    font-size: 18px !important; /* Smaller font size for small screens */
    padding-left: 30px;
  }
}

@media (min-width: 601px) {
  .tl-headline-date {
    padding-top: 30px;
  }
}