.mini-road{
    position:relative;
    overflow:hidden;
    height:100px;

    background:linear-gradient(
        to bottom,
        #4fc3f7 0%,
        #81d4fa 35%,
        #dff6ff 100%
    );
}

/* Sun */

.sun{
    position:absolute;
    top:8px;
    right:50px;

    width:35px;
    height:35px;

    border-radius:50%;

    background:#ffd54f;

    box-shadow:
        0 0 20px rgba(255,213,79,.8),
        0 0 40px rgba(255,213,79,.5);

    animation:pulseSun 4s ease-in-out infinite;
}

@keyframes pulseSun{

    50%{
        transform:scale(1.1);
    }
}

/* Skyline */

.skyline{
    position:absolute;
    inset:0;
}

/* Buildings */

.buildings{
    position:absolute;
    bottom:35px;
    left:0;
    width:100%;
    height:30px;

    background:
        repeating-linear-gradient(
            to right,
            #7f8c8d 0px,
            #7f8c8d 18px,
            #95a5a6 18px,
            #95a5a6 40px,
            transparent 40px,
            transparent 48px
        );

    opacity:.75;
}

.buildings::after{

    content:"🌳 🌲 🌳 🌲 🌳 🌲 🌳 🌲 🌳 🌲 🌳 🌲 🌳";

    position:absolute;
    bottom:-12px;
    left:0;

    width:100%;
    font-size:18px;
}

/* Clouds */

.cloud{
    position:absolute;
    font-size:26px;
    opacity:.8;
    animation:moveClouds linear infinite;
}

.cloud-1{
    top:5px;
    animation-duration:35s;
}

.cloud-2{
    top:20px;
    animation-duration:45s;
    animation-delay:-10s;
}

.cloud-3{
    top:10px;
    animation-duration:55s;
    animation-delay:-20s;
}

@keyframes moveClouds{

    from{
        left:-100px;
    }

    to{
        left:110%;
    }
}

/* Birds */
/* Flying Birds */

.bird{
    position:absolute;
    width:18px;
    height:10px;

    animation:
        flyBirds 12s linear infinite,
        flap .4s ease-in-out infinite;
}

.bird::before,
.bird::after{
    content:"";
    position:absolute;

    width:10px;
    height:10px;

    border-top:2px solid #444;
    border-radius:50%;
}

.bird::before{
    left:0;
    transform-origin:right center;
}

.bird::after{
    right:0;
    transform-origin:left center;
}

.bird-1{
    top:10px;
    animation-delay:0s;
}

.bird-2{
    top:20px;
    animation-delay:3s;
}

.bird-3{
    top:12px;
    animation-delay:6s;
}

/* Fly LEFT → RIGHT */

@keyframes flyBirds{

    from{
        left:-40px;
        transform:translateY(0);
    }

    25%{
        transform:translateY(-3px);
    }

    50%{
        transform:translateY(2px);
    }

    75%{
        transform:translateY(-2px);
    }

    to{
        left:105%;
        transform:translateY(0);
    }
}

/* Wing flapping */

@keyframes flap{

    0%,100%{
        transform:rotate(8deg);
    }

    50%{
        transform:rotate(-8deg);
    }
}

/* Road */

.road{
    position:absolute;
    bottom:0;
    left:0;

    width:100%;
    height:35px;

    background:
        linear-gradient(
            to bottom,
            #555,
            #2f2f2f
        );

    box-shadow:
        inset 0 5px 8px rgba(255,255,255,.15);
}

/* Center line */

.road-line{
    position:absolute;
    bottom:16px;
    left:0;
    width:100%;

    border-top:3px dashed #ffd54f;
}

/* Traffic */

.traffic-track{
    position:absolute;
    bottom:2px;

    display:flex;
    width:max-content;
}

.lane-1{
    animation:trafficMove 18s linear infinite;
}

.traffic-row{
    white-space:nowrap;
    font-size:28px;
    letter-spacing:20px;

    padding-right:50px;

    transform:scaleX(-1);
}

@keyframes trafficMove{

    from{
        transform:translateX(-50%);
    }

    to{
        transform:translateX(0);
    }
}