<p class="author">
  Hold right arrow
</p>
<p id="autoplay">Auto play</p>
<div class="man">

  <div class="arm front">
    <div class="arm__top">
      <div class="arm__fore"></div>
    </div>
  </div>

  <div class="arm back">
    <div class="arm__top">
      <div class="arm__fore"></div>
    </div>
  </div>

  <div class="head">
    <div class="head__hair"></div>
    <div class="head__ear"></div>
    <div class="head__nose"></div>
    <div class="head__eye"></div>
  </div>

  <div class="body">
    <div class="body__belly"></div>
  </div>
  <div class="pelvis"></div>
  <div class="leg">
    <div class="leg__top">
      <div class="leg__fore"></div>
    </div>
  </div>
  <div class="leg back">
    <div class="leg__top">
      <div class="leg__fore"></div>
    </div>
  </div>
</div>

<div class="road"></div>

<!--- This is a wasteland, don't look on from here -->
<div class="wall">
</div>

<div class="crack">
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
</div>

<div class="lighting">

  <div class="lamp"></div>
  <div class="shade"></div>
  <div class="shade"></div>
</div>

<div class="pole"></div>

<div class="cans">
  <div class="cans__one can"></div>
  <div class="cans__two can"></div>
  <div class="cans__three can"></div>
</div>
<div class="cans two">
  <div class="cans__one can"></div>
  <div class="cans__two can"></div>
  <div class="cans__three can"></div>
</div>
<div class="cans three">
  <div class="cans__one can"></div>
  <div class="cans__two can"></div>
  <div class="cans__three can"></div>
</div>
<div class="sky">
  <div class="moon"></div>
  <div class="gradient"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>

<div class="floor">
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>
</div>
$background: #264050;
$skin: #e2ddc5;
$skin_border: #b2ac8d;
$hair: #15141c;
$shirt: #7b7a82;
$pants: #4a4d5b;
$shoe: #111111;
$light: #388abd;
$road: #1e1d22;
body,
html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100% !important;
  overflow: hidden;
  background-color: $background;
  font-family: "arial";
  flex-direction: column;
  perspective: 300px;
  margin: auto;
}

.man {
  display: flex;
  position: relative;
  // background: rgba(#FFF, 0.2);
  flex-direction: column;
  height: 310px;
  z-index: 3;
  animation: bounce 1.5s ease-in-out forwards infinite;
  &:after {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    background: rgba(#000, 0.3);
    position: absolute;
    transform: scale(1, 0.1);
    border-radius: 50px;
    bottom: -50px;
    left: -20px;
    animation: shadow 1.5s ease-in-out forwards infinite;
  }
}

.head {
  width: 50px;
  height: 60px;
  background: $skin;
  border-radius: 25px 30px 15px 30px;
  position: relative;
  animation: bop_head 1.5s ease-in-out backwards infinite;
  &:after {
    // Neck
    content: "";
    display: block;
    height: 32px;
    width: 25px;
    z-index: 2;
    background: $skin;
    position: absolute;
    bottom: -10px;
    left: 2px;
    transform: rotateZ(20deg);
  }
  &__eye {
    background: #000;
    height: 5px;
    width: 3px;
    position: absolute;
    top: 20px;
    right: 7px;
    border-radius: 3px;
    &:before {
      // shadow
      content: "";
      display: block;
      width: 8px;
      height: 3px;
      background: rgba(#000, 0.2);
    }
    &:after {
      // brow
      content: "";
      height: 5px;
      width: 12px;
      border-radius: 10px 5px 0 0;
      background: $hair;
      display: block;
      margin-top: -8px;
      margin-left: -2px;
    }
  }

  &__hair {
    width: 30px;
    height: 25px;
    background: $hair;
    border-radius: 10px 20px 5px 0;
    &:after {
      content: "";
      display: block;
      width: 30px;
      height: 10px;
      background: $hair;
      position: absolute;
      left: 12px;
      top: -2px;
      border-radius: 5px 0 5px 0;
    }
  }
  &__ear {
    position: relative;
    background: $skin;
    height: 15px;
    width: 12px;
    z-index: 3;
    border-radius: 5px 5px 2px 8px;
    margin: -3px 0 0 6px;
    transform: rotateZ(-5deg);
    box-shadow: -3px 2px 5px 0px rgba(#000, 0.3);
  }
  &__nose {
    background: $skin;
    height: 15px;
    width: 10px;
    position: absolute;
    right: -8px;
    top: 25px;
    border-radius: 0 10px 5px 0;
    // mo
    &:after {
      content: "";
      display: block;
      background: $hair;
      height: 8px;
      width: 12px;
      position: absolute;
      bottom: -7px;
      left: -7px;
      border-radius: 10px 5px 5px 0;
    }
  }
}

.body {
  position: relative;
  background: $shirt;
  height: 90px;
  width: 40px;
  margin-top: 5px;
  z-index: 2;
  margin-left: -10px;
  border-radius: 45px 70px 20px 20px;
  transform: rotateZ(-3deg);
  &__belly {
    width: 40px;
    height: 40px;
    background: $shirt;
    position: absolute;
    top: 47px;
    border-radius: 40px;
    right: -10px;
    transform: scale(0.5, 1.25);
    animation: bop 1.5s ease-in-out forwards infinite;
  }
}
.arm {
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 6;
  top: 80px;
  left: -25px;
  &__top {
    width: 15px;
    height: 40px;
    background: $skin;
    position: absolute;
    left: 25px;
    top: 12px;
    border-radius: 3px 3px 6px 6px;
    transform: rotate(0);
    transform-origin: 50% -5px;
    box-shadow: -3px 2px 5px 0px rgba(#000, 0.1);
  }
  &__fore {
    width: 13px;
    height: 50px;
    position: absolute;
    left: 0px;
    top: 30px;
    border-radius: 5px;
    background: $skin;
    transform: rotateX(-10deg);
    transform-origin: 50% 5px;
    z-index: 6;
    box-shadow: -3px 2px 5px 0px rgba(#000, 0.3);
    animation: bend_arm 1.5s ease-in-out alternate infinite;
    &:after {
      content: "";
      display: block;
      background: $skin;
      height: 20px;
      width: 15px;
      border-radius: 10px;
      position: absolute;
      bottom: -15px;
      transform-origin: 50% 5px;
      left: -2px;
      animation: hand 1.5s ease-in-out alternate infinite;
    }
  }
  &.back {
    z-index: -1;
    .arm__top {
      animation: swing_back 1.5s ease-in-out alternate infinite;
    }
    .arm__fore {
      animation: bend_back 1.5s ease-in-out alternate infinite;
    }
  }
  &.front {
    .arm__top {
      animation: swing_arm 1.5s ease-in-out alternate infinite;
    }
  }
}

@keyframes swing_arm {
  0%,
  100% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-15deg);
  }
  75% {
  }
}

@keyframes swing_back {
  0%,
  100% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(15deg);
  }
}

@keyframes bend_arm {
  0%,
  100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(-20deg);
  }
}

@keyframes hand {
  0%,
  100% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-10deg);
  }
}

@keyframes bend_back {
  0%,
  100% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(-10deg);
  }
}

.pelvis {
  border-top: 5px solid #604d25;
  background: $pants;
  width: 43px;
  height: 30px;
  margin-left: -13px;
  border-radius: 4px 4px 20px 20px;
  transform: rotateZ(10deg);
  z-index: 2;
  margin-top: -6px;
}

.leg {
  perspective: 1000px;
  &__top {
    background: $pants;
    transform-origin: 50% 0px;
    animation: leg_top 1.5s ease-in-out alternate infinite;
    height: 70px;
    width: 25px;
    margin-top: -15px;
    margin-left: -2px;
    z-index: 5;
    position: absolute;
    border-radius: 0 0 30px 10px;
  }
  &__fore {
    background: $pants;
    height: 80px;
    width: 20px;
    position: absolute;
    bottom: -70px;
    animation: leg_fore 1.5s ease-in-out forwards infinite;
    transform-origin: 50% 0px;
    &:after {
      content: "";
      display: block;
      width: 40px;
      height: 12px;
      background: $shoe;
      position: absolute;
      border-radius: 0 10px 5px 0;
      left: 0;
      bottom: -10px;
      animation: foot_front 1.5s ease-in-out forwards infinite;
    }
  }
  &.back {
    opacity: 1;
    z-index: -1;
    .leg__top {
      background: #383a44;
      margin-top: -20px;
      animation: leg_top_back 1.5s ease-in-out alternate infinite;
    }
    .leg__fore {
      background: #383a44;
      animation: leg_fore_back 1.5s ease-in-out forwards infinite;
      &:after {
        animation: foot_back 1.5s ease-in-out forwards infinite;
      }
    }
  }
}

.road {
  position: absolute;
  background: $road;
  top: calc(50% + 195px);
  height: 50%;
  width: 100vw;
  z-index: -2;
  border-top: 20px solid #121214;
}

.wall {
  height: calc(50% + 120px);
  width: 200vw;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.1;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9aaaaj0leqvqou2nkwat/GRgYGNGFMQSwaAQLjSrEFTLgcAUFD9YARtcFAONsAwud/tCtAAAAAElFTkSuQmCC)
    repeat;
  animation: world_move 6.25s linear forwards infinite;
}

.crack {
  position: absolute;
  top: 50%;
  left: 60%;
  width: 50px;
  display: none;
  flex-wrap: wrap;
  .brick {
    width: 30px;
    height: 15px;
    border: 1px solid black;
    opacity: 0.2;
  }
  .brick:nth-child(1) {
  }
  .brick:nth-child(2),
  .brick:nth-child(3) {
    width: 15px;
  }
}
.lighting {
  .shade {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    opacity: 0.6;
    background: linear-gradient(
      135deg,
      rgba(#000, 1) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    height: 100vh;
    width: 50%;
    // mix-blend-mode: multiply;
  }
  .shade:nth-child(2) {
    ransform: rotate(90deg);
    transform: scaleX(-1);
    right: 0;
    left: auto;
  }
  .lamp {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 900px 900px 200px;
    border-color: transparent transparent $light transparent;
    position: absolute;
    top: -150px;
    animation: lamp_move 9.25s linear forwards infinite;
    //  mix-blend-mode: soft-light;
    filter: blur(25px);
    opacity: 0.25;
  }
}

.sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 36%;
  max-height: 420px;
  z-index: 2;
  overflow: hidden;
  .gradient {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background-image: linear-gradient(
      to bottom,
      #162662,
      #123c77,
      #11528a,
      #1b689b,
      #2d7fab
    );
  }
  .moon {
    height: 100px;
    width: 100px;
    border-radius: 50px;
    background: white;
    position: absolute;
    top: -20px;
    left: 20%;
    z-index: 30;
    opacity: 0.1;
  }
  .star {
    height: 2px;
    width: 2px;
    filter: blur(1px);
    position: absolute;
    z-index: 3;
    background: white;
  }
}

@function randomNum($min, $max) {
  $rand: random();
  $randomNum: $min + floor($rand * (($max - $min) + 1));

  @return $randomNum;
}

@for $i from 1 through 50 {
  .star:nth-child(#{$i}) {
    //scss random function to the duration of the animation and the delay
    top: #{randomNum(0, 400)}px;
    left: #{randomNum(0, 100)}vw;
  }
}

.pole {
  width: 40px;
  height: 120vh;
  z-index: 75;
  position: absolute;
  top: 0;
  background: #221f30;
  filter: blur(3px);
  animation: lamp_move_pole 9.25s linear forwards infinite;
  transform: translateX(200px);
}

.cans {
  width: 600px;
  height: 100px;
  z-index: 85;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  filter: blur(2px);
  animation: lamp_move_pole 9.25s linear forwards infinite;
  transform: translateX(00px);
  .can {
    background: #111111;
    width: 33%;
  }
  &__one {
    height: 20px;
    transform: rotate(-2deg);
  }
  &__two {
    height: 40px;
    transform: rotate(2deg);
  }
  &__three {
    height: 30px;
  }
  &.two {
    transform: translateX(200px);
  }
  &.three {
    transform: translateX(-500px);
  }
}

.title {
  color: white;
  font-size: 2em;
  position: absolute;
  bottom: calc(50% + 1em);
  left: 15%;
  margin: 0;
  line-height: 1;
}

.author {
  opacity: 0;
  color: white;
  position: absolute;
  bottom: 50%;
  text-align: center;
  right: calc(50% - 180px);
  z-index: 100;
  transition: 1.5s ease-in-out;
}

#autoplay {
  position: absolute;
  top: 1em;
  left: 1em;
  color: white;
  opacity: 0.25;
  z-index: 50;
  cursor: pointer;
}

// Floor
.floor {
  opacity: 0.45;
  // change to display: flex to view floor
  display: flex;
  border-top: 2px solid #444;
  border-bottom: 2px solid #444;
  transform: rotateX(70deg);
  position: absolute;
  left: -115px;
  top: calc(50% + 110px);
  z-index: -5;
  animation: world_move 6.25s linear forwards infinite;
  .row {
    display: flex;
    flex-direction: column;
    &:nth-child(odd) {
      .brick:nth-child(3) {
        height: 15px;
        //   background: red;
      }
    }
    &:nth-child(even) {
      .brick:nth-child(1) {
        height: 15px;
      }
    }
  }
  .brick {
    height: 30px;
    width: 15px;
    border: 1px solid #090f18;
    float: left;
    background: rgba(#183249, 1);
  }
}

@keyframes leg_top {
  0%,
  100% {
    transform: rotate(-20deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

@keyframes leg_fore {
  0%,
  20%,
  50% {
    transform: rotateZ(0deg);
  }
  0% {
    bottom: -70px;
  }
  15% {
    bottom: -74px;
  }
  60% {
    bottom: -70px;
  }
  80% {
    transform: rotate(50deg);
  }
}

@keyframes leg_top_back {
  0%,
  100% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-20deg);
  }
}

@keyframes leg_fore_back {
  0% {
    transform: rotate(0deg);
  }

  30% {
    transform: rotate(45deg);
  }
  50% {
    transform: rotate(0deg);
  }

  65% {
    bottom: -73px;
  }

  80% {
    transform: rotate(0deg);
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  25%,
  75% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes bop {
  0%,
  50%,
  100% {
    transform: translateY(0) scale(0.7, 1.25);
  }
  25%,
  75% {
    transform: translateY(-2px) scale(0.73, 1.25);
  }
}

@keyframes bop_head {
  0%,
  50%,
  100% {
    transform: translate3d(-4px, 8px, 0) scale(0.85);
  }
  25%,
  75% {
    transform: translate3d(-4px, 9px, 0) rotate(2deg) scale(0.85);
  }
}

@keyframes foot_front {
  0% {
    transform: rotate(-10deg);
  }

  15% {
    transform: rotate(10deg);
  }
  55% {
    transform: rotate(-16deg);
  }
  65% {
    transform: rotate(25deg);
  }
  97% {
    background: $shoe;
    transform: rotate(-10deg);
  }
  98% {
    // background: red;
  }
  100% {
    background: $shoe;
    transform: rotate(-10deg);
  }
}

@keyframes foot_back {
  0% {
    transform: rotate(-10deg);
  }

  15% {
    transform: rotate(20deg);
  }
  55% {
    transform: rotate(-10deg);
  }
  70% {
    transform: rotate(6deg);
  }
  97% {
    background: $shoe;
  }
  98% {
    //  background: red;
  }
  100% {
    background: $shoe;
    transform: rotate(-15deg);
  }
}

@keyframes shadow {
  0%,
  50%,
  100% {
    bottom: -57px;
    z-index: -2;
  }
  25%,
  75% {
    bottom: -60px;
    width: 105px;
    margin-left: -10px;
    z-index: -2;
  }
}

@keyframes world_move {
  0% {
    left: -115px;
  }
  100% {
    left: -1000px;
  }
}

@keyframes lamp_move {
  0% {
    left: 2400px;
  }
  100% {
    left: -1000px;
  }
}

@keyframes lamp_move_pole {
  0% {
    left: 2600px;
  }
  100% {
    left: -1100px;
  }
}

@keyframes cans_move {
  0% {
    left: 3200px;
  }
  100% {
    left: -1600px;
  }
}

body.pause {
  *,
  *:after,
  *:before {
    animation-play-state: paused !important;
  }

  .author {
    opacity: 0.25;
    mix-blend-mode: overlay;
  }
}
View Compiled
// JS just toggles a class

document.onkeydown = KeyDown;
document.body.classList = "pause";

function KeyDown(event) {
  var KeyID = event.which;
  if (KeyID == 39) {
    document.body.classList.remove("pause");
  }
}

document.onkeyup = KeyUp;

function KeyUp(event) {
  var KeyID = event.which;
  if (KeyID == 39) {
    document.body.classList = "pause";
  }
}

document.getElementById("autoplay").addEventListener("click", function() {
  document.body.classList.remove("pause");
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.