style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

html,
body {
    width: 100vw;
    height: 100vh !important;
    overflow: hidden;
}


body {
    background-color: var(--bg-color);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

:root {
    --bg-color: linear-gradient(#a6d8ff, #fff, #fff);
}

.dark {
    --bg-color: rgb(53, 53, 53);
}

.sun {
    position: absolute;
    top: 10%;
    left: 50%;
    width: 5rem;
    height: 5rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 50px rgb(255, 189, 189);
    cursor: pointer;
    transition: 0.2s;
    z-index: 50;
}

.dark .sun {
    left: 45%;
    box-shadow: 0 0;
    transition: 0.2s;
}

.dark .sun::before {
    content: '';
    position: absolute;
    top: -1rem;
    left: 1rem;
    width: 5rem;
    height: 5rem;
    background: rgb(53, 53, 53);
    border-radius: 50%;
}

.bg {
    position: absolute;
    bottom: 0rem;
    width: 100%;
    height: 28rem;
    background: url(bg.png);
    background-size: 50rem;
    background-repeat: repeat-x;
    animation: animatedBg 50s linear infinite;
}

@keyframes animatedBg {
    0% {
        background-position-x: 0rem;
    }

    100% {
        background-position-x: 100rem;
    }
}

.privateCar {
    height: 7rem;
    width: 15rem;
    position: absolute;
    bottom: 0rem;
    z-index: 4;
    animation: privateCar 15s linear infinite;
}

@keyframes privateCar {
    0% {
        margin-left: -110%;
    }

    100% {
        margin-left: 110%;
    }
}

.truck {
    height: 15rem;
    width: 15rem;
    position: absolute;
    bottom: -1rem;
    transform: rotateY(180deg);
    z-index: 3;
    animation: truck 22s linear infinite;
}

@keyframes truck {
    0% {
        margin-left: 100%;
    }

    100% {
        margin-left: -100%;
    }
}

.zip {
    height: 6rem;
    width: 15rem;
    position: absolute;
    bottom: 6rem;
    transform: rotateY(180deg);
    z-index: 2;
    animation: zip 25s linear infinite;
}

@keyframes zip {
    0% {
        margin-left: 150%;
    }

    100% {
        margin-left: -150%;
    }
}

.bus {
    height: 15rem;
    width: 42rem;
    position: absolute;
    bottom: 7rem;
    z-index: 1;
    animation: bus 28s linear infinite;
}

@keyframes bus {
    0% {
        margin-left: -140%;
    }

    100% {
        margin-left: 140%;
    }
}

.road {
    position: absolute;
    bottom: 0rem;
    height: 12rem;
    width: 100%;
    background: url(road.jpg);
    background-size: 82rem;
    background-repeat: repeat-x;
    animation: road 50s linear infinite;
}

@keyframes road {
    0% {
        background-position-x: 0rem;
    }

    100% {
        background-position-x: 82rem;
    }
}

@media(max-width: 992px) {
    html {
        font-size: 55%;
    }
}

@media(max-width: 768px) {
    html {
        font-size: 45%;
    }

    .privateCar {
        animation: privateCar 10s linear infinite;
    }

    .truck {
        animation: truck 15s linear infinite;
    }

    .zip {
        animation: zip 15s linear infinite;
    }

    .bus {
        animation: bus 23s linear infinite;
    }
}