* {
	margin:0;
	padding:0;
	box-sizing: border-box;
}
body {
  background-color:#fff;
  color:#4d4c59;
  font-family: "PT Serif",Georgia,Cambria,"Times New Roman",Times,serif;
}

/* Back & Home navigation */
.history-nav {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  background: rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #eee;
}
.history-nav .nav-btn {
  display: inline-block;
  padding: 12px 20px;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s, transform 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.history-nav .nav-back {
  background: #6497b1;
}
.history-nav .nav-back:hover {
  background: #7ab0d0;
  transform: translateY(-1px);
}
.history-nav .nav-home {
  background: #2d5a3d;
}
.history-nav .nav-home:hover {
  background: #3d7a52;
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .history-nav {
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 10px;
  }
  .history-nav .nav-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}
h3{
	font-family: sans-serif;
}
.container {
	max-width:900px;
	margin:50px auto;
}
.timeline{
	position:relative;
	display:flex;
	flex-direction:column;
	list-style:none;
	padding-top: 20px;
	padding-bottom: 20px;
}
/* the timeline's center vertical line */
.timeline:before{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	left:50%;
	width: 1px;
	background-color: #ccc;
}
.timeline li{
	border-top:1px solid #ccc;
	position:relative;
	width:50%;
	min-height:100px;
	margin-bottom:20px;
	padding: 20px 40px;
	text-align: right;
	transition:.3s;
	opacity:0;
	transform: translateX(-10%);
}
/* the rounded mark on each timeline item */
.timeline li:before {
	content:"";
	width: 10px;
	height: 10px;
	position: absolute;
	top: 0;
	right: 0;
	background: #ccc;
	border-radius:50%;
	box-sizing:border-box;
	transform: translate(50%,-50%);
}
.timeline h3 {
	font-size:28px;
	margin-bottom: 10px;
}
.timeline p {
  font-size: 20px;
  line-height: 28px;
}
.timeline li:nth-child(2n) {
	align-self: flex-end;
	text-align: left;
	transform: translateX(10%);
}
.timeline li:nth-child(2n):before {
	left: 0;
  transform: translate(-50%,-50%);
}
.timeline li.visible {
	opacity:1;
	transform:translateX(0);
}