/* The actual timeline (the vertical ruler) */
.timeline
{
    position: relative;
    max-width: 1200px;

    margin: 0 auto;
}

/* The actual timeline (the vertical ruler) * /
.timeline::after
{
    position: absolute;
    width: 2px;

    background-color: #111216;

    top: 0;
    bottom: 0;
    left: 50%;

    margin-left: -3px;

    content: '';
}
*/

/* The actual timeline (the vertical ruler) */
.timeline::after {
    position: absolute;
    width: 2px;

    /* Updated background gradient for a delayed fadeout */
    background-image: linear-gradient(to bottom, #111216 98%, rgba(17, 18, 22, 0));

    top: 0;
    bottom: 0;
    left: 50%;

    margin-left: -3px;

    content: '';
}

/* Container around content */
.container
{
    position: relative;
    width: 50%;

    background-color: inherit;

    padding: 40px;
}

/* The circles on the timeline */
.container::after
{
    position: absolute;
    z-index: 1;

    width: 40px;
    height: 40px;

    background-color: #3b82f6;
    font: var(--fa-font-solid);

    border: 4px solid #040404;
    border-radius: 50%;

    top: 20px;
    right: -10px;

    display: flex;
    align-items: center;
    justify-content: center;

    content: attr(data-event-icon);
}

/* Place the container to the left */
.left
{
    left: 0;
}

/* Place the container to the right */
.right
{
    left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before
{
    position: absolute;
    z-index: 1;

    width: 30px;
    height: 30px;

    border-right: 2px solid #111216;
    border-bottom: 2px solid #111216;
    border-bottom-right-radius: 100%;

    right: 1px;

    content: '';
}

.left::after
{
    top: -2px;
    right: -19px;
}

/* Add arrows to the right container (pointing left) */
.right::before
{
    position: absolute;
    z-index: 1;

    width: 30px;
    height: 30px;

    border-left: 2px solid #111216;
    border-bottom: 2px solid #111216;
    border-bottom-left-radius: 100%;

    left: -3px;

    content: '';
}

.right::after
{
    top: -4px;
    left: -22px;
}

/* The actual content */
.content
{
    position: relative;

    background-color: #111216;

    border-radius: 0.375rem;

    padding: 20px 30px;
}

/* Media queries - Responsive timeline on screens less than 768px wide */
@media screen and (max-width: 768px)
{
    /* Place the timelime to the left */
    .timeline::after
    {
        left: 31px;
    }

    /* Full-width containers */
    .container
    {
        width: 100%;

        padding-left: 70px;
        padding-right: 25px;
    }

    .left::before, .right::before
    {
        position: absolute;
        z-index: 1;

        width: 30px;
        height: 30px;

        border-left: 2px solid #111216;
        border-right: none;
        border-bottom: 2px solid #111216;
        border-bottom-right-radius: 0%;
        border-bottom-left-radius: 100%;

        left: 28px;

        content: '';
    }

    /* Make sure all circles are at the same spot */
    .left::after, .right::after
    {
        left: 10px;
    }

    /* Make all right containers behave like the left ones */
    .right
    {
        left: 0%;
    }
}