html {
  scroll-behavior: smooth;
}

.personal-timeline {
  margin: 2rem 0;
  padding: 0 0;
}
.timeline-container {
  position: relative;
}

/* Main timeline line - centered */
.timeline-container::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--primary);
  transform: translateX(-50%);
}

/* Timeline items */
.timeline-item {
  position: relative;
  margin-bottom: 3rem;
  display: flex;
  align-items: flex-start;
  min-height: 80px;
}

/* Timeline markers/dots - centered on the line */
.timeline-marker {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1rem;
  height: 1rem;
  background: var(--primary);
  border: 3px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
  z-index: 2;
  transform: translateX(-50%);
}t  

/* Year markers get special styling */
.timeline-year-marker .timeline-marker {
  background: var(--primary);
  box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
  width: 1.2rem;
  height: 1.2rem;
  top: -0.6rem;
}

/* Timeline content - base styles */
.timeline-content {
  background: var(--grey-light);
  border-radius: 6px;
  padding: 0.75rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
  color: var(--grey-default);
  flex: 1;
  max-width: 45%;
}

/* Year marker content - full width and centered */
.timeline-year-marker {
  justify-content: center;
}

.timeline-year-marker .timeline-content {
  text-align: center;
  padding: 1rem;
  margin: 0;
}

/* Timeline images */
.timeline-image {
  width: 100%;
  height: auto;
  margin: 1rem 0;
}

/* Typography */
h2.timeline-year {
  font-weight: bold;
  font-size: 2rem;
  margin: 0 0 0.25rem 0;
}

.timeline-title {
  font-size: 1.2rem;
  margin: 0 0 0.5rem 0;
  position: relative;
}

.timeline-anchor {
  color: var(--grey-default);
  text-decoration: none;
}

.timeline-anchor:hover {
  color: var(--primary);
}
.timeline-anchor:hover::after {
  position: absolute;
  visibility: hidden;
  content: '#';
  padding-left: 0.25rem;
  color: var(--primary);
}
.timeline-anchor:hover::after {
  visibility: visible;
}

/* Desktop alternating layout with CSS Grid */
@media (min-width: 600px) {
  /* Timeline entries use 2-column grid for content-image layout */
  .timeline-item:not(.timeline-year-marker) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }

  .timeline-item:not(.timeline-year-marker) .timeline-content {
    grid-area: content;
    max-width: none;
  }
  
  .timeline-item:not(.timeline-year-marker) .timeline-image-container {
    grid-area: image;
  }

  /* Left-side entries (even items) - content left, image right */
  .timeline-item:nth-child(even):not(.timeline-year-marker) {
    grid-template-areas: "content image";
  }
    
  /* Right-side entries (odd items) - image left, content right */
  .timeline-item:nth-child(odd):not(.timeline-year-marker) {
    grid-template-areas: "image content";
  }
  
  /* Images in grid layout */
  .timeline-image-container .timeline-image {
    margin: 0;
    width: 100%;
  }
}

/* Mobile layout - all items on the left */
@media (max-width: 600px) {
  .timeline-container::before {
    left: 1rem;
    transform: none;
  }
  
  .timeline-marker {
    left: 1rem;
    transform: translateX(-50%);
  }
  
  .timeline-item {
    padding-left: 2rem;
    flex-direction: column;
  }
  
  .timeline-year-marker .timeline-content {
    margin: 0.5rem;
  }

  .timeline-content {
    max-width: none;
    margin: 0 0.5rem;
  }
  
  .timeline-image-container {
    margin: 0 0.5rem;
  }
}