Edit in JSFiddle

@mixin fp($property, $min, $max, $start:500, $end:1366, $clip: true, $sourceUnit:vw, $clipAtStart: true, $clipAtEnd: true) {
    
    $multiplier: ($max - $min) / ($end - $start) * 100;
    $adder: ($min * $end - $max * $start) / ($end - $start);

    $formula: calc(#{$multiplier + $sourceUnit} + #{$adder + 0px});
  
    @if($clip and $clipAtStart){
        @media (max-width: #{$start + 0px}) {
            #{$property}: $min + 0px;
        }
    }
    
    @if($clip and $clipAtEnd){
        @media (min-width: #{$end + 0px}) {
            #{$property}: $max + 0px;
        }
    }

    #{$property}: $formula;
}



body {
    background-color: #fff;
    padding: 0;
    margin: 0;
}

roadrunner{
  display: block;
  position: absolute;
  bottom:45%;
  left:50%;

z-index: 4;
  width:300px;
  

  @include fp(margin-left, 200, -200, $end:800);

img{
    width:100%;
  }
  
}

scene {
  overflow: hidden;
    display: block;
    height: 500px;
    width: 100%;
    position: relative;
    background-color: #000;
}

sun {
    position: absolute;
    display: block;
    background-color: yellow;
    background: radial-gradient(ellipse at center, #ffff88 0%, #fcce00 100%);
    border-radius: 100%;
    left: 50%;
    transform: translateY(-50%);
    @include fp(margin-left, 100, -100);
    @include fp(width, 10, 300);
    @include fp(height, 10, 300);
    top: 80px;
    z-index: 2;
}

clip {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    overflow: hidden;
    @include fp(border-radius, 500, 0);
    @include fp(width, 0, 3000);
    @include fp(height, 0, 3000);
}

grass {
    background: linear-gradient(to bottom, #c9de96 0%, #8ab66b 44%, #398235 100%);
    position: absolute;
    top: 80px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
}

clipinner {
    position: absolute;
    width: 100%;
    height: 500px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

sky {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: blue;
    background: linear-gradient(to bottom, #0a77d5 0%, #539fe1 79%, #87bcea 100%);
    z-index: 1;
}

bolder{
  height:222px;
  position: absolute;
  display: block;
  border-radius:100%;
      border-bottom-left-radius: 40%;
      border-bottom-right-radius: 40%;
  top:8%;
  z-index: 5;
  
    left:50%;

  width:350px;
  

  @include fp(margin-top, -700, 0, $end:800);
  @include fp(margin-left, 200, -200, $end:800);

  img{
    width:100%;
  }

}

road {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 200px;
    transform: translateY(-50%);
    background-color: #aaa;
    background: linear-gradient(to bottom, #b5bdc8 0%, #828c95 36%, #28343b 100%);
    z-index: 3;
    &:before {
        content: "";
        display: block;
        position: absolute;
        width: 5000px;
        top: 60%;
        transform: translateY(-50%);
        @include fp(right, 0, -2000);
        border-top: 10px dashed #eee;
    }
}