html, body{
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
}


/* -------Background styling---------- */

.sky, .grass, .road{
    position: relative;
}

.sky{
    height: 40%;
    background-color: lightblue;
}

.grass{
    height: 40%;
    background-color: rgb(56, 161, 56);
}

.road{
    height: 30%;
    background-color: gray;
    border-top: 10px solid rgb(54, 53, 53);
    border-bottom: 15px solid rgb(54, 53, 53);
    width: 100%;
}

.lines{
    box-sizing: border-box;
    border: 5px dashed #fff;
    height: 0px;
    width: 100%;
    position: absolute;
    top:45%;
}

.clouds { 
    width: 15%;
    height: auto;
    float: right;
    margin-right: 100px;
    /* transition for the below hover transform */
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 7s ease-in-out;
} 

.clouds:hover {
    transform: translateX(-1400px);
}

.house {
    display: block;
    width: 15%;
    float: right;
    margin-right: -100px;
    animation: whoosh 20s linear infinite normal;
}

.car {
    width: 15%;
    position: absolute;
    bottom: 100px;
    animation: drive 5s linear infinite normal;
}

@keyframes whoosh {
    from {transform: translateX(0)}
    to {transform: translateX(-1500px)}
}

@keyframes drive {
    from {transform: translateX(0)}
    to {transform: translateX(1500px)}
}