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

.sky, .terrain {
    position: relative;
}

.sky {
    height: 57%;
    background-color: skyblue;
}

.sun {
    position: absolute;
    top: 200px;
    left: 550px;
    width: 512px;
    height: 512px;
    cursor: pointer;
    /* png fallback */
    background: url(images/sunsprite-02.png);
    /* svg */
    background: url(images/sunsprite-02.svg),
				linear-gradient(transparent, transparent);
	background-repeat: no-repeat;
    background-size: 300px;
    /* TRANSITION FOR SUN DEMO */
    -webkit-transition: all 2s ease-in-out; 
	-moz-transition: all 2s ease-in-out; 
	-o-transition: all 2s ease-in-out; 
	transition: all 2s ease-in-out;
} 

.sun:hover {
    background-position-y: -295px;
}

.sun:active {
    background-position-y: -595px;
}

.terrain {
    height: 50%;
    background-color: sandybrown;
}

.road {
    position: absolute;
    width: 300px;
    border-bottom: 300px solid darkgray;
    border-left: 250px solid transparent;
    border-right: 250px solid transparent;
    bottom: 0;
    left: 300px;
}

.rocks {
    position: absolute;
    width: 160px;
    top: 300px;
    left: 980px;
    animation: horizon 12s linear infinite normal;
}

.lines {
    position: absolute;
    width: 40px;
    height: 90px;
    background-color: white;
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    bottom: 260px;
    left: 680px;
    animation: roaddrive 2s linear infinite normal;
}

.cactus {
    position: absolute;
    width: 150px;
    height: auto;
    bottom: 230px;
    left: 250px;
    animation: cactuswhoosh 8s linear infinite normal;
}

.tumbleweed {
    position: absolute;
    width: 100px;
    height: auto;
    bottom: 150px;
    right: 200px;
    animation: tumble 5s linear infinite alternate;
}

/* KEYFRAME ANIMATIONS */
@keyframes roaddrive {
    from {transform: translateY(0) scale(0)}
    to {transform: translateY(350px) scale(1.2)}
}

@keyframes cactuswhoosh {
    from {transform: translate(0) scale(0)}
    to {transform: translate(-400px, 400px) scale(1.2)}
}

@keyframes horizon {
    from {transform: scale(1)}
    to {transform: scale(1.5)}
}

@keyframes tumble {
    20% {transform: translate(-200px) rotate(-200deg)}
    40% {transform: translate(-400px) rotate(-600deg)}
    60% {transform: translate(-600px) rotate(-360deg)}
    80% {transform: translate(-800px) rotate(-533deg)}
    100% {transform: translate(-900px) rotate(-700deg)}
}