.timeline { text-align: left; min-width: 90svw; max-width: 90svw; }

.timeline > ul { list-style-type: none; border-left: 2px solid var(--color-on-background); padding: 10px 5px; }
.timeline > ul > li { padding: 20px; position: relative; cursor: pointer; transition: .5s; }
.timeline > ul > li:before { position: absolute; content: ''; width: 10px; height: 10px; background-color: #34ace0; border-radius: 50%; left: -11px; top: 28px; transition: .5s; }
.timeline > ul > li:hover { background-color: #071f2a; }
.timeline > ul > li:hover:before { background-color: #0F0; box-shadow: 0px 0px 10px 2px #0F0; }
.timeline > ul > li span { display: inline-block; background-color: var(--color-on-background); border-radius: 5px; padding: 5px 10px; font-size: 15px; text-align: center; }
.timeline > ul > li .content h3 { color: var(--color-accent); padding: 5px 0; margin: 0; }
.timeline > ul > li .content p { padding: 0px; }
.timeline > ul > li .content ul { color: #ccc; list-style: square; font-size: 15px; }
.timeline > ul > li .content ul li { margin: 0 0 10px 20px; }
.timeline > ul > li .content ul li strong { font-weight: normal; color: #fff; }

@media (max-width: 300px) { .timeline { width: 100%; padding: 30px 5px 30px 10px; }
  .timeline ul li .content h3 { color: #34ace0; font-size: 15px; } }