.timeline {
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}

.roadBackground {
    background-image: url(https://static.igem.wiki/teams/5117/images-wiki/road.png);
    background-repeat: no-repeat repeat;
    background-position: top center;
}



.timeLineContent {
    padding: 10px 60px;
    position: relative;
    background-color: inherit;
    width: 45%;
}

.timeLineContent::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -12.5px;
    background-color: white;
    border: 4px solid #52329d;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
}

@media screen and (max-width: 600px) {
    .roadBackground {
        background-image: url(https://static.igem.wiki/teams/5117/images-wiki/road.png);
        background-repeat: no-repeat repeat;
        background-position: left;
        background-size: 70px 100px;
    }

    .timeLineContent::after {
        background-color: transparent;
        border: none;
    }
}

.left {
    left: 0;
}

.right {
    left: 55%;
}

.left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 50px;
    border: medium solid var(--purple3);
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent var(--purple3);
}

.right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 50px;
    border: medium solid var(--purple3);
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--purple3) transparent transparent;
}

.right::after {
    left: -16px;
}

.content {
    padding: 20px 30px;
    background-color: var(--purple3);
    position: relative;
    border-radius: 6px;
}

@media screen and (max-width: 600px) {
    .timeline::after {
        left: 31px;
    }

    .timeLineContent {
        width: 100%;
        padding-left: 100px;
        padding-right: 25px;
    }

    .timeLineContent::before {
        left: 90px;
        border: medium solid var(--purple3);
        border-width: 10px 10px 10px 0;
        border-color: transparent var(--purple3) transparent transparent;
    }

    .left::after,
    .right::after {
        left: 15px;
    }

    .right {
        left: 0%;
    }
}


#truckContainer {
    /* Variables used for layout calculation */
    --truckWidth: 120px;
    --truckHeight: 440px;

    background-image: url(https://static.igem.wiki/teams/5117/images-wiki/truck-topview-notebook.webp);
    background-repeat: no-repeat;
    background-size: contain;

    position: absolute;

    left: calc(50% - (var(--truckWidth) / 2));

    width: var(--truckWidth);
    height: var(--truckHeight);

    animation: truckAnimation 30s infinite;
}

@media screen and (max-width: 600px) {
    #truckContainer {
        --truckWidth: 50px;
        /* The 70px are the width of the background road image
        -> .roadBackground background-size */
        left: calc((70px - var(--truckWidth)) / 2);
    }

}


@keyframes truckAnimation {
    0% {
        bottom: 100%;
        opacity: 0%;
    }

    10% {
        opacity: 100%;
    }

    30% {
        opacity: 100%;
    }

    70% {
        opacity: 100%;
    }

    95% {
        opacity: 0%;
    }

    100% {
        opacity: 0%;
        bottom: 0%;
    }
}

/*https://www.w3schools.com/howto/howto_css_timeline.asp*/