body {
    background-color: #000;
    margin: auto;
}

/* Timeline Outer Container */
#timeline-outer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 800px;
    height: 650px;
    overflow: hidden;
    padding: 20px;
}

/* Fixed Timeline Line */
#timeline-line {
    position: absolute;
    left: 50%;
    width: 4px;
    height: 95%;
    background: transparent;
    border: 1.75px solid #d20c0d;
    box-shadow: 0 0 5px #fff, 0 0 10px #fff;
    transform: translateX(-50%);
    z-index: 0;
}

/* Scrollable Timeline Container */
#timeline-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 500px;
    height: 90%;
    overflow-y: auto;
    scrollbar-width: none; /* Hide scrollbar */
    -ms-overflow-style: none;
}

/* Hide scrollbar for WebKit browsers */
#timeline-container::-webkit-scrollbar {
    display: none;
}

/* Left & Right Sections */
#timeline-left, #timeline-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    font-family: "st", sans-serif;
    gap: 50px;
    position: relative;
}

#timeline-left {
    align-items: flex-end;
    padding-right: 20px;
}

#timeline-right {
    align-items: flex-start;
    padding-left: 20px;
}

/* Timeline Entry */
.timeline-entry {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

/* Timeline Date Styling */
.timeline-date {
    font-family: "st", sans-serif;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    padding: 5px;
    transition: all 0.3s ease;
    width: 250px;
    text-align: center;
    z-index: 2;
}

/* Date hover effect */
.timeline-date:hover {
    text-shadow: 0 0 10px #d20c0d;
}

/* Timeline Markers (Aligned Properly) */
.timeline-marker {
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
}

/* Adjust marker alignment */
#timeline-left .timeline-entry {
    justify-content: flex-end;
}

#timeline-left .timeline-marker {
    right: -15px;
}

#timeline-right .timeline-entry {
    justify-content: flex-start;
}

#timeline-right .timeline-marker {
    left: -15px;
}

/* Event Details Box */
.event-details {
    position: absolute;
    width: 250px;
    background: rgba(0, 0, 0, 0.9);
    box-shadow: 0 0 5px #fff, 0 0 10px #fff;
    color: #fff;
    font-family: "st", sans-serif;
    text-align: center;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: none;
    z-index: 3;
    padding: 20px;
}

/* Hide scrollbar for event box */
.event-details::-webkit-scrollbar {
    width: 0;
}

/* Ensure event boxes pop up on the opposite side */
.event-details.left {
    left: 55%;
}

.event-details.right {
    right: 55%;
}

/* Close Button */
.event-details .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    background: url('https://i.imgur.com/oOQv9J8.gif') no-repeat center center;
    background-size: contain;
    border: none;
    cursor: pointer;
}

/* Hide all dates except the selected one */
.timeline-container.showing-event .timeline-date {
    visibility: hidden;
}

/* Keep the selected date visible */
.timeline-container.showing-event .timeline-date.selected {
    visibility: visible;
}