*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.scene
{
    position: relative;
    height: 100vh;
    overflow-x: hidden;
    background: linear-gradient(#a6d8ff, #fff, #fff);
}
.dark .scene
{
    background: #222833;
}
.sun
{
    position: absolute;
    top: 100px;
    left: 55%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 50px #fff;
    cursor: pointer;
    transition: 0.2s;
}
.dark .sun
{
    left: 45%;
    box-shadow: 0 0 0 #fff;
}
.dark .sun::before
{
    content: '';
    position: absolute;
    top: -20px;
    left: 20px;
    width: 100%;
    height: 100%;
    background: #222833;
    border-radius: 50%;
    box-shadow: 0 0 0 #fff;
}
.bg
{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 280px;
    background: url(img/bg.png);
    animation: animateBg 25s linear infinite;
    background-size: 1500px;
    background-repeat: repeat-x;
}
@keyframes animateBg
{
    0%
    {
        background-position-x: 0px;
    }
    100%
    {
        background-position-x: 1500px;
    }
}
.car1
{
    position: absolute;
    left: -200px;
    bottom: 20px;
    max-width: 200px;
    z-index: 10;
    animation: car1 18s linear infinite;
}
@keyframes car1
{
    0%
    {
        transform: translateX(0px);
    }
    90%,100%
    {
        transform: translateX(calc(100vw + 200px));
    }
}
.car2
{
    position: absolute;
    right: -200px;
    bottom: 50px;
    max-width: 200px;
    z-index: 9;
    animation: car2 12s linear infinite;
}
@keyframes car2
{
    0%
    {
        transform: translateX(0px) rotateY(180deg);
    }
    90%,100%
    {
        transform: translateX(calc(-150vw + 200px)) rotateY(180deg);
    }
}