.timeline {
	position: relative;
	left: 50px;
	width: 80%;
	margin-left: 5%;
}
.timeline-item {
	padding: 1rem 2rem;
	border-left: 2px dotted #484848;
	position: relative;
	list-style-type: none;
	--item-width: calc(100%);
}
.timeline-item::after {
	content: attr(data-date);
	position: absolute;
	right: calc(var(--item-width) + 40px);
	top: 16px;
	float: right;
	font-weight: 900;
	white-space: nowrap;
}
.timeline-item::before {
	content: "";
	border-radius: 50%;
	width: 20px;
	height: 20px;
	background-color: #242424;
	border: 4px solid #fafafa;
	position: absolute;
	left: -11px;
	top: 18px;
}
.timeline-item:first-of-type::before {
	background-color: #0eac4b;
}
@media only screen and (max-width: 800px) {
	.timeline .timeline-item::after {
		right: calc(var(--item-width) + 20px);
	}
}
@media only screen and (max-width: 800px) {
	.timeline-item {
		padding: 1rem;
	}
	.timeline-item::after {
		right: calc(var(--item-width) + 20px);
	}
}
