/* 1. Purple accent everywhere */
:root {
  --color-accent: #7b68ee;
}

/* Links & buttons use accent */
a, a:visited {
  color: var(--color-accent);
}
button,
input[type="submit"],
input[type="button"],
.button {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* 2. Center timeline items */
.timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.timeline-item {
  width: 100%;
  max-width: 800px;
  text-align: center;
  margin: 0 auto;
}

/* 3. Center standalone images */
.timeline-item img {
  display: block;
  margin: 0.5rem auto 0;
}

/* 4. Size & center videos */
.timeline-video {
  max-width: 400px;
  width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: block;
  margin: 0.5rem auto 0;
}

/* 5. Pagination styling */
.pagination {
  text-align: center;
  margin: 2rem 0;
}
.pagination a,
.pagination strong {
  margin: 0 0.5rem;
  text-decoration: none;
}
.dashboard-buttons {
  text-align: center;
  margin: 2rem 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.dashboard-buttons .dashboard-btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #694ED9;   /* your brand purple */
  color: #fff;                 /* white text */
  text-decoration: none;
  border-radius: 4px;
  font-size: 1rem;
  transition: background-color 0.15s ease;
}

.dashboard-buttons .dashboard-btn:hover {
  background-color: #5a3ec0;
}