:root {
    --clr-dk: #9223DB;
    --clr-lt: #fff;
    --clr-tlt: #333;
    --bias: 3px;
}

main {
    overflow: hidden;
}
main > div {
    padding-bottom: 0;
    width: 100%;
}
.timeline {
    padding-top: 20px;
    margin: 0 auto;
    position: relative;
    width: 80%;
}
.timeline ul {
    list-style: none;
}
.timeline ul li {
    color: var(--clr-tlt);
    padding: 1.25em;
    border-radius: .25em;
    margin-bottom: 1.25em;
    /* border: var(--bias) solid var(--clr-tlt); */
}
.timeline li:nth-child(even) {
    color: #fff;
    background: var(--clr-dk);
    /* border-color: var(--clr-lt); */
}
.timeline li:nth-child(odd) {
    background: var(--clr-lt);
}
.timeline ul li:last-child {
    margin-bottom: 0;
}
.timeline-content h2 {
    font-size: clamp(18px, 1.8vw + 1px, 24px);
    font-family: sans-serif;
    letter-spacing: .1em;
    color: var(--clr-tlt);
    margin-bottom: .2em;
}
.timeline-content:nth-child(even) h2 {
    color: #fff;
}
.timeline-content p {
    font-size: clamp(18px, 1.8vw + 1px, 24px);
    font-weight: 500;
    line-height: 2em;
    letter-spacing: .1em;
}

.timeline-content {
    box-shadow: 0 0 10px -2px #999;
}

.timeline-content p::before {
    content: '- ';
}

.last {
    position: relative;
    height: 10vh;
    width: 100%;
}
@media (min-width: 768px) {
    main > div {
        padding: 2rem 1rem;
    }
    .timeline {
        padding-top: 50px;
    }
    .timeline::before {
        content: '';
        position: absolute;
        height: 100%;
        width: var(--bias);
        left: 50%;
        transform: translateX(-50%);
        background: var(--clr-tlt);
    }
    .timeline ul li {
        width: 50%;
        margin-bottom: 3em;
        position: relative;
        transition: 0s;
        border: var(--bias) solid var(--clr-tlt);
    }
    .timeline ul li:nth-child(odd) {
        float: left;
        clear: right;
        border-radius: .5em;
        border-top-right-radius: 0;
        transform: translateX(-30px);
    }
    .timeline ul li:nth-child(even) {
        float: right;
        clear: left;
        border-radius: .5em;
        border-top-left-radius: 0;
        transform: translateX(30px);

        background: #fff;
        color: var(--clr-tlt);
    }
    .timeline ul li::after {
        content: '';
        position: absolute;
        height: 20px;
        width: 20px;
        background: var(--clr-tlt);
        border-radius: 50%;
        top: 0;
        z-index: 1;
        transition: 0s;
    }
    .timeline ul li:nth-child(odd)::after {
        transform: translate(50%, -50%);
        right: calc(-30px - var(--bias));
    }
    .timeline ul li:nth-child(even)::after {
        transform: translate(-50%, -50%);
        left: calc(-30px - var(--bias));
    }
    .timeline ul li:hover {
        background: var(--clr-dk);
        color: #fff;
        border-color: var(--clr-dk);
    }
    .timeline ul li:hover::after {
        background: var(--clr-dk);
    }
    .timeline ul li:hover .year {
        color: var(--clr-dk);
    }
    .timeline-content h2 {
        position: absolute;
        display: inline-block;
        top: -1.5em;
        height: 2em;
        margin-bottom: 0;
    }
    .timeline-content:nth-child(even) h2 {
        color: var(--clr-tlt);
    }
    .last::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: var(--bias);
        height: 300px;
        background: var(--clr-tlt);
        z-index: 1;
    }
    .timeline-content {
        box-shadow: none;
    }
}
@media (min-width: 1200px) {
    main > div {
        width: max(1200px, 90%);
    }
}