/*====================
    general
====================*/
html, body{
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
}
#gras, #sky, #road{
    position: relative;
}
p{
    position: absolute;
}
/*====================
    sky
====================*/
img#sun{
    animation-name: sun;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0s;
    width: 5%;
    position: absolute;
    top: 200%;
    left: 50%;
    z-index: 10;
    animation-fill-mode: backwards;
}
#sky{
    height: 40%;
    animation-name: day;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0s;
}
@keyframes sun{
    to { transform: rotate(0deg) translateX(800px) rotate(0deg);}
    from  { transform: rotate(-180deg) translateX(800px) rotate(180deg);}
}
@keyframes day{
    0% {background-color: rgb(34, 53, 148);}
    50% {background-color: lightblue;}
    100% {background-color: rgb(34, 53, 148);}
}
/*====================
    grass
====================*/
#grass{
    height: 20%;
    z-index: 100;
    position: relative;
    animation-name: grass;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0s;
}

@keyframes grass{
    0% {background-color: rgb(156, 150, 117);}
    50% {background-color: rgb(230, 221, 168);}
    100% {background-color: rgb(156, 150, 117);} 
}

img#steppe {
    width: 5%;
    position: absolute;
    top: 10px;
    animation-name: steppe;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0s; 
    animation-direction: alternate;
}

@keyframes steppe {
    from{transform: translateX(-300px) rotate(-3000deg)}
    to{transform: translateX(4000px) rotate(3000deg)}
}

/*====================
    road
====================*/
#road{
    height: 40%;
    box-sizing: border-box;
    border-top: solid grey 10px;
    border-bottom: solid dimgrey 10px;
    animation-name: road;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-delay: 0s; 
    z-index: 100;
}
@keyframes road{
    0% {background-color: rgb(107, 107,107);
    border-bottom: solid rgb(65, 65, 65) 10px;
    border-top: solid rgb(65, 65, 65) 10px;}
    50% {background-color: rgb(179, 179, 179);
    border-bottom: solid rgb(137, 137, 137) 10px;
    border-top: solid rgb(137, 137, 137) 10px;}
    100% {background-color: rgb(107, 107, 107);
    border-bottom: solid rgb(65, 65, 65) 10px;
    border-top: solid rgb(65, 65, 65) 10px;}
}

#lines{
    box-sizing:  border-box;
    border: dashed white 5px;
    width: 100%;
    position: absolute;
    top: 45%
}
@keyframes {
    0% {background-color: rgb(220, 220, 220);}
    50% {background-color: rgb(255, 255, 255);}
    100% {background-color: rgb(220, 220, 220);} 
}
/*====================
    cars
====================*/

img#redcar{
    width: 10%;
    position: absolute;
    top: 0px;
    animation-name: drive;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

img#redcar2{
   width: 10%;
    position: absolute;
    top: 60%; 
    animation-name: drive2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes drive{
    from{transform: translateX(-150px)}
    to{transform: translateX(2000px)}
}

@keyframes drive2{
    from{transform: translateX(2300px)}
    to{transform: translateX(-250px)}
}

/*====================
    cloud
====================*/

img#cloud{
    width: 150px;
    position: absolute;
    top: 100px;
    animation-name: cloud;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 0%;
}

@keyframes cloud{
    from{transform: translateX(-200px)}
    to{transform: translateX(2000px)}
}