.container{
    position: absolute;
    width: 100%;
    height:100%;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
}

span{
    position: absolute;
    width: 20px;
    height: 2px;
    border-radius: 100px;
    animation: move 2s linear infinite;
}

span:nth-child(1){
    left:10%;
    bottom:11%;

}

span:nth-child(2){
    left:14%;
    bottom: 11%;
}

span:nth-child(3){
    left:85%;
    bottom: 37%;
}

span:nth-child(4){
    left:87%;
    bottom: 37%;
}

@keyframes moves{
    150%{
        transform: translateX(10px);
    }
}

.bird{
    position: absolute;
    width: 95px;
    top: 200px;
    height: 85px;
    z-index: 1;
    background: #fff;
    border-radius: 76% 24% 100% 0% / 100% 41% 59% 0%;
    animation: fly 10s forwards;
    z-index: 5;
    background: pink;
}

@keyframes fly{
    100%{
        top:180px;
    }
    10%{
        transform: translateY(-300px);
        transform: translateX(300px);
        top: 197px;
    }
}

.bird::before{
    content: '';
    position: absolute;
    width: 80px;
    height: 60px;
    left: -10px;
    background: cyan;
    border-radius: 15% 85% 0% 100% / 0% 30% 70% 100%;
    animation: wings 1s infinite;
}

@keyframes wings {
    100%{
        transform: rotate(60deg);
    }
}
.bird:after{
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    left: 95px;
    top:15%;
    border-right: 10px solid salmon;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    transform: rotate(50deg);
}


.eye{
    position: absolute;
    width: 10px;
    height: 10px;
    background: #000;
    left: 70%;
    top: 10%;
    border-radius: 50%;
}

body{
    background: white;
}



.hero{
    height: 100vh;
    width: 100%;
    background-image: url(sky.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.highway
{
    height: 210px;
    width: 500%;
    display: block;
    background-image: url(road.jpg);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1; 
    animation: highway 8s linear infinite;
}
@keyframes highway
{   
    100%{
        transform: translateX(-3400px);
    }
}
.car
{
    width: 405px;
    left: 50%;
    bottom: 100px;
    transform: translateX(-50%);
    position: absolute;
    z-index: 1;
}
.car img
{
    width: 100%;
    animation: car 1s linear infinite;
}
@keyframes car 
{
    100%{
        transform: translateY(-1px);
    }
    50%{
        transform: translateY(1px);
    }
    0%{
        transform: translateY(-1px);
    }
}
.wheel
{
    left: 50%;
    bottom: 178px;
    transform: translateX(-50%);
    position: absolute;
    z-index: 2;
}
.wheel img
{
    width: 72px;
    height: 72px;
    animation: wheel 1s linear infinite;
}
.back-wheel
{
    left: -165px;
    position: absolute;
}
.front-wheel
{
    left: 80px;
    position: absolute;
}
@keyframes wheel
{
    100%{
        transform: rotate(360deg);
    }
}
.body{
    width: 609px;
    right:  55%;
    bottom: 100px;
    transform: translateX(-10%);
    position: absolute;
    z-index: 2;
}   
.body img
{
    width: 66%;
    animation: car 1s linear infinite;
}
@keyframes car 
{
    100%{
        transform: translateY(-1px);
    }
    50%{
        transform: translateY(1px);
    }
    0%{
        transform: translateY(-1px);
    }
}
.head
{
    left: 5%;
    bottom: 178px;
    transform: translateX(-50%);
    position: absolute;
    z-index: 2;
}
.head img
{
    width: 72px;
    height: 72px;
    animation: wheel 1s linear infinite;
}
.back-head
{
    left: 48px;
    position: absolute;
}
.front-head
{
    left: +297px;
    position: absolute;
}
@keyframes head
{
    100%{
        transform: rotate(360deg);
    }


 
.star{
    height: 0;
    width: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 50px solid gold;
    position:relative;
    animation-iteration-count: infinite;
}

.star:after{
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid gold;
    position: absolute;
    content: "";
    top:15px;
    left: -25px;
}

.moon{
    position:relative;
    background-color: transparent;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 25px 10px 0 0 gold;
    margin-top:10%;
    margin-left:10%;
    animation-name: moonride;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

.one{
    margin-top:20%;
    margin-left:60%;
    animation-name: twinkle-1;
    animation-duration: 1s;
}

.two{
    margin-top:20%;
    margin-left:20%;
    animation-name: twinkle-2;
    animation-duration: 1s;
}

@keyframes twinkle-1 {
    20%{
        transform:scale(0.5);
        opacity: 0.5;
    }
}

@keyframes twinkle-2 {
    60%{
        transform: scale(0.5);
        opacity: 0.5;
    }
}

@keyframes moonride {
    0%{
        left: 10%;
    }
    50%{
        left: 45%;
        opacity: 0.5;
    }
    100%{
        left: 10%;
    }
}