Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <landscape>
  <sky>
    <x>
      <x></x>
      <x></x>
      <x></x>
    </x>
    <x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
    </x>
  </sky>
  <sea>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
  </sea>
  <beach>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
  </beach>
  <groins>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x></x>
    <x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
    </x>
    <x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
    </x>
    <x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
    </x>
    <x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
    </x>
  </groins>
  <seasun>
    <x></x>
    <x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
    </x>
    <x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
    </x>
    <x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
    </x>
    <x></x>
  </seasun>
  <houses>
    <x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
    </x>
    <x>
      <x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
      </x>
      <x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
        <x></x>
      </x>
    </x>
    <x>
      <x></x>
      <x></x>
      <x></x>
    </x>
    <x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
    </x>
    <x></x>
  </houses>
  <sig>
    <x></x>
  </sig>
</landscape>
              
            
!

CSS

              
                // v CHANGE THE COLOUR OF THE SUN v

$sun1: #f2de6f;

// ^ CHANGE THE COLOUR OF THE SUN ^ //
// $sun1: orange; // for example

$none: rgba(#fff, 0);

$red: adjust-hue($sun1, -50deg);
$red: darken($red, 25%);

$green2: adjust-hue($sun1, 25deg);
$green2: darken($green2, 30%);

$sky1: adjust-hue($sun1, 165deg);
$sky1: desaturate($sky1, 40%);
$sky2: adjust-hue($sun1, -15deg);

$sun2: lighten($sun1, 1%);
$light: lighten($sun1, 50%);
$sun3: adjust-hue($sun1, -20deg);

$purple: adjust-hue($sun1, 240deg);
$purple: darken($purple, 60%);

$body: $purple;

$bluegrey: desaturate($sky1, 20%);
$darksea2: darken($bluegrey, 50%);
$darksea3: darken($darksea2, 80%);

$darksea1: $darksea2;

$lightsea: lighten($sun1, 10%);

$sungrey: desaturate($sun1, 70%);
$sea1: darken($sungrey, 10%);
$sea2: darken($sky1, 50%);

$shadow: darken($sun1, 68%);

$wall: darken($sun1, 80%);

$beach: darken($sea1, 45%);
$beach1: lighten($beach, 1%);
$beach2: darken($beach, 2%);

$wave1: rgba($shadow, 0.9);
$wave2: desaturate($sun1, 90%);
$wave2: darken($wave2, 35%);

$green: adjust-hue($sun1, 20deg);
$green: desaturate($green, 50%);
$grass: darken($green, 67%);
$grass: rgba($grass, 0.95);

$grass2: darken($grass, 1%);
$grass3: darken($grass, 2%);
$grass4: darken($green, 67%);

$grass5: lighten($grass, 2%);

$house: darken($bluegrey, 47%);
$house2: darken($house, 10%);
$house3: lighten($house, 10%);
$house4: darken($sungrey, 64%);

$side: darken($sky1, 50%);
$side: desaturate($side, 10%);

$cloud: darken($sky1, 8%);
$cloud: desaturate($cloud, 40%);
$cloud: rgba($cloud, 0.4);

html {
  font-size: 0.97vmin;
  /*font-size: 6.2px;*/
}

@media (orientation: portrait) {
  html {
    font-size: 0.6vmin;
  }
}

body {
  margin: 0;
  background: $body;
  *,
  *:before,
  *:after {
    display: block;
    top: 0;
    left: 0;
    box-sizing: border-box;
    position: absolute;
    content: "";
    transform-style: preserve-3d;
    perspective: 200rem;
  }
}

landscape,
a {
  height: 100rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: linear-gradient($sky1, $sky2);
  width: 161rem;
  overflow: hidden;
  border-radius: 3rem;
  box-shadow: 0 0 5rem $shadow, 0 0 10rem $shadow, 0 0 50rem $shadow;
  &:after {
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 10rem $purple, inset 0 0 20rem $darksea2,
      inset 0 0 5rem $purple;
    opacity: 0.75;
    background: linear-gradient(rgba($purple, 0.3) 30%, $none);
  }
}
//Safari can't do the sea speckles
@supports (-webkit-marquee-repetition: infinite) and (object-fit: fill) {
  body {
    *,
    *:before,
    *:after {
      transform-style: flat !important;
      perspective: none !important;
    }
  }

  sea x:nth-of-type(9) {
    transform: translate3d(-10rem, 0, 0) !important;
    top: 0 !important;
  }

  houses > x:nth-of-type(3):after {
    display: none;
  }
}

@function waves($a, $b, $c) {
  $value: "#{random(150) + 200}rem #{random(60)}rem "+$b+" "+$c;

  @for $i from 2 through $a {
    $value: "#{$value} , #{random(150) + 100}rem #{random(61)}rem "+$b+" "+$c;
  }

  @return unquote($value);
}

$waves1: waves(1500, 0, $sea1);
$waves2: waves(1701, 0, $darksea2);

sea,
groins {
  height: 38%;
  top: auto;
  bottom: 0;
}

sea {
  width: 106%;
  left: -3%;
  background: $darksea2;
  box-shadow: inset 0 1rem 1rem $darksea2;

  &:before {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 40% 0%, $sea1, $none);
  }

  &:after {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right bottom, $none, $darksea2);
  }

  x:nth-of-type(1) {
    width: 120rem;
    height: 50rem;
    border-radius: 50%;
    border: 0 solid $none;
    border-top: 3rem solid $sea1;
    left: -30rem;
    top: 60%;
    -webkit-mask-image: linear-gradient(to right, #fff, $none);
    filter: blur(1rem);
    overflow: hidden;
    transform: skewX(-20deg) rotate(-3deg);
    opacity: 0.5;

    &:before {
      width: 100%;
      height: 100%;
      background: $darksea2;
      top: -85%;
      border-radius: 50%;
    }
  }

  x:nth-of-type(2) {
    width: 150rem;
    height: 50rem;
    border-radius: 50%;
    border: 0 solid $none;
    border-top: 2rem solid $darksea2;
    left: 30rem;
    top: 60%;
    overflow: hidden;
    transform: skewX(10deg) rotate(5deg);
    opacity: 0.8;
    -webkit-mask-image: linear-gradient(to right, $none, #fff);
    filter: blur(0.5rem);
  }

  x:nth-of-type(3) {
    width: 300rem;
    height: 50rem;
    border-radius: 50%;
    box-shadow: 20rem 0.5rem 0.2rem 1.2rem $darksea2,
      25rem 0.5rem 0.2rem 2.5rem $sea1, 50rem 0.5rem 0.2rem 4rem $darksea2;
    left: -50rem;
    top: 44%;
    overflow: hidden;
    transform: skewX(-20deg) rotate(4deg);
    opacity: 0.9;
  }

  x:nth-of-type(4) {
    width: 34rem;
    height: 4rem;
    border-radius: 50%;
    box-shadow: 10rem 2rem 1em $darksea2;
    left: 35rem;
    top: 43%;
    transform: skewX(-75deg) rotate(3deg);
    opacity: 0.3;
    filter: blur(1rem);
  }

  x:nth-of-type(5) {
    width: 24rem;
    height: 0.2rem;
    background: $darksea2;
    left: 0rem;
    top: 2rem;
    border-radius: 50%;
    filter: blur(0.3rem);
    box-shadow: 2rem 0.6rem 0 rgba($lightsea, 0.4);

    &:before {
      left: 28rem;
      width: 6rem;
      height: 0.2rem;
      background: $darksea2;
      border-radius: 50%;
    }

    &:after {
      left: 24rem;
      top: 0.8rem;
      width: 12rem;
      height: 0.4rem;
      background: $sea1;
      border-radius: 50%;
      box-shadow: 15rem 0 0 $sea1;
    }
  }

  x:nth-of-type(6) {
    width: 35rem;
    height: 0.4rem;
    background: $darksea2;
    left: 0rem;
    top: 5rem;
    border-radius: 50%;
    filter: blur(0.3rem);
    opacity: 0.5;
    box-shadow: 36rem 0 0 $sea1;

    &:before {
      left: 34rem;
      top: -0.75rem;
      width: 35rem;
      height: 0.2rem;
      background: $lightsea;
      border-radius: 50%;
    }

    &:after {
      left: 45rem;
      top: -1.5rem;
      width: 10rem;
      height: 0.1rem;
      background: $lightsea;
      border-radius: 50%;
    }
  }

  x:nth-of-type(7) {
    width: 30rem;
    height: 1rem;
    background: rgba($lightsea, 0.5);
    left: 0rem;
    top: 6.5rem;
    border-radius: 50%;
    filter: blur(0.3rem);
    opacity: 0.2;
    box-shadow: 36rem 0 0 $lightsea;

    &:before {
      left: 1rem;
      top: 1rem;
      width: 20rem;
      height: 1.5rem;
      background: $darksea2;
      border-radius: 50%;
      transform: rotate(-1deg);
      box-shadow: 22rem 0 0 $darksea2, 50rem 0.5rem 0 $darksea2;
    }

    &:after {
      left: 52rem;
      top: 2.5rem;
      width: 10rem;
      height: 1rem;
      background: $darksea2;
      border-radius: 50%;
      transform: rotate(-1deg);
      box-shadow: -15rem 1rem 0 $darksea2, -18rem 0rem 0 $darksea2,
        -1rem 3.5rem 0 $darksea2;
    }
  }

  x:nth-of-type(8) {
    width: 20rem;
    height: 1rem;
    background: $darksea2;
    left: 7rem;
    top: 9.5rem;
    border-radius: 50%;
    filter: blur(0.2rem);
    opacity: 0.3;
    transform: rotate(-1deg);
    box-shadow: 5rem -2rem 0 rgba($lightsea, 0.2), 50rem 2rem 0 $darksea2,
      50rem 5rem 0 $darksea2;

    &:before {
      left: -1rem;
      top: 1rem;
      width: 20rem;
      height: 1rem;
      background: $darksea2;
      border-radius: 50%;
      transform: rotate(2deg);
    }

    &:after {
      left: -2rem;
      top: 2.5rem;
      width: 35rem;
      height: 1rem;
      background: $lightsea;
      border-radius: 50%;
      transform: rotate(1deg);
      opacity: 0.5;
      box-shadow: 40rem 1rem 0 $lightsea, 43rem -3rem 0 $lightsea,
        35rem -1rem 0 $lightsea;
    }
  }

  x:nth-of-type(10) {
    width: 100%;
    height: 100%;
    background-image: radial-gradient($lightsea 20%, $none 0),
      radial-gradient($lightsea 20%, $none 0);
    background-size: 1rem 1rem;
    background-position: 0 0, 0.5rem 0.5rem;
    opacity: 0.15;
    box-shadow: inset 0 0 2em $darksea3, 0 0 2em $darksea3;
    top: 1em;
  }

  x:nth-of-type(9) {
    width: 200%;
    height: 400%;
    left: -50%;
    top: -132%;
    transform: translateZ(70rem) rotateX(70deg);
    opacity: 0.2;

    &:before {
      box-shadow: $waves2;
      width: 1.5rem;
      height: 0.5rem;
      border-radius: 50%;
    }

    &:after {
      box-shadow: $waves1;
      width: 1.5rem;
      height: 0.5rem;
      border-radius: 50%;
    }
  }

  & > x:nth-of-type(11) {
    width: 100%;
    background: linear-gradient(
      to right,
      $none,
      $none 30%,
      $sky2 60%,
      $none,
      $none
    );
    height: 100%;
    top: auto;
    bottom: 0;
  }

  & > x:nth-of-type(12) {
    width: 40rem;
    border-radius: 50%;
    height: 50rem;
    background: linear-gradient(to right, $none, $sun3, $none);
    transform: translate3d(80rem, 8rem, 0) skewX(-4deg);
    filter: blur(1rem);
  }
}

groins {
  width: 100%;

  & > x:nth-of-type(1) {
    width: 0.8rem;
    height: 3.2rem;
    background: $shadow;
    left: 22.75rem;
    top: 10.4rem;
    border-radius: 0.2rem;
    transform: skewX(-2deg);

    &:before {
      top: auto;
      bottom: 0;
      width: 0.3rem;
      height: 5.5rem;
      background: $shadow;
    }

    &:after {
      top: auto;
      bottom: 0;
      width: 0.2rem;
      height: 8rem;
      background: $shadow;
      left: 0.2rem;
    }
  }

  & > x:nth-of-type(2) {
    width: 8rem;
    height: 0.5rem;
    background: $shadow;
    left: 22rem;
    top: 12.3rem;
    border-radius: 0.2rem;
    transform: skewX(-2deg) rotate(-2deg);
    box-shadow: -0.1rem 0.65rem 0.2rem -0.15rem rgba($shadow, 0.7);

    &:before {
      width: 0.6rem;
      height: 2.5rem;
      background: $shadow;
      left: 7rem;
      border-radius: 0.2rem;
      transform: skewX(-2deg);
      top: auto;
      bottom: -0.5rem;
    }

    &:after {
      width: 0.5rem;
      height: 3rem;
      background: $shadow;
      left: 7.25rem;
      border-radius: 0.2rem;
      transform: skewX(-6deg);
      top: auto;
      bottom: -0.5rem;
    }
  }

  & > x:nth-of-type(3) {
    width: 1.1rem;
    height: 1.1rem;
    background: $beach;
    left: 22.6rem;
    top: 5rem;
    border-radius: 0.2rem;
    transform: skewX(-2deg) rotate(-2deg);
    border-left: 0.1rem solid $shadow;
    border-right: 0.1rem solid $shadow;

    &:before {
      width: 0.3rem;
      height: 1.1rem;
      background: $shadow;
      left: 0.32rem;
      box-shadow: 0.1rem 0 0.1rem rgba($body, 0.5);
    }

    &:after {
      width: 7rem;
      height: 0.1rem;
      background: rgba($shadow, 0.5);
      transform: rotate(25deg);
      top: 5.5rem;
    }
  }

  & > x:nth-of-type(4) {
    width: 1rem;
    height: 0.5rem;
    background: $shadow;
    left: 22.5rem;
    top: 13.5rem;
    box-shadow: -0.1rem 0.5rem 0.1rem 0.1rem $shadow,
      0.1rem 0.75rem 0.2rem 0.2rem rgba($shadow, 0.8),
      -0.2rem 1.5rem 0.3rem 0.3rem rgba($shadow, 0.6),
      0rem 3rem 0.4rem 0.4rem rgba($shadow, 0.4),
      -0.1rem 4rem 0.5rem 0.5rem rgba($shadow, 0.2);
    border-radius: 50%;
    opacity: 0.3;
    filter: blur(0.1rem);

    &:before {
      width: 1rem;
      height: 0.5rem;
      background: $shadow;
      left: 6.4rem;
      top: 0rem;
      box-shadow: -0.1rem 0.5rem 0.1rem 0.1rem $shadow,
        -0.1rem 0.75rem 0.2rem 0.2rem rgba($shadow, 0.8),
        0.2rem 2rem 0.3rem 0.3rem rgba($shadow, 0.4),
        -0.2rem 4rem 0.4rem 0.4rem rgba($shadow, 0.2),
        -0.4rem 6rem 0.5rem 0.5rem rgba($shadow, 0.1);
      border-radius: 50%;
    }
  }

  & > x:nth-of-type(5) {
    width: 0.3rem;
    height: 1.5rem;
    background: $shadow;
    left: 31rem;
    top: 4.1rem;
    border-radius: 0.2rem;
    transform: skewX(4deg);
    box-shadow: 2.5rem 0 0 $shadow, 2.5rem 1.5rem 0.1rem rgba($shadow, 0.1),
      0 1.5rem 0.1rem rgba($shadow, 0.1),
      0 0.5rem 0.2rem 0.2rem rgba($shadow, 0.1);
    opacity: 0.9;

    &:before {
      top: -1rem;
      left: 0.1rem;
      width: 0.1rem;
      height: 1rem;
      background: rgba($shadow, 0.5);
      transform: skewX(-15deg);
    }

    &:after {
      width: 0.6rem;
      height: 0.6rem;
      background: $beach;
      left: 0.2rem;
      top: -1.6rem;
      border-radius: 0.2rem;
      transform: skewX(-15deg) rotate(-2deg);
      border-left: 0.1rem solid $shadow;
      border-right: 0.1rem solid $shadow;
    }
  }

  & > x:nth-of-type(6) {
    width: 0.2rem;
    height: 0.7rem;
    background: $shadow;
    left: 34rem;
    top: 2.5rem;
    border-radius: 0.2rem;
    transform: skewX(0.2deg);
    box-shadow: 1.5rem 0 0 $shadow, 1.5rem 1.5rem 0.1rem rgba($shadow, 0.2),
      0 1.5rem 0.1rem rgba($shadow, 0.2),
      0 0.5rem 0.2rem 0.2rem rgba($shadow, 0.2);
    opacity: 0.8;

    &:before {
      top: -1rem;
      left: 0rem;
      width: 0.1rem;
      height: 1rem;
      background: rgba($shadow, 0.5);
      transform: skewX(-5deg);
    }

    &:after {
      width: 0.3rem;
      height: 0.3rem;
      background: $beach;
      left: -0.1rem;
      top: -1rem;
      border-radius: 0.2rem;
      transform: skewX(-2deg) rotate(-2deg);
      border-left: 0.1rem solid $shadow;
      border-right: 0.1rem solid $shadow;
    }
  }

  & > x:nth-of-type(7) {
    width: 0.1rem;
    height: 0.4rem;
    background: $shadow;
    left: 33.1rem;
    top: 1.9rem;
    border-radius: 0.05rem;
    transform: skewX(-0.2deg);
    box-shadow: 1.3rem 0 0 $shadow, 1.3rem 0.4rem 0.1rem rgba($shadow, 0.2),
      0 0.3rem 0.1rem rgba($shadow, 0.2),
      0 0.5rem 0.2rem 0.2rem rgba($shadow, 0.2);
    opacity: 0.7;

    &:before {
      top: -0.7rem;
      left: 0rem;
      width: 0.1rem;
      height: 0.7rem;
      background: rgba($shadow, 0.5);
      transform: skewX(-5deg);
    }

    &:after {
      width: 0.2rem;
      height: 0.2rem;
      background: $beach;
      left: 0;
      top: -0.7rem;
      border-radius: 0.2rem;
      transform: skewX(-2deg) rotate(-2deg);
      border-left: 0.1rem solid $shadow;
      border-right: 0.1rem solid $shadow;
    }
  }

  & > x:nth-of-type(8) {
    width: 1.5rem;
    height: 5rem;
    background: $shadow;
    border-radius: 0.5rem 0.5rem 0.75rem 0.75rem;
    transform: translate3d(131rem, 25rem, 0) skewX(2deg) skewY(4deg);
    box-shadow: 0 -0.9rem 0 -0.15rem $shadow, 8rem -1.5rem 0 -0.15rem $shadow,
      15rem -2rem 0 -0.15rem $shadow, 22.6rem -2.5rem 0 -0.15rem $shadow,
      29.5rem -2.9rem 0 -0.15rem $shadow, 8rem -0.5rem 0 0 $shadow,
      15rem -1rem 0 0 $shadow, 22.6rem -1.5rem 0 0 $shadow,
      29.5rem -1.9rem 0 0 $shadow;

    &:before {
      width: 16rem;
      height: 1rem;
      background: $shadow;
      transform: translate3d(0, 2.5rem, 0) skewY(-3deg);
      box-shadow: 0 0.2vmin 0.2vmin 0 rgba($shadow, 0.5);
    }

    &:after {
      width: 16rem;
      height: 2rem;
      background: $shadow;
      transform: translate3d(16rem, 0.5rem, 0) skewY(-4deg);
      box-shadow: 0 0.2vmin 0.2vmin 0 rgba($shadow, 0.5);
    }
  }

  & > x:nth-of-type(9) {
    width: 1.5rem;
    height: 0.75rem;
    border-radius: 0 0 0.75rem 0.75rem;
    left: 131rem;
    top: 29rem;
    background: $shadow;
    transform: skewY(-4deg);
    box-shadow: 1rem -0.2rem 0.5rem rgba($shadow, 0.75),
      3rem -0.3rem 0.5rem rgba($shadow, 0.75),
      -0.15rem 0.5rem 0.2rem rgba($shadow, 0.95),
      0.35rem 1rem 0.2rem rgba($shadow, 0.9),
      0.25rem 1.75rem 0.2rem rgba($shadow, 0.8),
      0 2rem 0.2rem rgba($shadow, 0.7),
      1rem 2rem 0.2rem -0.2rem rgba($shadow, 0.7),
      -0.5rem 2.5rem 0.2rem -0.2rem rgba($shadow, 0.6),
      0rem 2.75rem 0.2rem -0.2rem rgba($shadow, 0.9),
      0.2rem 2rem 0.3rem 0.3rem rgba($shadow, 0.4),
      -0.2rem 4rem 0.4rem 0.4rem rgba($shadow, 0.2),
      -0.4rem 6rem 0.5rem 0.5rem rgba($shadow, 0.1),
      1.2rem 5.5rem 0.4rem 0.4rem rgba($shadow, 0.1),
      1.4rem 7.2rem 0.5rem 0.5rem rgba($shadow, 0.05),
      //post2
      9.5rem 0.25rem 0.25rem rgba($shadow, 0.75),
      10.5rem 0.5rem 0.5rem rgba($shadow, 0.75),
      8rem 1rem 0.2rem rgba($shadow, 0.95),
      8.1rem 2.1rem 0.2rem rgba($shadow, 0.8),
      8.5rem 3rem 0.2rem rgba($shadow, 0.7),
      8.2rem 2rem 0.3rem 0.3rem rgba($shadow, 0.4),
      7.92rem 4rem 0.4rem 0.4rem rgba($shadow, 0.2),
      7.8rem 6rem 0.5rem 0.5rem rgba($shadow, 0.1),
      8.5rem 5.5rem 0.4rem 0.4rem rgba($shadow, 0.1),
      9rem 7.2rem 0.5rem 0.5rem rgba($shadow, 0.05),
      //post3
      16.5rem 1rem 0.5rem rgba($shadow, 0.75),
      17.5rem 1rem 0.5rem rgba($shadow, 0.75),
      15rem 1rem 0.2rem rgba($shadow, 0.95),
      15.1rem 2.5rem 0.2rem rgba($shadow, 0.8),
      14.9rem 3rem 0.2rem rgba($shadow, 0.1),
      15.2rem 2rem 0.3rem 0.3rem rgba($shadow, 0.4),
      14.92rem 4rem 0.4rem 0.4rem rgba($shadow, 0.2),
      14.8rem 6rem 0.5rem 0.5rem rgba($shadow, 0.1),
      15.5rem 5.5rem 0.4rem 0.4rem rgba($shadow, 0.1),
      16rem 7.2rem 0.5rem 0.5rem rgba($shadow, 0.05),
      //post4
      26.5rem 1rem 0.5rem rgba($shadow, 0.75),
      27.5rem 1rem 0.5rem rgba($shadow, 0.75),
      23rem 1rem 0.2rem rgba($shadow, 0.95),
      23.1rem 2.5rem 0.2rem rgba($shadow, 0.5),
      22.6rem 3rem 0.2rem rgba($shadow, 0.9),
      22.2rem 2rem 0.3rem 0.3rem rgba($shadow, 0.4),
      22.92rem 4rem 0.4rem 0.4rem rgba($shadow, 0.2),
      22.8rem 6rem 0.5rem 0.5rem rgba($shadow, 0.1),
      24.5rem 5.5rem 0.4rem 0.4rem rgba($shadow, 0.1),
      25rem 7.2rem 0.5rem 0.5rem rgba($shadow, 0.05);

    &:before {
      width: 1.2rem;
      height: 0.25rem;
      border-radius: 0 0 0.75rem 0.75rem;
      left: 8rem;
      top: 3.5rem;
      background: $shadow;
      transform: skewY(4deg);
      opacity: 0.7;
      box-shadow: 1rem 1rem 0.3rem $shadow,
        //
        1.5rem 1.25rem 0.3rem $shadow,
        //
        7rem 0rem 0.2rem $shadow,
        //
        9rem -2rem 0.3rem $shadow,
        //
        10rem -2.5rem 0.2rem $shadow,
        //
        10.5rem -2rem 0.2rem $shadow,
        //
        11rem -2.25rem 0.2rem $shadow,
        //
        11.3rem -2.75rem 0.3rem $shadow,
        //
        12.3rem -2.5rem 0.4rem $shadow,
        //
        14rem -2.35rem 0.2rem $shadow,
        //
        16rem 2.35rem 0.2rem $shadow,
        //
        15rem 1rem 0.5rem $shadow,
        //
        16rem -2rem 0.2rem $shadow,
        //
        17rem -2rem 0.2rem $shadow,
        //
        19.5rem -2.5rem 0.2rem $shadow,
        //
        18.2rem -1.9rem 0.5rem $shadow,
        //
        17.2rem -1rem 0.4rem $shadow,
        //
        17.6rem -1.1rem 0.2rem $shadow,
        //
        18.1rem -0.9rem 0.2rem $shadow,
        //
        21rem -1.4rem 0.2rem $shadow,
        //
        21.1rem -2rem 0.2rem $shadow;
    }

    &:after {
      left: -0.2rem;
      top: -8rem;
      background: $shadow;
      width: 0.6rem;
      height: 9rem;
      transform: skewY(18deg);
    }
  }

  & > x:nth-of-type(10) {
    left: 138.5rem;
    top: 23.3rem;
    width: 2rem;
    height: 2rem;
    transform: rotate(-30deg);
    overflow: hidden;
    border-radius: 50% 0 0 0 / 0.2rem 0 0 0;

    &:before {
      background: $house2;
      border-radius: 0 40% 60% 0;
      transform: rotate(30deg);
      height: 1rem;
      width: 2rem;
      left: -0.4rem;
      top: -0.6rem;
      box-shadow: 0.4rem -0.4rem 0 0.4rem darken($house, 5%);
    }

    &:after {
      height: 0.5rem;
      width: 0.1rem;
      background: darken($red, 30%);
      transform: rotate(30deg);
      top: 0.65rem;
      left: 1rem;
    }
  }

  & > x:nth-of-type(11) {
    left: 139.5rem;
    top: 22.9rem;
    width: 0.8rem;
    height: 0.65rem;
    border-radius: 50%;
    background: darken($house, 5%);

    &:before {
      left: 0.2rem;
      top: -0.3rem;
      width: 0.6rem;
      height: 0.5rem;
      border-radius: 50% 50% 50% 0;
      background: darken($house, 5%);
    }

    &:after {
      border: 0.1rem solid $none;
      border-top: 0.4rem solid darken($red, 30%);
      transform: rotate(44deg);
      left: 0.1rem;
      top: 0.05rem;
    }
  }

  & > x:nth-of-type(12),
  & > x:nth-of-type(13),
  & > x:nth-of-type(14),
  & > x:nth-of-type(15) {
    & > x:nth-of-type(1) {
      width: 0.3rem;
      height: 1.7rem;
      border-radius: 0.1rem;
      background: $shadow;
      transform: skew(4deg);

      &:before {
        left: 7rem;
        top: 0.4rem;
        width: 0.2rem;
        height: 1.3rem;
        border-radius: 0.1rem;
        background: $shadow;
        transform: skew(-6deg);
        box-shadow: 2.1rem 0.1rem 0 $shadow,
          //
          -2.1rem 0 0 $shadow,
          //
          -4.2rem 0 0 $shadow,
          //
          -6rem 0 0.1rem $shadow;
      }

      &:after {
        left: 1.5rem;
        top: 1.2rem;
        width: 6rem;
        height: 1rem;
        border-radius: 0 0 100% 100%;
        background: $shadow;
        box-shadow: 0 0 0.2rem 0 $shadow;
        transform: scaleY(0.2);
        opacity: 0.8;
      }
    }

    & > x:nth-of-type(2) {
      transform: translate3d(10.9rem, 0.6rem, 0) rotate(-2deg);
      width: 0.3rem;
      height: 1rem;
      border-radius: 0.1rem;
      background: $shadow;
      box-shadow: 2rem 0 0 $shadow,
        //
        4.05rem 0 0 $shadow,
        //
        5.9rem 0 0 $shadow,
        //
        7.9rem 0 0 $shadow;

      &:before {
        left: 2.1rem;
        top: 0.5rem;
        width: 4rem;
        height: 0.5rem;
        background: $shadow;
        transform: rotate(1deg);
        box-shadow: -2rem 0 0 -0.1rem $shadow,
          //
          4rem 0 0 0.1rem $shadow,
          //
          0 0.3rem 0.2rem rgba($shadow, 0.2),
          //
          -2rem 0.2rem 0.2rem -0.1rem rgba($shadow, 0.2),
          //
          4rem 0.5rem 0.2rem 0.1rem rgba($shadow, 0.2);
      }

      &:after {
        left: 9.6rem;
        top: -0.5rem;
        width: 0.4rem;
        height: 1.5rem;
        border-radius: 0.1rem;
        background: $shadow;
        box-shadow: 2rem 0 0 $shadow,
          //
          4.05rem 0 0 $shadow,
          //
          5.9rem 0 0 $shadow,
          //
          7.9rem -0.1rem 0 $shadow,
          //
          9.8rem -0.2rem 0 $shadow,
          //
          11.6rem -0.3rem 0 $shadow,
          //
          13.5rem -0.5rem 0 $shadow,
          //
          15.5rem -0.5rem 0 $shadow,
          //
          17.4rem -0.6rem 0 $shadow,
          //
          19.4rem -0.7rem 0 $shadow,
          //
          21.7rem -0.8rem 0 $shadow,
          //
          26.5rem -0.6rem 0 $shadow; //
      }
    }

    & > x:nth-of-type(3) {
      transform: translate3d(20.5rem, 0.6rem, 0) rotate(-2deg);
      width: 2.2rem;
      height: 0.6rem;
      background: $shadow;
      box-shadow: 2.2rem -0.1rem 0 $shadow,
        //
        4.4rem -0.2rem 0 $shadow,
        //
        6.2rem -0.3rem 0 $shadow,
        //
        8.2rem -0.4rem 0 $shadow,
        //
        10rem -0.5rem 0 $shadow,
        //
        12rem -0.6rem 0 $shadow,
        //
        14rem -0.7rem 0 $shadow,
        //
        16rem -0.8rem 0 $shadow,
        //
        18rem -0.9rem 0 $shadow,
        //
        20rem -1rem 0 $shadow; //
      &:before {
        left: 21.8rem;
        top: -1.1rem;
        width: 4.8rem;
        height: 1.5rem;
        background: $shadow;
        transform: rotate(1deg);
        border-radius: 0.2rem;
        box-shadow: 1rem 0.2rem 0 $shadow,
          //
          1.5rem 0.5rem 0.5rem $shadow,
          //
          -5rem 0.6rem 0 0.2rem $shadow,
          //
          -5rem 0.8rem 0.2rem 0.2rem rgba($shadow, 0.5),
          //
          -10rem 1rem 0 0 $shadow,
          //
          -10rem 1.2rem 0.2rem 0 rgba($shadow, 0.5);
      }

      &:after {
        width: 8rem;
        height: 1rem;
        left: 0;
        top: 0rem;
        background: $shadow;
        box-shadow: 0 0.2rem 0.2rem rgba($shadow, 0.2),
          //
          7.8rem 0 0 0.2rem $shadow;
      }
    }

    & > x:nth-of-type(4) {
      transform: translate3d(40rem, -0.5rem, 0);
      width: 7rem;
      height: 1.75rem;
      border-radius: 0.2rem;
      background: $shadow;

      &:before {
        width: 0.4rem;
        height: 5rem;
        border-radius: 0.2rem;
        background: $shadow;
        opacity: 0.4;
        transform: translate3d(-19.5rem, -0.5rem, 0) rotateY(-6deg)
          rotateX(80deg);
        box-shadow: 2rem 0 0.15rem $shadow,
          //
          4.05rem 0 0.15rem $shadow,
          //
          5.9rem 0 0.15rem $shadow,
          //
          7.9rem -0.1rem 0.15rem $shadow,
          //
          9.8rem 0.4rem 0.15rem $shadow,
          //
          11.6rem 0.5rem 0.15rem $shadow,
          //
          13.5rem 0.6rem 0.15rem $shadow,
          //
          15.5rem 0.7rem 0.2rem $shadow,
          //
          17.4rem 0.8rem 0.2rem $shadow,
          //
          19.4rem 0.9rem 0.25rem $shadow,
          //
          21.7rem 0.1rem 0.25rem $shadow;
      }

      &:after {
        transform: translate3d(-4rem, 0.2rem, 0) skewX(45deg);
        background: $wave2;
        width: 0.4rem;
        height: 2rem;
        border-radius: 0.2rem;
        opacity: 0.2;
        box-shadow: 6.25rem 0 0 rgba($wave2, 0.7),
          -6.5rem 0.5rem 0 rgba($wave2, 0.9);
      }
    }

    & > x:nth-of-type(5) {
      transform: translate3d(42rem, 0.5rem, 0) skewY(-5deg);
      height: 1rem;
      width: 8rem;
      border-radius: 50%;
      background: $beach2;
      box-shadow: inset 0.5rem 0.2rem 0.2rem rgba($shadow, 0.75);

      &:before {
        transform: translate3d(-5.3rem, 0rem, 0) skewY(4deg);
        height: 0.7rem;
        width: 8rem;
        border-radius: 50%;
        background: $beach2;
        box-shadow: inset 1rem 0.2rem 0.2rem rgba($shadow, 0.75);
      }

      &:after {
        transform: translate3d(-14rem, -1rem, 0) skewY(20deg) rotate(60deg);
        height: 3rem;
        width: 2rem;
        border-radius: 0.3rem;
        background: linear-gradient(
          105deg,
          $wave2,
          $wave2,
          rgba($shadow, 0.25) 25%,
          $none,
          $none
        );
        filter: blur(0.1rem);
      }
    }
  }

  & > x:nth-of-type(12) {
    transform: translate3d(60rem, 5.5rem, 0);
  }

  & > x:nth-of-type(13) {
    transform: translate3d(50.5rem, 3.1rem, 0) scale(0.6);

    & > x:nth-of-type(1):after {
      display: none;
    }

    x:nth-of-type(5) {
      background: darken($beach, 7%);
      box-shadow: 2rem 0.5rem 0 -0.2rem darken($beach, 6%),
        //
        3rem 0.6rem 0 -0.3rem darken($beach, 8%);

      &:after {
        display: none;
      }
    }
  }

  & > x:nth-of-type(14) {
    transform: translate3d(47rem, 2rem, 0) scale(0.4);

    & > x:nth-of-type(1):after {
      left: 5.5rem;
    }

    x:nth-of-type(5):after {
      display: none;
    }
  }

  & > x:nth-of-type(15) {
    transform: translate3d(43rem, 1.5rem, 0) scale(0.3);

    & > x:nth-of-type(1):after {
      display: none;
    }

    x:nth-of-type(5):after {
      display: none;
    }
  }
}

beach {
  & > *,
  & > *:before,
  & > *:after {
    border-radius: 50%;
  }

  & > x:nth-of-type(1) {
    width: 30rem;
    height: 1rem;
    background: $beach;
    transform: translate3d(50rem, 62rem, 0);

    &:before {
      width: 1rem;
      height: 1rem;
      background: $beach;
      transform: translate3d(2rem, -0.15rem, 0);
    }

    &:after {
      width: 2rem;
      height: 1rem;
      background: $beach;
      transform: translate3d(3rem, -0.15rem, 0);
      border-radius: 0.5rem 1rem 0 0;
    }
  }

  & > x:nth-of-type(2) {
    width: 250rem;
    height: 2.5rem;
    background: $house;
    transform: translate3d(50rem, 65.5rem, 0) skewX(-40deg) skewY(2.1deg);
    border-bottom: 3rem solid $house4;
    box-sizing: content-box;
    box-shadow: 20rem 1rem 1rem $shadow;

    &:after {
      width: 250rem;
      height: 2.5rem;
      border-bottom: 0.6rem solid $shadow;
      box-sizing: content-box;
    }

    &:before {
      width: 250rem;
      height: 2.5rem;
      border-bottom: 1rem solid rgba($shadow, 0.5);
      box-sizing: content-box;
    }
  }

  & > x:nth-of-type(5) {
    width: 25rem;
    height: 4rem;
    background: $beach1;
    transform: translate3d(150rem, 74rem, 0) skewX(50deg) skewY(5deg);
    filter: blur(0.3rem);

    &:before {
      width: 15rem;
      height: 3rem;
      background: $beach1;
      transform: translate3d(-20rem, -1rem, 0);
    }

    &:after {
      width: 20rem;
      height: 2rem;
      background: $beach1;
      transform: translate3d(-2rem, -3rem, 0) skewX(-82deg) skewY(6deg);
      box-shadow: 1rem -1.5rem 0 $beach,
        //
        12rem 0rem 0 $beach;
    }
  }

  & > x:nth-of-type(4) {
    width: 25rem;
    height: 4rem;
    background: $beach2;
    transform: translate3d(152rem, 76rem, 0) skewX(50deg) skewY(5deg);

    &:before {
      width: 15rem;
      height: 3rem;
      background: $beach2;
      transform: translate3d(-20rem, -1rem, 0);
    }

    &:after {
      width: 15rem;
      height: 3rem;
      background: $beach2;
      transform: translate3d(-10rem, -5rem, 0);
      box-shadow: 2rem 3rem 1rem $beach,
        //
        4rem 1rem 1rem $beach,
        //
        5rem 2rem 1rem $beach,
        //
        1rem 5.5rem 0 $beach;
    }
  }

  & > x:nth-of-type(3) {
    width: 10rem;
    height: 3rem;
    background: $beach2;
    transform: translate3d(120rem, 70rem, 0) skewX(50deg) skewY(5deg);

    &:before {
      width: 10rem;
      height: 2rem;
      background: $beach2;
      transform: translate3d(2rem, -1.7rem, 0) rotate(-5deg);
      box-shadow: 5rem 1rem 0 $beach2,
        //
        0rem 0rem 0.5rem $shadow,
        //
        4rem 0.5rem 0 $beach,
        //
        10rem 0.5rem 0 $beach,
        //
        10rem 0.5rem 0.5rem $shadow,
        //
        17rem 0.6rem 0 $beach2,
        //
        23rem 0.8rem 0 $beach,
        //
        26rem 1rem 0 0.1rem $beach2;
    }

    &:after {
      width: 8rem;
      height: 1.75rem;
      background: $beach;
      transform: translate3d(-3rem, -1.2rem, 0) rotate(-5deg);
      box-shadow: -7rem -0.5rem 0 $beach1,
        //
        -4rem -0.4rem 0 $beach1,
        //
        -4rem 1rem 0 $beach1,
        //
        1rem 2rem 0 $beach1,
        //
        -11rem -0.25rem 0 -0.3rem $beach2;
    }
  }

  & > x:nth-of-type(7) {
    width: 2rem;
    height: 0.5rem;
    background: $wave1;
    transform: translate3d(121rem, 72rem, 0) skewX(69deg);
    border-radius: 0.5rem;
    box-shadow: -2rem 0 0.25rem 0.1rem $wave2,
      //
      0.5rem 0 0.25rem -0.1rem $wave2,
      //
      1rem 0.25rem 0.25rem $wave1,
      //
      -1rem 0.25rem 0.25rem 0.1rem $wave2,
      //
      1.5rem 0.25rem 0.25rem 0.2rem $wave2,
      //
      3rem 0.5rem 0.25rem -0.1rem $wave2,
      //
      2rem 0.5rem 0.25rem 0.2rem $wave2,
      //
      3.5rem 0.5rem 0.25rem 0.1rem $wave2;
    filter: blur(0.1rem);

    &:before {
      width: 2rem;
      height: 0.5rem;
      background: $wave1;
      transform: translate3d(1rem, 1rem, 0);
      border-radius: 0.5rem;
      box-shadow: -2rem 0 0.25rem $wave2,
        //
        0.5rem 0 0.25rem 0.1rem $wave2,
        //
        1rem 0.5rem 0.25rem $wave1,
        //
        -1rem 0.5rem 0.25rem $wave2,
        //
        1.5rem 0.5rem 0.25rem 0.1rem $wave2,
        //
        2rem 1rem 0.25rem $wave1,
        //
        1rem 1rem 0.25rem 0.1rem $wave2,
        //
        2.5rem 1rem 0.25rem $wave2;
    }

    &:after {
      width: 2.5rem;
      height: 0.52rem;
      background: $wave1;
      transform: translate3d(3rem, 2rem, 0);
      border-radius: 0.5rem;
      box-shadow: -2rem 0 0.25rem 0.1rem $wave2,
        //
        0.5rem 0 0.25rem $wave2,
        //
        1rem 0.5rem 0.25rem -0.1rem $wave1,
        //
        -1rem 0.5rem 0.25rem $wave2,
        //
        1.5rem 0.5rem 0.25rem 0.1rem $wave2,
        //
        2rem 1rem 0.25rem $wave1,
        //
        1rem 1rem 0.25rem 0.1rem $wave2,
        //
        2.5rem 1rem 0.25rem $wave2;
    }
  }

  & > x:nth-of-type(6) {
    width: 3rem;
    height: 0.5rem;
    background: $wave1;
    transform: translate3d(110rem, 70rem, 0) skewX(69deg);
    border-radius: 0.5rem;
    box-shadow: -2rem 0 0.25rem $wave2,
      //
      0.5rem 0 0.25rem $wave2,
      //
      1rem 0.25rem 0.25rem $wave1,
      //
      -1rem 0.25rem 0.25rem $wave2,
      //
      1.5rem 0.25rem 0.25rem $wave2,
      //
      3rem 0.5rem 0.25rem $wave2,
      //
      2rem 0.5rem 0.25rem $wave2,
      //
      3.5rem 0.5rem 0.25rem $wave2;
    filter: blur(0.2rem);

    &:before {
      width: 2rem;
      height: 0.5rem;
      background: $wave1;
      transform: translate3d(1rem, 1rem, 0);
      border-radius: 0.5rem;
      box-shadow: -2rem 0 0.25rem $wave2,
        //
        0.5rem 0 0.25rem $wave2,
        //
        1rem 0.5rem 0.25rem $wave1,
        //
        -1rem 0.5rem 0.25rem $wave2,
        //
        1.5rem 0.5rem 0.25rem $wave2,
        //
        2rem 1rem 0.25rem $wave1,
        //
        1rem 1rem 0.25rem $wave2,
        //
        2.5rem 1rem 0.25rem $wave2;
    }

    &:after {
      width: 2.5rem;
      height: 0.52rem;
      background: $wave1;
      transform: translate3d(3rem, 2rem, 0);
      border-radius: 0.5rem;
      box-shadow: -2rem 0 0.25rem $wave2,
        //
        0.5rem 0 0.25rem $wave2,
        //
        1rem 0.5rem 0.25rem $wave1,
        //
        -1rem 0.5rem 0.25rem $wave2,
        //
        1.5rem 0.5rem 0.25rem $wave2,
        //
        2rem 1rem 0.25rem $wave1,
        //
        1rem 1rem 0.25rem $wave2,
        //
        2.5rem 1rem 0.25rem $wave2;
    }
  }

  & > x:nth-of-type(8) {
    width: 3rem;
    height: 0.75rem;
    background: $wave2;
    transform: translate3d(105rem, 70rem, 0) skewX(69deg);
    border-radius: 0.75rem;
    filter: blur(0.1rem);
    box-shadow: 2rem 0.75rem 0 0.1rem $wave2,
      //
      4rem 1.25rem 0 -0.1rem $wave2,
      //
      5rem 2rem 0 $wave2,
      //
      6rem 2.75rem 0 0.2rem $wave2,
      //
      8rem 3.25rem 0 0.1rem $wave2,
      //
      10rem 4rem 0 -0.1rem $wave2;

    &:before {
      width: 3rem;
      height: 0.75rem;
      background: $wave2;
      transform: translate3d(5rem, 3rem, 0);
      border-radius: 0.75rem;
      filter: blur(0.1rem);
      box-shadow: 2rem 0.75rem 0 0.1rem $wave2,
        //
        4rem 1.25rem 0 -0.1rem $wave2,
        //
        5rem 2rem 0 $wave2,
        //
        6rem 2.75rem 0 0.2rem $wave2,
        //
        8rem 3.25rem 0 0.1rem $wave2,
        //
        10rem 4rem 0 -0.1rem $wave2;
    }

    &:after {
      width: 3rem;
      height: 0.75rem;
      background: $wave2;
      transform: translate3d(10rem, 3.5rem, 0);
      border-radius: 0.75rem;
      filter: blur(0.1rem);
      box-shadow: 2rem 0.75rem 0 0.1rem $wave2,
        //
        4rem 1.25rem 0 -0.1rem $wave2,
        //
        5rem 2rem 0 $wave2,
        //
        6rem 2.75rem 0 0.2rem $wave2,
        //
        8rem 3.25rem 0 0.1rem $wave2,
        //
        10rem 4rem 0 -0.1rem $wave2;
    }
  }

  & > x:nth-of-type(9) {
    width: 3rem;
    height: 0.75rem;
    background: $wave2;
    transform: translate3d(120rem, 72rem, 0) skewX(69deg);
    border-radius: 0.75rem;
    filter: blur(0.1rem);
    box-shadow: 2rem 0.75rem 0 0.1rem $wave2,
      //
      4rem 1.25rem 0 -0.1rem $wave2,
      //
      5rem 2rem 0 $wave2,
      //
      6rem 2.75rem 0 0.2rem $wave2,
      //
      8rem 3.25rem 0 0.1rem $wave2,
      //
      10rem 4rem 0 -0.1rem $wave2;

    &:before {
      width: 3rem;
      height: 0.75rem;
      background: $wave2;
      transform: translate3d(5rem, 3rem, 0);
      border-radius: 0.75rem;
      filter: blur(0.1rem);
      box-shadow: 2rem 0.75rem 0 0.1rem $wave2,
        //
        4rem 1.25rem 0 -0.1rem $wave2,
        //
        5rem 2rem 0 $wave2,
        //
        6rem 2.75rem 0 0.2rem $wave2,
        //
        8rem 3.25rem 0 0.1rem $wave2,
        //
        10rem 4rem 0 -0.1rem $wave2;
    }

    &:after {
      width: 3rem;
      height: 0.75rem;
      background: $wave2;
      transform: translate3d(10rem, 3.5rem, 0);
      border-radius: 0.75rem;
      filter: blur(0.1rem);
      box-shadow: 2rem 0.75rem 0 0.1rem $wave2,
        //
        4rem 1.25rem 0 -0.1rem $wave2,
        //
        5rem 2rem 0 $wave2,
        //
        6rem 2.75rem 0 0.2rem $wave2,
        //
        8rem 3.25rem 0 0.1rem $wave2,
        //
        10rem 4rem 0 -0.1rem $wave2;
    }
  }

  & > x:nth-of-type(10) {
    width: 3rem;
    height: 0.75rem;
    background: $wave1;
    transform: translate3d(150rem, 82rem, 0) skewX(261deg) rotate(10deg);
    border-radius: 0.75rem;
    filter: blur(0.2rem);
    opacity: 0.6;
    box-shadow: -3rem 0.6rem 0 0.1rem $wave1,
      //
      -9rem 0.8rem 0 -0.1rem $wave1,
      //
      -8rem -1rem 0 rgba($wave1, 0.5),
      //
      -5rem 0rem 0 0 $wave1;

    &:before {
      width: 2.8rem;
      height: 0.75rem;
      background: $wave1;
      transform: translate3d(12rem, -5rem, 0);
      border-radius: 0.75rem;
      box-shadow: -3rem 0.6rem 0 0.1rem $wave1,
        //
        -9rem 0.8rem 0 -0.1rem $wave1,
        //
        -12rem 0rem 0 $wave1;
    }

    &:after {
      width: 2.8rem;
      height: 0.75rem;
      background: $wave1;
      transform: translate3d(17rem, -10rem, 0);
      border-radius: 0.75rem;
      box-shadow: -3rem 0.6rem 0 0.1rem $wave1,
        //
        4rem -2rem 0 -0.1rem $wave1,
        //
        5rem -3rem 0 $wave1;
    }
  }
  //sand after groin
  & > x:nth-of-type(11) {
    width: 10rem;
    height: 2rem;
    background: $beach1;
    transform: translate3d(90rem, 66.5rem, 0) rotate(1deg);
    border-radius: 2rem 2rem 0 0 / 100% 2rem 0 0;
    box-shadow: 1rem 0 0.75rem $shadow,
      //
      -8rem 0.1rem 0 $beach1,
      //
      -7rem 0 0.75rem $shadow;

    &:after {
      width: 10rem;
      height: 0.75rem;
      background: $beach2;
      transform: translate3d(-10.75rem, 0.25rem, 0) rotate(-1deg);
      border-radius: 50%;
      box-shadow: 1rem 0.35rem 0.5rem $beach2;
    }

    &:before {
      width: 0.5rem;
      height: 2rem;
      border-radius: 0.1rem;
      background: $shadow;
      transform: translate3d(-5rem, -1rem, 0);
      box-shadow: 2rem -1rem 0.5rem $shadow,
        //
        -3rem 0.2rem 0 $shadow,
        //
        -6rem 0.2rem 0 -0.15rem $shadow; //
    }
  }

  & > x:nth-of-type(12) {
    width: 10rem;
    height: 1rem;
    background: $beach1;
    transform: translate3d(60rem, 64.5rem, 0) rotate(1deg);
    border-radius: 50%;
    box-shadow: -5rem -1rem 0 0 $beach1;

    &:after {
      width: 10rem;
      height: 0.75rem;
      background: $beach1;
      transform: translate3d(-11rem, -1rem, 0) rotate(-1deg);
      border-radius: 50%;
      box-shadow: -4rem -1rem 0 0 $beach,
        //
        -7rem -0.6rem 0 -0.1rem $beach2,
        //
        0 0 0.5rem 0 $beach2,
        //
        -11rem -1.1rem 0 -0.2rem $beach,
        //
        1rem -0.5rem 0 0.1rem $beach2;
    }

    &:before {
      width: 10rem;
      transform: translate3d(-17rem, -2.2rem, 0);
      border-bottom: 1rem solid $beach2;
      border-left: 2rem solid $none;
      border-right: 4rem solid $none;
      border-radius: 0;
    }
  }
}

houses {
  &:after {
    width: 100rem;
    height: 2rem;
    border-radius: 50%;
    transform: translate3d(43rem, 50rem, 0) rotate(-50deg);
    background: linear-gradient(
      to right,
      $sun1,
      $sun1 24%,
      $red 25%,
      $red 35%,
      $green2 36%,
      #fff 45%,
      $sun1
    );
    filter: blur(1rem);
    opacity: 0.2;
  }

  & > x:nth-of-type(2) {
    width: 65rem;
    height: 20rem;
    transform: translate3d(54.5rem, 43.75rem, 0) skewY(2.2deg);
    overflow: hidden;

    &:before {
      width: 75rem;
      height: 9rem;
      transform: translate3d(0rem, 15.5rem, 0) skewX(-30deg) skewY(-1deg);
      background: $grass;
      box-shadow: inset 0 0 2rem $shadow;
      border-radius: 50%;
    }

    & > x:nth-of-type(2) {
      & > x:nth-of-type(1) {
        width: 20rem;
        height: 5rem;
        background: $grass;
        transform: translate3d(0, 17rem, 0) skewY(-2deg) skewX(-30deg);
        border-radius: 50%;

        &:after {
          width: 0.75rem;
          height: 1rem;
          background: $house;
          transform: translate3d(2rem, 0.5rem, 0) skewY(-10deg) skewX(30deg);
          box-shadow: -0.15rem 0 0 $grass,
            //
            -0.25rem 0.25rem 0 $grass,
            //
            0.5rem 0.4rem 0 -0.25rem $house2,
            //
            0.75rem 0.4rem 0 -0.25rem $house2,
            //
            1rem 0.4rem 0 -0.25rem $house2,
            //
            0.75rem 0 0 $grass; //
        }

        &:before {
          width: 7rem;
          height: 0.5rem;
          background: $grass;
          transform: translate3d(1.75rem, 0.25rem, 0) skewX(-45deg);
        }
      }

      & > x:nth-of-type(2) {
        width: 0.35rem;
        height: 1rem;
        background: $grass;
        transform: translate3d(6.4rem, 17rem, 0);
        border-radius: 0.1rem;
        box-shadow: 0 -0.25rem 0 -0.1rem $grass,
          //
          -2rem -0.25rem 0 -0.1rem $grass;

        &:after {
          width: 1rem;
          height: 1rem;
          background: $house2;
          transform: translate3d(-2.25rem, 0.35rem, 0) rotate(45deg);
          border-radius: 0.2rem;
        }

        &:before {
          width: 7rem;
          height: 7rem;
          background: $grass;
          transform: translate3d(3rem, -1.25rem, 0);
          box-shadow: 3rem -0.25rem 0 $grass;
        }
      }

      & > x:nth-of-type(4) {
        width: 2rem;
        height: 1.25rem;
        background: $house2;
        transform: translate3d(9rem, 16.4rem, 0) skewY(-2deg);
        border-radius: 0.1rem;
        box-shadow: -0.15rem 0 0 $house;

        &:after {
          width: 7rem;
          height: 0.7rem;
          background: $grass;
          transform: translate3d(0.5rem, -0.6rem, 0) skewX(-65deg);
        }

        &:before {
          width: 0.25rem;
          height: 1rem;
          background: $grass;
          transform: translate3d(1.75rem, -1rem, 0);
          border-radius: 0.1rem;
          box-shadow: 0 -0.25rem 0 -0.1rem $grass,
            //
            -0.75rem 0.1rem 0 -0.05rem $grass,
            //
            -1.5rem 0.1rem 0 -0.1rem $grass,
            //
            0.75rem 0.1rem 0 $grass,
            //
            3rem -0.1rem 0 $grass,
            //
            3rem -0.4rem 0 -0.1rem $grass,
            //
            3.5rem -0.1rem 0 $grass,
            //
            3.74rem -0.1rem 0 $grass,
            //
            3.5rem -0.5rem 0 -0.1rem $grass,
            //
            3.74rem -0.5rem 0 -0.1rem $grass,
            //
            4.15rem 0.1rem 0 -0.1rem $grass,
            //
            5rem 0 0 $grass,
            //
            5.24rem 0 0 $grass,
            //
            5.175rem -0.25rem 0 -0.1rem $grass,
            //
            6.25rem -0.5rem 0 $grass,
            //
            6rem -0.5rem 0 $grass,
            //
            6.25rem -0.75rem 0 -0.1rem $grass,
            //
            6rem -0.75rem 0 -0.1rem $grass;
          //;
        }
      }

      & > x:nth-of-type(5) {
        width: 0.4rem;
        height: 1rem;
        background: $house;
        transform: translate3d(9rem, 19.2rem, 0) skewY(-2deg);
        border-radius: 0.25rem 0.25rem 0 0;
        box-shadow: -0.45rem 0 0 $house,
          //
          -1rem 0 0 $house,
          //
          -1.4rem 0 0 $house,
          //
          -1.8rem 0 0 $house,
          //
          -2rem 0 0 $house,
          //
          -2.2rem 0 0 $house,
          //
          -2.7rem 0 0 $house,
          //
          -3rem 0 0 $house,
          //
          -3.5rem 0 0 $house,
          //
          -4rem 0 0 $house,
          //
          -4.4rem 0 0 $house,
          //
          -4.8rem 0 0 $house,
          //
          -5rem 0 0 $house,
          //
          -5.2rem 0.4rem 0 $house,
          //
          -5.7rem 0.4rem 0 $house,
          //
          -6rem 0 0 $house,
          //
          -6.5rem 0 0 $house,
          //
          -7rem 0 0 $house,
          //
          -7.7rem 0 0 $house,
          //
          -8rem 0 0 $house,
          //
          -8.5rem 0 0 $house;

        &:before {
          width: 1.5rem;
          height: 0.75rem;
          background: $house2;
          transform: translate3d(0.3rem, 0.25rem, 0) skewY(2deg);
        }

        &:after {
          width: 7rem;
          height: 7rem;
          background: $grass4;
          transform: translate3d(0, 0, 0) rotate(60deg);
          box-shadow: inset 0 0 0.5rem rgba($lightsea, 0.1);
        }
      }

      & > x:nth-of-type(6) {
        width: 5rem;
        height: 0.75rem;
        background: $house2;
        transform: translate3d(13.5rem, 16rem, 0);
        border-radius: 0.15rem;

        &:before {
          height: 0.85rem;
          width: 0.75rem;
          background: $house2;
          transform: translate3d(-1rem, 0.25rem, 0);
          border-radius: 50% 50% 0 0;
          box-shadow: 0.5rem 0.25rem 0 $grass,
            //
            2rem 0.35rem 0 $grass,
            //
            2.5rem 0.1rem 0 $grass,
            //
            3.3rem 0.35rem 0 $grass,
            //
            5rem -1.5rem 0 $grass;
        }

        &:after {
          width: 4.35rem;
          border: 0.75rem solid $none;
          border-bottom-color: $house2;
          border-left-width: 1rem;
          transform: translate3d(4.75rem, -3rem, 0) skewY(-3deg);
        }
      }

      & > x:nth-of-type(7) {
        width: 0.25rem;
        height: 1rem;
        background: $house2;
        transform: translate3d(18.5rem, 13.75rem, 0) skewY(-3deg);
        border-radius: 0.1rem;
        box-shadow: 0.1rem 0 0 $house2,
          //
          0.5rem 0 0 $house2,
          //
          2.5rem -0.15rem 0 $house2,
          //
          3rem -0.15rem 0 -0.1rem $house2,
          //
          3.25rem -0.15rem 0 -0.05rem $house2,
          //
          3.75rem -0.1rem 0 0 $house2,
          //
          3.75rem 0.25rem 0 0.15rem $house2;

        &:before {
          width: 4rem;
          height: 2.25rem;
          background: $house;
          transform: translate3d(0.25rem, 0.75rem, 0);
          box-shadow: -0.5rem 0 0 $grass,
            //
            -1rem 0.5rem 0 $grass; //
        }

        &:after {
          width: 0.25rem;
          height: 0.35rem;
          background: $house2;
          transform: translate3d(0.75rem, 0.75rem, 0);
          box-shadow: 1rem 0 0 $house2,
            //
            2rem 0 0 $house2,
            //
            //
            0rem 1rem 0 $house2,
            //
            1rem 1rem 0 $house2,
            //
            2rem 1rem 0 $house2,
            //
            //
            0rem 1.75rem 0 $house2; //
        }
      }

      & > x:nth-of-type(3) {
        width: 19rem;
        height: 0.75rem;
        background: linear-gradient(
          to right,
          $house,
          $house2,
          $none,
          $beach2,
          $beach
        );
        transform: translate3d(13rem, 17rem, 0) skewY(-3deg);
        box-shadow: 0 0.25rem 0.5rem $shadow, 0 0.25rem 1rem $shadow;
        border-radius: 0 0 0.75rem 0;

        &:before {
          width: 7rem;
          height: 7rem;
          border: 2rem solid $none;
          border-left: 5rem solid $grass4;
          transform: translate3d(-1rem, 0rem, 0) rotate(5deg);
          box-shadow: -1rem 0 0 $grass4;
        }

        &:after {
          width: 3rem;
          height: 2rem;
          background: linear-gradient($shadow, rgba($shadow, 0.2));
          transform: translate3d(2rem, 0rem, 0) rotate(-45deg);
          border-radius: 0.5rem;
          box-shadow: -2rem -0.75rem 0.5rem rgba($shadow, 0.8);
        }
      }

      & > x:nth-of-type(8) {
        width: 0.5rem;
        height: 1.5rem;
        background: $house;
        transform: translate3d(21rem, 18.5rem, 0) skewY(-3deg) skewX(3deg);
        border-radius: 50% 50% 0 0;
        box-shadow: 0.6rem 0 0 $house,
          //
          1rem 0 0 $house,
          //
          1.4rem 0 0 $house;

        &:before {
          width: 1rem;
          height: 0.5rem;
          background: $house2;
          transform: translate3d(0.5rem, 0.5rem, 0);
        }

        &:after {
          width: 1.25rem;
          height: 1rem;
          background: $house2;
          transform: translate3d(1.9rem, 0.5rem, 0);
        }
      }

      & > x:nth-of-type(9) {
        border: 1.5em solid $none;
        border-bottom: 1rem solid $grass;
        transform: translate3d(22.5rem, 11.5rem, 0) skewY(-5deg);
        width: 4rem;
        box-shadow: 0 2.4rem 0 $grass;

        &:before {
          width: 0.25rem;
          height: 0.5rem;
          background: $grass;
          border-radius: 0.15rem;
          transform: translate3d(0, -0.3rem, 0);
          box-shadow: 1rem 0 0 $grass;
        }

        &:after {
          width: 0.75rem;
          height: 0.5rem;
          background: $house;
          opacity: 0.2;
          transform: translate3d(-0.5rem, 1rem, 0) rotate(65deg) skewX(45deg);
          box-shadow: 1rem -0.7rem 0 $house,
            //
            1.7rem -0.2rem 0 $house,
            //
            0.5rem 0.5rem 0 $house; //
        }
      }

      & > x:nth-of-type(10) {
        border: 1.5em solid $none;
        border-bottom: 1.2rem solid $grass;
        transform: translate3d(25rem, 11rem, 0) skewY(-5deg);
        width: 5rem;
        box-shadow: 0 2.4rem 0 $grass;

        &:before {
          width: 0.5rem;
          height: 4rem;
          background: $grass;
          border-radius: 0.15rem;
          transform: translate3d(0, -0.5rem, 0);
          box-shadow: 1rem 0 0 $grass,
            //
            -0.5rem 0 0 $grass,
            //
            -0.2rem -0.3rem 0 $grass;
          //;
        }

        &:after {
          width: 0.15rem;
          height: 0.75rem;
          opacity: 0.6;
          background: $house;
          transform: translate3d(-1rem, 1.25rem, 0);
          box-shadow: 1rem 0 0 $house,
            //
            1rem 1rem 0 $house,
            //
            0rem 1rem 0 $house,
            //
            -1rem 1rem 0 $house,
            //
            -2rem 1rem 0 $house,
            //
            -2.5rem 1rem 0 $house;
          //;
        }
      }

      & > x:nth-of-type(11) {
        width: 0.5rem;
        height: 1.5rem;
        background: $grass;
        border-radius: 0.15rem;
        transform: translate3d(30.75rem, 10.75rem, 0) skewY(-5deg);
        box-shadow: 1.8rem 0 0 $grass,
          //
          2.2rem 0 0 $grass,
          //
          2.4rem 0 0 $grass,
          //
          1.9rem -0.2rem 0 $grass,
          //
          2.4rem -0.2rem 0 $grass,
          //
          //
          -0.5rem 0 0 $grass,
          //
          -0.4rem -0.3rem 0 $grass,
          //
          6.25rem 0.4rem 0 $grass,
          //
          6.25rem 0rem 0 -0.1rem $grass,
          //
          7.5rem 1.25rem 0 $grass;

        &:before {
          border: 2.5em solid $none;
          border-bottom: 1.5rem solid $house2;
          border-top-width: 4rem;
          transform: translate3d(-2.25rem, -3.5rem, 0);
          width: 7rem;
          box-shadow: 0 3.5rem 0 $grass;
        }

        &:after {
          width: 0.15rem;
          height: 0.75rem;
          opacity: 0.6;
          background: $house;
          transform: translate3d(-2rem, 2.25rem, 0);
          box-shadow: 0.4rem 0 0 $house,
            //
            1rem 0 0 $house,
            //
            1.5rem 0 0 $house,
            //
            2.2rem 0 0 $house,
            //
            //
            0 1rem 0 $house,
            //
            1rem 1rem 0 $house,
            //
            1.5rem 1rem 0 $house,
            //
            2rem 1rem 0 $house,
            //
            //
            0 2rem 0 $house,
            //
            1rem 2rem 0 $house,
            //
            2rem 2rem 0 $house;
          //;
        }
      }

      & > x:nth-of-type(12) {
        border: 2.3em solid $none;
        border-bottom: 1.5rem solid $shadow;
        border-top-width: 4rem;
        transform: translate3d(31.5rem, 6.9rem, 0) skewY(-5deg);
        width: 7.75rem;
        box-shadow: -0.25rem 3.5rem 0 $house2;

        &:before {
          height: 1.1rem;
          width: 3rem;
          transform: translate3d(-0.5rem, 0, 0) skewX(-50deg);
          background: $house;
          opacity: 0.8;
          box-shadow: 0 0.25rem 0.5rem $house;
        }

        &:after {
          width: 0.15rem;
          height: 0.75rem;
          opacity: 0.6;
          background: $house;
          transform: translate3d(-1rem, 1.75rem, 0);
          box-shadow: 0.4rem 0 0 $house,
            //
            1rem 0 0 $house,
            //
            1.5rem 0 0 $house,
            //
            2.2rem 0 0 $house,
            //
            -1rem 0 0 $house,
            //
            //
            0 1rem 0 $house,
            //
            1rem 1rem 0 $house,
            //
            1.5rem 1rem 0 $house,
            //
            2rem 1rem 0 $house;
          //;
        }
      }

      & > x:nth-of-type(13) {
        width: 0.35rem;
        height: 0.75rem;
        background: $grass;
        transform: translate3d(36.5rem, 12.5rem, 0);
        box-shadow: 1.5rem 0 0 $grass,
          //
          1.5rem 1rem 0 $grass,
          //
          1.1rem 1rem 0 -0.1rem $grass,
          //
          0 1rem 0 $grass,
          //
          0 1.5rem 0 $grass; //
        &:before {
          height: 1.5rem;
          width: 17rem;
          transform: translate3d(-15rem, 2.5rem, 0) skewY(-2deg);
          background: $grass;
          border-radius: 100% 0.25rem 0 0;
          box-shadow: 0 0 0.25rem $shadow;
        }

        &:after {
          height: 1rem;
          width: 0.5rem;
          transform: translate3d(-0.5rem, 2.35rem, 0) skewY(-5deg);
          background: $house2;
          border-radius: 0.25rem;
          box-shadow: -0.5rem 0 0 $house2,
            //
            -1.6rem 0 0 $house2,
            //
            1rem 0 0 rgba($house2, 0.5),
            //
            1.5rem 0 0 rgba($house2, 0.2),
            //
            -2rem 0 0 rgba($house2, 0.5),
            //
            -2.5rem 0 0 $house2,
            //
            -2.9rem 0 0 rgba($house2, 0.9),
            //
            -3.5rem 0 0 rgba($house2, 0.5),
            //
            -3.9rem 0 0 -0.1rem rgba($house2, 0.2);
        }
      }

      & > x:nth-of-type(14) {
        border: 2.5em solid $none;
        border-bottom: 1rem solid $house2;
        transform: translate3d(29rem, 16.25rem, 0);
        width: 12rem;
        opacity: 0.5;

        &:before {
          height: 1rem;
          width: 0.25rem;
          background: $house;
          transform: translate3d(-0.75rem, 0, 0) skewX(-50deg);
          box-shadow: 0.35rem 0.25rem 0.1rem $shadow;
        }

        &:after {
          height: 2rem;
          width: 0.25rem;
          background: $sea1;
          transform: translate3d(0rem, -2rem, 0) skewX(-10deg);
          box-shadow: 0.35rem 0.25rem 0.1rem $shadow;
        }
      }
    }
    //light house
    & > x:nth-of-type(1) {
      & > x:nth-of-type(1) {
        background: $house;
        width: 2rem;
        height: 5rem;
        transform: translate3d(43.75rem, 8rem, 0) skewX(-3deg) skewY(-2deg);
        box-shadow: inset 0.25rem 0 0.25rem rgba($shadow, 0.5),
          //
          inset 0.75rem 0 0.75rem rgba($sun1, 0.1),
          //
          inset 0.5rem 0 0.5rem rgba($sun1, 0.1),
          //
          inset 0 1.25rem 0.5rem rgba($sun1, 0.1);

        &:before {
          background: $house;
          width: 1rem;
          height: 5rem;
          transform: translate3d(1.5rem, 0, 0) skewX(7deg);
          box-shadow: inset -0.1rem 0 0.1rem $sun1,
            //
            inset -0.5rem 0 0.5rem rgba($sun1, 0.1),
            //
            inset -0.25rem 1rem 0.5rem rgba($sun1, 0.1);
        }

        &:after {
          width: 0.4rem;
          height: 0.75rem;
          border-radius: 50% 50% 0 0;
          box-shadow: inset -0.25rem 0.25rem 0.5rem $shadow;
          transform: translate3d(1.3rem, 0.5rem, 0) skewX(3deg) skewY(2deg);
          opacity: 0.75;
        }
      }

      & > x:nth-of-type(2) {
        width: 3.25rem;
        height: 1.15rem;
        border-radius: 50%;
        border: 0.4rem solid $none;
        border-bottom-color: $house2;
        transform: translate3d(43.3rem, 7rem, 0) skewY(-3deg);
        box-shadow: 0 0.5rem 0.25rem -0.4rem $house2;

        &:before {
          width: 1.75rem;
          border: 0.15rem solid $none;
          border-bottom: 0.5rem solid $house2;
          transform: translate3d(0.3rem, -0.3rem, 0);
        }

        &:after {
          width: 1.5rem;
          height: 1.7rem;
          border-top: 0.15rem solid $house2;
          border-right: 0.25rem solid $house2;
          transform: translate3d(0.4rem, -1.5rem, 0);
          border-radius: 0.5rem 1rem 0.5rem 0.5rem / 0.5rem 0.5rem 0.5rem 0.5rem;
          box-shadow: inset 0.15rem -0.3rem 0 -0.15rem $house2;
          background: linear-gradient(
            to top right,
            rgba($house, 0.2),
            $none,
            $none
          );
        }
      }

      & > x:nth-of-type(3) {
        width: 0.65rem;
        height: 0.5rem;
        border-radius: 0.25rem 0.3rem 0 0;
        background: $house2;
        transform: translate3d(44.5rem, 5.5rem, 0) skewY(-3deg);

        &:before {
          width: 0.35rem;
          height: 0.5rem;
          border-radius: 100% 0 0 0;
          background: $house2;
          transform: translate3d(0.4rem, 0.7rem, 0);
        }

        &:after {
          width: 1rem;
          height: 1rem;
          border-top: 0.35rem solid $house2;
          border-left: 0.5rem solid $house2;
          transform: translate3d(0.1rem, 1.1rem, 0);
          border-radius: 0.15rem;
        }
      }

      & > x:nth-of-type(4) {
        border: 1.25em solid $none;
        border-bottom: 1.25rem solid $shadow;
        transform: translate3d(42.75rem, 11.2rem, 0) skewY(-2deg);
        width: 5rem;
        box-shadow: 0 2rem 0 $shadow;

        &:before {
          width: 0.2rem;
          height: 1.25rem;
          background: $house2;
          transform: translate3d(3.5rem, -0.75rem, 0);
          border-radius: 0.1rem;
          box-shadow: 0.5rem 0.15rem 0 $house2,
            //
            1rem 0rem 0 $house2;
        }
      }

      & > x:nth-of-type(5) {
        border: 1.25em solid $none;
        border-bottom: 1.25rem solid $shadow;
        transform: translate3d(37rem, 11rem, 0) skewY(-2deg);
        width: 9rem;
        box-shadow: 0 2rem 0 rgba($shadow, 0.2), 0 2rem 0 $house2;

        &:before {
          width: 0.4rem;
          height: 1rem;
          background: $shadow;
          border-radius: 0.1rem;
          transform: translate3d(4rem, -0.65rem, 0);
          box-shadow: 0.3rem 0 0 $shadow,
            //
            0.1rem -0.3rem 0 -0.05rem $shadow,
            //
            0.2rem -0.3rem 0 -0.05rem $shadow,
            //
            -2rem 0.1rem 0 -0.05rem $shadow,
            //
            2rem 0.1rem 0 $shadow,
            //
            2.3rem 0.1rem 0 $shadow,
            //
            2.1rem -0.3rem 0 -0.05rem $shadow,
            //
            2.2rem -0.3rem 0 -0.05rem $shadow; //
        }

        &:after {
          width: 0.5rem;
          height: 1.25rem;
          background: $house;
          border-radius: 0.2rem;
          transform: translate3d(1rem, 1.25rem, 0);
          opacity: 0.5;
          box-shadow: 0.5rem 0 0 $house,
            //
            1.4rem 0 0 $house,
            //
            1.9rem 0 0 $house,
            //
            2.6rem 0 0 $house,
            //
            3.6rem 0 0 $house,
            //
            4rem 0 0 $house; //
        }
      }

      & > x:nth-of-type(6) {
        border: 1.25em solid $none;
        border-bottom: 1.25rem solid $shadow;
        transform: translate3d(46rem, 10.75rem, 0) skewY(-2deg);
        width: 5rem;
        box-shadow: 0 2rem 0 $shadow;

        &:before {
          width: 0.4rem;
          height: 1.25rem;
          background: $house2;
          transform: translate3d(-0.5rem, 0.75rem, 0);
          border-radius: 0.1rem;
          box-shadow: 0.3rem 0 0 $house2,
            //
            1.25rem 0 0 $house2,
            //
            1.6rem 0 0 $house2;
        }

        &:after {
          width: 2rem;
          height: 2rem;
          background: $shadow;
          transform: translate3d(-3.4rem, 1rem, 0) skewX(-5deg);
          border-radius: 0.1rem;
          box-shadow: 0 0 0.5rem $shadow;
        }
      }

      & > x:nth-of-type(7) {
        transform: translate3d(46rem, 14.75rem, 0) skewY(-2deg);
        width: 4rem;
        height: 1rem;
        background: $shadow;
        border-radius: 50% 50% 0 0;
        box-shadow: -1rem -0.5rem 0 $house2,
          //
          1rem -0.5rem 0 $house2,
          //
          -0.1rem -0.1rem 0.1rem $lightsea,
          //
          -2rem -0.25rem 0 $shadow,
          //
          -2.1rem -0.26rem 0.1rem $lightsea,
          //
          -3rem -0.5rem 0 $house2,
          //
          -4rem -0.25rem 0 $shadow,
          //
          -4.1rem -0.26rem 0.1rem $lightsea,
          //
          -5rem -0.25rem 0 $house,
          //
          -6rem -0.5rem 0 $shadow,
          //
          -6rem -0.5rem 0.5rem $shadow,
          //
          -7rem -0.25rem 0 $house,
          //
          -7.5rem -0.5rem 0 $shadow,
          //
          -7.5rem -0.5rem 0.5rem $shadow;

        &:before {
          width: 3rem;
          height: 3rem;
          background: linear-gradient(
            to bottom right,
            $shadow,
            rgba($grass, 0.5)
          );
          transform: translate3d(-1rem, 0.25rem, 0);
          border-radius: 50%;
          box-shadow: -1rem 1rem 0 -0.5rem $grass,
            //
            -2rem 2rem 0 -1rem $grass,
            //
            //
            -1rem -0.25rem 0 $grass5,
            //
            -2rem 0.75rem 0 -0.5rem $grass5,
            //
            -2.5rem 1.5rem 0 -1rem $grass5,
            //
            //
            -3rem 0 0 $grass5,
            //
            -5rem -0.2rem 0 $grass,
            //
            -6rem 1rem 0 -0.5rem $grass,
            //
            //
            -7rem -0.2rem 0 $grass5,
            //
            -8rem 1rem 0 -0.5rem $grass5;
          //;
        }

        &:after {
          width: 1.6rem;
          height: 0.5rem;
          background: $sun1;
          transform: translate3d(-5.4rem, -2.75rem, 0);
          border-radius: 0 0 0.5rem 0.5rem;
          box-shadow: -2rem 0 0 $sun1;
          opacity: 0.2;
        }
      }

      & > x:nth-of-type(8) {
        transform: translate3d(49.5rem, 4rem, 0) skewY(-3deg);
        width: 0.1rem;
        height: 2rem;
        border: 3rem solid $none;
        border-bottom: 1.5rem solid $house2;
        box-sizing: content-box;
        box-shadow: 0 5rem 0 $house;

        &:after {
          transform: translate3d(-0.5rem, -1.5rem, 0);
          width: 0.1rem;
          height: 2rem;
          border: 1.5rem solid $none;
          border-bottom-color: $grass;
          box-sizing: content-box;
          box-shadow: 0 5rem 0 $house2;
        }

        &:before {
          width: 0.5rem;
          height: 2rem;
          background: $house2;
          border-radius: 0.1rem;
          transform: translate3d(-0.5rem, 1.25rem, 0);
          box-shadow: 0.4rem 0 0 $house2,
            //
            0.7rem 0.75rem 0 $house2,
            //
            1rem 0.75rem 0 $house2,
            //
            0.2rem -0.25rem 0 $house2,
            //
            //
            1.5rem 0 0 $house2,
            //
            1.5rem -0.5rem 0 -0.15rem $house2; //
        }
      }

      & > x:nth-of-type(9) {
        transform: translate3d(49.75rem, 9.75rem, 0) skewX(-20deg);
        width: 1rem;
        height: 0.75rem;
        background: $grass;
        box-shadow: 0.75rem -0.2rem 0 $grass,
          //
          1.5rem -0.4rem 0 $grass; //
        &:before {
          width: 0.35rem;
          height: 1.5rem;
          background: $house3;
          border-radius: 50% 50% 0 0;
          transform: translate3d(0.25rem, 0.25rem, 0) skewX(20deg);
          box-shadow: 0.75rem -0.1rem 0 $house3,
            //
            1.5rem -0.2rem 0 $house3,
            //
            0 2rem 0 $house3,
            //
            0.75rem 2rem 0 $house3;
        }

        &:after {
        }
      }

      & > x:nth-of-type(11) {
        background: $grass;
        width: 2.5rem;
        height: 5.5rem;
        transform: translate3d(53rem, 10rem, 0) skewY(-6deg);
        box-shadow: 6rem 0 0 $grass,
          //
          4rem 0 0 $house3,
          //
          2.4rem 0 0 $beach;

        &:after {
          width: 4.5rem;
          height: 1.6rem;
          transform: translate3d(0.9rem, -1.26rem, 0) skewY(-4deg) skewX(-60deg);
          background: linear-gradient(
            to top right,
            $house,
            $house2,
            $house,
            $house2,
            $house2,
            $house2
          );
          border-radius: 0.1rem;
          box-shadow: 0.5rem 0.5rem 0.5rem -0.5rem $shadow,
            0.5rem 0.5rem 0.5rem -0.5rem $shadow;
        }

        &:before {
          width: 5rem;
          height: 1.7rem;
          transform: translate3d(4.9rem, -1.6rem, 0) skewY(-4deg) skewX(-60deg);
          background: linear-gradient(to top right, $house, $house2, $house);
          border-radius: 0.1rem;
          box-shadow: 0 0.5rem 0.5rem -0.5rem $shadow,
            0.5rem 0.5rem 0.5rem -0.5rem $shadow;
        }
      }

      & > x:nth-of-type(10) {
        transform: translate3d(56rem, 7.5rem, 0);
        width: 1.75rem;
        height: 1.5rem;
        border: 0.15rem solid $none;
        border-top-color: $grass;
        box-shadow: inset 0 0 0 1rem $grass,
          //
          3rem -0.5rem 0 $grass,
          //
          7.5rem -1.1rem 0 $grass;
        border-radius: 0.1rem;

        &:after {
          width: 0.2rem;
          height: 1rem;
          background: $grass;
          border-radius: 0.1rem;
          transform: translate3d(0.15rem, -0.65rem, 0);
          box-shadow: 0.2rem 0 0 $grass,
            //
            0.45rem 0 0 $grass,
            //
            0.65rem 0 0 $grass,
            //
            0.85rem 0 0 $grass,
            //
            //
            3rem -0.5rem 0 $grass,
            //
            3.2rem -0.5rem 0 $grass,
            //
            3.45rem -0.5rem 0 $grass,
            //
            3.65rem -0.5rem 0 $grass,
            //
            3.85rem -0.5rem 0 $grass,
            //
            4rem -0.5rem 0 $grass,
            //
            //
            7.3rem -1rem 0 $grass,
            //
            7.5rem -1rem 0 $grass,
            //
            7.75rem -1rem 0 $grass,
            //
            7.95rem -1rem 0 $grass,
            //
            8.15rem -1rem 0 $grass,
            //
            8.3rem -1rem 0 $grass; //
        }

        &:before {
        }
      }

      & > x:nth-of-type(12) {
        transform: translate3d(53.75rem, 10.7rem, 0) skewY(-4deg);
        width: 0.3rem;
        height: 0.8rem;
        background: $house;
        border-radius: 0.1rem;
        opacity: 0.8;
        box-shadow: 1rem -0.1rem 0 $house,
          //
          2rem -0.2rem 0 $house,
          //
          2.5rem -0.25rem 0 $house,
          //
          //
          3.5rem -0.3rem 0 $house,
          //
          4rem -0.35rem 0 $house,
          //
          //
          5.5rem -0.3rem 0 $house,
          //
          6.5rem -0.35rem 0 $house,
          //
          5.6rem -0.5rem 0 $house,
          //
          6.6rem -0.55rem 0 $house;

        &:before {
          transform: translate3d(-0.2rem, 1.2rem, 0);
          width: 0.3rem;
          height: 1rem;
          background: $grass;
          border-radius: 0.1rem;
          opacity: 0.8;
          box-shadow: -0.1rem 0.1rem 0 $house,
            //
            //
            0.6rem -0.05rem 0 $grass,
            //
            0.5rem 0.05rem 0 $house,
            //
            //
            1.2rem -0.1rem 0 $grass,
            //
            1.1rem 0rem 0 $house,
            //
            //
            2.2rem -0.2rem 0 $grass,
            //
            2.1rem 0rem 0 $house,
            //
            //
            2.7rem -0.25rem 0 $grass,
            //
            2.6rem -0.05rem 0 $house,
            //
            //
            3.7rem -0.2rem 0 $grass,
            //
            //
            4.4rem -0.25rem 0 $grass,
            //
            4.5rem -0.15rem 0 $grass,
            //
            //
            5.8rem -0.2rem 0 $house,
            //
            5.9rem -0.25rem 0 $house,
            //
            //
            6.5rem -0.3rem 0 $house,
            //
            6.6rem -0.35rem 0 $house;
          //;
        }

        &:after {
          transform: translate3d(-0.2rem, 3rem, 0);
          width: 0.3rem;
          height: 1rem;
          background: $grass;
          border-radius: 0.1rem;
          opacity: 0.8;
          box-shadow: -0.1rem 0.1rem 0 $house,
            //
            //
            0.6rem -0.05rem 0 $grass,
            //
            0.5rem 0.05rem 0 $house,
            //
            //
            1.2rem -0.1rem 0 $grass,
            //
            1.1rem 0rem 0 $house,
            //
            //
            2.2rem -0.2rem 0 $grass,
            //
            2.1rem 0rem 0 $house,
            //
            //
            2.7rem -0.25rem 0 $grass,
            //
            2.6rem -0.05rem 0 $house,
            //
            //
            3.7rem -0.2rem 0 $grass,
            //
            //
            4.4rem -0.25rem 0 $grass,
            //
            4.5rem -0.15rem 0 $grass,
            //
            //
            5.8rem -0.2rem 0 $house,
            //
            5.9rem -0.25rem 0 $house,
            //
            //
            6.5rem -0.3rem 0 $house,
            //
            6.6rem -0.35rem 0 $house;
          //;
        }
      }
    }
  }

  & > x:nth-of-type(1) {
    & > x:nth-of-type(2) {
      background: $grass;
      width: 16rem;
      height: 6rem;
      transform: translate3d(115.5rem, 53rem, 0) skewY(-6deg);

      &:before {
        background: $grass;
        width: 16rem;
        height: 6rem;
        transform: translate3d(0, 1rem, 0) skewY(6deg);
      }

      &:after {
        width: 15.5rem;
        height: 2rem;
        transform: translate3d(0.9rem, -1.7rem, 0) skewY(-1deg) skewX(-60deg);
        border-radius: 0.1rem;
        background: $shadow;
        box-shadow: 0 0.5rem 0.5rem -0.5rem $shadow,
          0.5rem 0.5rem 0.5rem -0.5rem $shadow;
      }
    }

    & > x:nth-of-type(1) {
      transform: translate3d(125.5rem, 50rem, 0);
      width: 2rem;
      height: 1.5rem;
      border: 0.15rem solid $none;
      border-top: 0.25rem solid $shadow;
      box-shadow: inset 0 0 0 1rem $shadow,
        //
        4.5rem -0.4rem 0 $shadow,
        //
        7rem -1.1rem 0 $shadow;
      border-radius: 0.2rem;

      &:after {
        width: 0.2rem;
        height: 1rem;
        background: $shadow;
        border-radius: 0.1rem;
        transform: translate3d(0.15rem, -0.65rem, 0);
        box-shadow: 0.3rem 0.2rem 0 $shadow,
          //
          0.6rem 0 0 $shadow,
          //
          0.9rem 0 0 $shadow,
          //
          1.2rem 0 0 $shadow,
          //
          //
          6.8rem -1rem 0 $shadow,
          //
          7.1rem -1rem 0 $shadow,
          //
          7.4rem -1rem 0 $shadow,
          //
          7.7rem -1.25rem 0 $shadow,
          //
          8rem -1.25rem 0 $shadow,
          //
          8.3rem -1.25rem 0 $shadow; //
      }
    }

    & > x:nth-of-type(3) {
      transform: translate3d(115.8rem, 55.75rem, 0) skewY(-6deg);
      width: 1.4rem;
      height: 4rem;
      background: $beach;
      border-radius: 0.2rem;
      border-top: 0.35rem solid $house2;
      opacity: 0.6;
      box-shadow: 3rem 0 0 $house,
        //
        3rem 1rem 0 $house,
        //
        3rem -1rem 0 rgba($house, 0.5),
        //
        10rem 0.5rem 0 rgba($house, 0.75),
        //
        10rem 2rem 0 rgba($house, 0.75);

      &:before {
        transform: translate3d(0.8rem, -2rem, 0);
        width: 0.5rem;
        height: 1.5rem;
        background: $house;
        border: 0.15rem solid $shadow;
        border-bottom-color: $house;
        border-right-color: $house;
        border-radius: 0.2rem;
        box-shadow: 0.9rem -0.1rem 0 -0.1rem $grass, 1rem 0 0 $house,
          //
          2.8rem 0 0 rgba($house, 0.5),
          //
          4.6rem -0.1rem 0 -0.1rem rgba($grass, 0.8),
          4.8rem 0 0 -0.05rem $house,
          //
          5.6rem -0.1rem 0 -0.1rem rgba($grass, 0.8),
          5.8rem 0 0 -0.05rem $house,
          //
          //
          0rem 1.9rem 0 -0.05rem $shadow,
          //
          0rem 4rem 0 $shadow,
          //
          //
          0.9rem 1.9rem 0 -0.1rem $grass,
          1rem 2rem 0 $house,
          //
          0.9rem 3.9rem 0 -0.1rem $grass,
          1rem 4rem 0 $house,
          //
          //
          2.4rem 2rem 0 -0.1rem $grass,
          //
          2.4rem 4rem 0 -0.1rem $grass,
          //
          //
          3rem 2.1rem 0 -0.05rem $grass,
          //
          3rem 4.1rem 0 -0.05rem $grass;
        //;
      }

      &:after {
        width: 1.5rem;
        height: 0.25rem;
        background: $shadow;
        transform: translate3d(3rem, -0.4rem, 0) skewY(4deg);
        box-shadow: 0 1.9rem 0 $shadow,
          //
          9.4rem -0.5rem 0 $house3,
          //
          6.9rem -0.4rem 0 $house3;
        //;
      }
    }

    & > x:nth-of-type(4) {
      transform: translate3d(121rem, 55.75rem, 0) skewY(-4deg);
      width: 0.4rem;
      height: 1.4rem;
      background: $house;
      border-radius: 0.2rem;
      opacity: 0.3;
      box-shadow: 0.5rem 0 0 $house2,
        //
        1.5rem 0 0 $house,
        //
        //
        2.3rem 0.2rem 0 $house,
        //
        3.6rem 0.2rem 0 -0.1rem $house,
        //
        4.2rem 0.2rem 0 $house,
        //
        //
        5rem 0.2rem 0 $house,
        //
        5.8rem 0.2rem 0 $shadow,
        //
        5.8rem 0.2rem 0 $shadow,
        //
        5.8rem 0.2rem 0 $shadow,
        //
        5.8rem 0.2rem 0 $shadow,
        //
        //
        -0.4rem 2rem 0 -0.1rem $house2,
        //
        0 2rem 0 $house2,
        //
        0.5rem 2rem 0 $house2,
        //
        1.5rem 2rem 0 $house,
        //
        //
        2.3rem 2.2rem 0 $house,
        //
        3rem 2.6rem 0 0.1rem $house3,
        //
        3rem 2.2rem 0 0.1rem $shadow,
        //
        3.6rem 2.2rem 0 -0.1rem $house,
        //
        4.2rem 2.2rem 0 $house,
        //
        //
        5rem 2.2rem 0 $house,
        //
        5.8rem 2.2rem 0 $shadow;

      &:before {
        transform: translate3d(-0.1rem, 1.2rem, 0);
        width: 0.5rem;
        height: 0.3rem;
        background: $house3;
        border-radius: 0.1rem;
        box-shadow: 0.5rem 0 0 $house3,
          //
          1.5rem 0 0 $house3,
          //
          //
          2.3rem 0.2rem 0 $house3,
          //
          3rem 0.2rem 0 $house3,
          //
          3.6rem 0.2rem 0 $house3,
          //
          4.2rem 0.2rem 0 $house3,
          //
          //
          5rem 0.2rem 0 $house3,
          //
          5.8rem 0.4rem 0 $house3; //
      }

      &:after {
        transform: translate3d(2rem, -2.4rem, 0);
        width: 0.4rem;
        height: 1.1rem;
        background: $shadow;
        border-radius: 0.1rem;
        box-shadow: 0.3rem 0.3rem 0 $house,
          //
          //
          0.8rem 0 0 $shadow,
          //
          1.1rem 0.3rem 0 $house,
          //
          //
          1.5rem 0 0 $shadow,
          //
          1.8rem 0.3rem 0 $house,
          //
          //
          2.2rem 0 0 $shadow,
          //
          2.5rem 0.3rem 0 $house,
          //
          //
          3rem 0 0 $shadow,
          //
          3.3rem 0.3rem 0 $house,
          //
          //
          3.6rem 0 0 $shadow,
          //
          3.9rem 0.3rem 0 $house;
        //;
      }
    }

    & > x:nth-of-type(5) {
      transform: translate3d(127.65rem, 53.2rem, 0) skewY(-4deg);
      width: 0.4rem;
      height: 0.6rem;
      background: $house3;
      border-radius: 0.1rem;
      opacity: 0.9;
      box-shadow: 0 0.3rem 0 $house,
        //
        0 0.5rem 0 $house3,
        //
        //
        0.8rem 0rem 0 $house3,
        //
        0.8rem 0.3rem 0 $house,
        //
        0.8rem 0.5rem 0 $house3,
        //
        //
        1.6rem 0rem 0 $house3,
        //
        1.6rem 0.3rem 0 $house,
        //
        1.6rem 0.5rem 0 $house3;

      &:before {
        transform: translate3d(0.7rem, 2.2rem, 0);
        width: 0.5rem;
        height: 0.7rem;
        background: $house3;
        border-radius: 0.1rem;
        opacity: 0.9;
        box-shadow: 0 0.6rem 0 $house2,
          //
          0 0.9rem 0 $house3,
          //
          //
          -0.8rem 0rem 0 -0.1rem $house,
          //
          -0.8rem 0.6rem 0 -0.1rem $house2,
          //
          -0.8rem 0.9rem 0 -0.1rem $house,
          //
          //
          0.8rem 0rem 0 $house,
          //
          0.8rem 0.6rem 0 $house2,
          //
          0.8rem 0.9rem 0 $house3,
          //
          //
          0 2.5rem 0 $house2,
          //
          //
          -0.8rem 2.5rem 0 -0.1rem $house,
          //
          //
          0.8rem 2.5rem 0 $house,
          //
          //
          -1.5rem 0rem 0 -0.1rem $house3,
          //
          -1.5rem 0.6rem 0 -0.1rem $shadow,
          //
          -1.5rem 0.7rem 0 -0.1rem $house2,
          //
          //
          -1.6rem 2.4rem 0 -0.1rem $shadow,
          //
          -1.6rem 3.1rem 0 -0.1rem $grass,
          //
          -1.6rem 3.3rem 0 -0.1rem $house2;
        //;
      }

      &:after {
        width: 8rem;
        height: 8rem;
        transform: translate3d(2.5rem, -0.4rem, 0) skewY(8deg) skewX(2deg);
        background: $side;
        border-radius: 0.2rem;
      }
    }

    & > x:nth-of-type(6) {
      transform: translate3d(130rem, 39.5rem, 0) skewY(-1deg) skewX(2deg);
      width: 1.7rem;
      height: 8rem;
      border: 2.75rem solid rgba(255, 255, 255, 0);
      border-bottom: 2rem solid $side;
      border-radius: 0.1rem;
      box-sizing: content-box;
      box-shadow: 0 8rem 0 $side;

      &:before {
        width: 3rem;
        height: 2rem;
        background: $grass3;
        border-radius: 1rem;
        transform: translate3d(-8rem, 16.5rem, 0);
        box-shadow: 2rem -0.5rem 0 $grass3,
          //
          4rem 0.3rem 0 $grass3,
          //
          0 2rem 0 2rem $shadow;
      }

      &:after {
        height: 0.35rem;
        width: 1.5rem;
        border-radius: 0.35rem 100% 0 0;
        background: $house;
        opacity: 0.9;
        transform: translate3d(-4.2rem, 17.2rem, 0) skewY(-4deg);
        box-shadow: 0.5rem 0.5rem 0 $house,
          //
          -0.5rem 0.2rem 0 $house2,
          //
          -0.3rem 0.1rem 0 $house2,
          //
          0 0.5rem 0 rgba($sky1, 0.1); //
      }
    }
    //house roof
    & > x:nth-of-type(7) {
      transform: translate3d(131.75rem, 43rem, 0) skewY(-5deg) skewX(2deg);
      width: 4.5rem;
      height: 8rem;
      border: 0.75rem solid $none;
      border-bottom: 1rem solid $house4;
      border-radius: 0.1rem;
      box-sizing: content-box;
      box-shadow: 0 8rem 0 $house4,
        //
        0 14rem 5rem $shadow,
        //
        0 12rem 2rem $shadow;

      &:before {
        background: $house4;
        width: 3rem;
        height: 2rem;
        transform: translate3d(-0.1rem, 7.75rem, 0) skewX(-30deg) skewY(5deg);
        box-shadow: -0.25rem 0 0 $shadow,
          //
          -0.5rem 0 0 $house,
          //
          -0.65rem 0 0 $shadow,
          //
          inset 0 1.25rem 0 $house,
          //
          inset 0.2rem 0 0 $shadow;
      }

      &:after {
        background: $shadow;
        width: 3rem;
        height: 2rem;
        transform: translate3d(0.8rem, 7.6rem, 0) skewX(30deg) skewY(5deg);
        box-shadow: -0.25rem 0 0 $house;
      }
    }

    & > x:nth-of-type(8) {
      transform: translate3d(137rem, 49.25rem, 0) skewY(-1deg);
      width: 0.5rem;
      height: 2rem;
      background: $shadow;
      border-radius: 0.2rem;
      box-shadow: 0.4rem 0 0 $shadow,
        //
        0.8rem 0 0 $shadow,
        //
        -0.2rem 0.4rem 0 $shadow,
        //
        -0.4rem 0.8rem 0 $shadow,
        //
        0rem -0.5rem 0 -0.1rem $shadow,
        //
        0.4rem -0.5rem 0 -0.1rem $shadow,
        //
        0.8rem -0.5rem 0 -0.1rem $shadow;

      &:before {
        background: $house4;
        width: 3rem;
        height: 2.5rem;
        transform: translate3d(-1.45rem, 1.6rem, 0) skewX(-30deg);
        box-shadow: -0.25rem 0 0 $shadow,
          //
          -0.5rem 0 0 $house,
          //
          -0.65rem 0 0 $shadow,
          //
          inset 0 1.5rem 0 $house,
          //
          inset 0.25rem 0 0 $shadow;
      }

      &:after {
        background: linear-gradient(to right, $shadow, $grass);
        width: 5.5rem;
        height: 2.5rem;
        transform: translate3d(-0.2rem, 1.5rem, 0) skewX(35deg);
        box-shadow: -0.25rem 0 0 $house;
      }
    }

    & > x:nth-of-type(9) {
      transform: translate3d(132.75rem, 53rem, 0) skewY(-1deg) skewX(2deg);
      width: 0.75rem;
      height: 1rem;
      background: $house2;
      border-radius: 0.1rem;
      box-shadow: 0 0.25rem 0 $house,
        //
        3rem -0.25rem 0 $house2,
        //
        3rem 0 0 $house; //
      &:before {
        width: 2.5rem;
        height: 5rem;
        border-radius: 0.5rem;
        transform: translate3d(-1.25rem, 1.65rem, 0);
        background: $house4;
        box-shadow: inset -2rem 0 0 $grass,
          //
          0.5rem 0 0.5rem $shadow,
          //
          //
          3.25rem 0 0 $house4,
          //
          3.75rem 0 0.5rem $shadow;
        //;
      }

      &:after {
        transform: translate3d(-1rem, 2.25rem, 0);
        width: 0.75rem;
        height: 1.5rem;
        background: $house2;
        border-radius: 0.1rem;
        box-shadow: 0 0.25rem 0 $house,
          //
          3.15rem -0.15rem 0 $house2,
          //
          3.15rem 0.15rem 0 $house,
          //
          //
          1.25rem 0rem 0 -0.1rem $shadow,
          //
          1.25rem 0.25rem 0 $house2,
          //
          4.35rem -0.15rem 0 -0.1rem $shadow,
          //
          4.35rem 0.15rem 0 $house2,
          //
          //
          1.25rem 2.5rem 0 -0.1rem $shadow,
          //
          1.25rem 2.75rem 0 $house2,
          //
          4.35rem 2.35rem 0 -0.1rem $shadow,
          //
          4.35rem 2.55rem 0 $house2,
          //
          //
          0 2.5rem 0 $house2,
          //
          3.15rem 2.35rem 0 $house2; //
      }
    }

    & > x:nth-of-type(10) {
      transform: translate3d(137.75rem, 53.1rem, 0) skewY(-1deg) skewX(2deg);
      width: 10rem;
      height: 10rem;
      background: $shadow;
      box-shadow: inset 0 0 1rem #000;

      &:before {
        width: 2.5rem;
        height: 0.25rem;
        border-radius: 0.1rem;
        transform: translate3d(-2.75rem, 1.5rem, 0);
        background: $house;
        box-shadow: 0 2.5rem 0 $house,
          //
          -3.5rem 2.65rem 0 $house,
          //
          -3.5rem 0.15rem 0 $house;
        opacity: 0.8;
      }

      &:after {
        background: $shadow;
        width: 6rem;
        height: 8rem;
        transform: translate3d(20rem, 2rem, 0) skewY(20deg);
      }
    }
    //here
    & > x:nth-of-type(11) {
      transform: translate3d(146.5rem, 49.6rem, 0) skewY(2deg) skewX(2deg);
      width: 0.2rem;
      height: 1rem;
      background: $shadow;
      box-shadow: 0.2rem 0 0 $shadow,
        //
        0.4rem 0 0 $shadow,
        //
        0.65rem 0 0 $shadow,
        //
        0.9rem 0 0 $shadow,
        //
        1.1rem 0 0 $shadow,
        //
        1.4rem 0 0 $shadow,
        //
        1.6rem 0 0 $shadow,
        //
        //
        3.8rem 0 0 0.025rem $shadow,
        //
        4.1rem 0.1rem 0 0.025rem $shadow,
        //
        4.4rem 0.1rem 0 0.025rem $shadow,
        //
        //
        -5rem 0.8rem 0 0.025rem $shadow,
        //
        -5.3rem 0.8rem 0 0.025rem $shadow,
        //
        -5.6rem 0.7rem 0 0.025rem $shadow,
        //
        -5.9rem 0.8rem 0 0.025rem $shadow;
      border-radius: 0.1rem;

      &:before {
        transform: translate3d(-4.5rem, 0.5rem, 0) skewY(-6deg);
        width: 1.75rem;
        height: 3rem;
        border: 0.25rem solid $none;
        border-top: 0.25rem solid $shadow;
        border-radius: 0.3rem;
        box-shadow: inset 0 0 0 1rem $shadow,
          //
          0 -0.75rem 0 -0.25rem $shadow,
          //
          0 -1.35rem 0 -0.5rem $shadow; //
      }

      &:after {
        width: 20rem;
        height: 3.25rem;
        transform: translate3d(-7.3rem, 4rem, 0) skewY(-4deg);
        background: linear-gradient(to right, $house4, $shadow);
        box-shadow: 0 3rem 0 $shadow, 0 5.5rem 0 $shadow;
        border-radius: 0.2rem;
      }
    }

    & > x:nth-of-type(12) {
      transform: translate3d(146rem, 50.2rem, 0) skewY(2deg) skewX(2deg);
      width: 2.75rem;
      height: 2rem;
      box-shadow: inset -0.1rem 0 0.1rem rgba($sun1, 0.5),
        //
        inset 1rem 0 1rem rgba($shadow, 0.25),
        //
        inset 0.25rem 0 0 $house3,
        //
        inset 1rem 0 1rem rgba($shadow, 0.3),
        //
        inset 0 0 0 2rem $house3;
      border: 0.3rem solid $none;
      border-top: 0.3rem solid $house2;
      border-radius: 0.3rem;

      &:before {
        transform: translate3d(-6.15rem, 0.5rem, 0) skewY(2deg);
        width: 2.15rem;
        height: 2rem;
        box-shadow: inset 0 -1rem 1rem rgba($shadow, 0.25),
          //
          inset 0.25rem 0 0 $house3,
          //
          inset 1rem 0 1rem rgba($shadow, 0.25),
          //
          inset 0 0 0 2rem $house3;
        border: 0.3rem solid $none;
        border-top: 0.3rem solid $house2;
        border-radius: 0.3rem;
      }

      &:after {
        transform: translate3d(3.25rem, -0.25rem, 0) skewY(-2deg);
        width: 2rem;
        height: 2rem;
        box-shadow: inset 0 1rem 1rem rgba($shadow, 0.25),
          //
          inset 0 0 0 2rem $house3;
        border: 0.3rem solid $none;
        border-top: 0.3rem solid $house2;
        border-radius: 0.3rem;
      }
    }

    & > x:nth-of-type(13) {
      width: 3rem;
      height: 2.7rem;
      transform: translate3d(140rem, 51.5rem, 0) skewY(-4deg) skewX(-40deg);
      background: linear-gradient(to right top, $house2, $shadow);
      border-radius: 0.3rem;
      box-shadow: 0.5rem 0.3rem 0 $house2;

      &:before {
        background: $shadow;
        width: 3rem;
        height: 2.85rem;
        border-radius: 0.2rem;
        transform: translate3d(2.75rem, 0rem, 0) skewY(2deg) skewX(24deg);
        box-shadow: -0.25rem 0 0 $house,
          //
          -0.35rem 0 0 $shadow;
      }

      &:after {
        background: linear-gradient(rgba($sun1, 0.1), $shadow);
        width: 3rem;
        height: 2.85rem;
        border-radius: 0.1rem;
        transform: translate3d(3.9rem, 0.1rem, 0) skewY(2deg) skewX(51deg);
        box-shadow: -0.2rem 0 0 $house;
      }
    }

    & > x:nth-of-type(14) {
      width: 3rem;
      height: 3.1rem;
      transform: translate3d(145.2rem, 51.1rem, 0) skewY(0deg) skewX(-18deg);
      background: $shadow;
      border-radius: 0.2rem;
      box-shadow: -0.2rem 0 0 $house,
        //
        -0.3rem 0 0 $shadow;

      &:before {
        background: linear-gradient(rgba($sun1, 0.05), $shadow);
        width: 3rem;
        height: 2.85rem;
        border-radius: 0.1rem;
        transform: translate3d(1.1rem, 0.1rem, 0) skewX(38deg);
        box-shadow: -0.2rem 0 0 $house;
      }

      &:after {
        width: 4rem;
        height: 2.7rem;
        transform: translate3d(2.5rem, 0rem, 0) skewY(-4deg) skewX(-20deg);
        background: $shadow;
        border-radius: 0.2rem;
        box-shadow: 0.5rem 0.3rem 0 $house2, 2rem 0.3rem 0 darken($house2, 2%);
      }
    }

    & > x:nth-of-type(15) {
      transform: translate3d(148.25rem, 52rem, 0) skewY(-4deg);
      width: 1.5rem;
      height: 1rem;
      background: $house;
      border-radius: 0.2rem;
      box-shadow: inset 0.15rem 0.15rem 0 $house,
        //
        inset -0.15rem -0.15rem 0 $house,
        //
        inset 0 0 0.8rem $shadow;

      &:before {
        width: 1rem;
        height: 0.75rem;
        transform: translate3d(1.5rem, -0.5rem, 0) skewY(-50deg);
        background: $house2;
        border-radius: 0 100% 0 0;
      }

      &:after {
        width: 1.75rem;
        height: 0.65rem;
        transform: translate3d(0.5rem, -0.65rem, 0) skewX(-60deg);
        background: $shadow;
        border-radius: 0.1rem;
        box-shadow: inset 0 0.2rem 0.3rem rgba($sun1, 0.05);
      }
    }

    & > x:nth-of-type(16) {
      transform: translate3d(140rem, 52.5rem, 0) skewY(-4deg);
      width: 1.5rem;
      height: 1rem;
      background: $house;
      border-radius: 0.2rem;
      box-shadow: inset 0.15rem 0.15rem 0 $house,
        //
        inset -0.15rem -0.15rem 0 $house,
        //
        inset 0.1rem 0.1rem 0.8rem $shadow;

      &:before {
        width: 1rem;
        height: 0.75rem;
        transform: translate3d(1.5rem, -0.5rem, 0) skewY(-50deg);
        background: $shadow;
        border-radius: 0 100% 0 0;
      }

      &:after {
        width: 1.75rem;
        height: 0.65rem;
        transform: translate3d(0.5rem, -0.65rem, 0) skewX(-60deg);
        background: $house2;
        border-radius: 100% 0.1rem 0.1rem 0.1rem;
        box-shadow: inset 0 0.2rem 0.3rem rgba($sun1, 0.05);
      }
    }

    & > x:nth-of-type(17) {
      transform: translate3d(142.5rem, 54rem, 0) skewY(-4deg);
      width: 1.75rem;
      height: 3rem;
      background: $house;
      border-radius: 0.2rem 0.5rem 0.2rem 0.2rem;
      box-shadow: inset 0 0.2rem 0.2rem rgba($shadow, 0.8),
        //
        inset 0.15rem 0.15rem 0 $house,
        //
        inset -0.15rem -0.15rem 0 $house,
        //
        inset 0.1rem 0.1rem 0.8rem $shadow;

      &:before {
        transform: translate3d(0.15rem, 0.75rem, 0) skewY(-1deg);
        width: 1.45rem;
        height: 1.5rem;
        box-shadow: inset 0.15rem 0.15rem 0 $house,
          //
          inset -0.15rem -0.15rem 0 $house,
          //
          inset 0.15rem 0.1rem 0.5rem $shadow,
          //
          0 0.2rem 0.2rem rgba($shadow, 0.8); //
      }

      &:after {
        transform: translate3d(3.5rem, 0.5rem, 0) skewY(-1deg);
        border-radius: 0.1rem;
        width: 1.45rem;
        height: 1.75rem;
        background: $house2;
        box-shadow: inset 0 0.25rem 0.5rem $shadow,
          //
          inset 0.25rem 0 0 rgba($shadow, 0.2),
          //
          inset 0.5rem 0 0 $house,
          //
          inset 1rem 0 0 rgba($shadow, 0.3),
          //
          inset 1.25rem 0 0 $house2;
        //;
      }
    }

    & > x:nth-of-type(18) {
      transform: translate3d(144.75rem, 53.75rem, 0) skewY(-4deg);
      width: 2rem;
      height: 3.15rem;
      border: 0.25rem solid $none;
      border-bottom-color: $house;
      border-top-color: rgba($house, 0.3);
      border-right-color: rgba($house, 0.5);
      border-radius: 0.15rem;
      box-shadow: inset 0.25rem 0 0 $house;
      opacity: 0.8;

      &:before {
        transform: translate3d(-0.25rem, 0.9rem, 0);
        width: 3rem;
        height: 0.25rem;
        background: linear-gradient(to right, $none, $none, $house3);
        opacity: 0.8;
        box-shadow: -0.5rem 1rem 0 rgba($house, 0.5);
      }

      &:after {
        transform: translate3d(0.5rem, -0.15rem, 0);
        width: 0.2rem;
        height: 3rem;
        background: $house;
        opacity: 0.2;
        box-shadow: 2rem 0 0 $house;
      }
    }

    & > x:nth-of-type(19) {
      transform: translate3d(140.5rem, 54.75rem, 0) skewY(-4deg);
      width: 1rem;
      height: 1rem;
      border-radius: 0.1rem;
      background: $house;
      box-shadow: inset -0.1rem -0.1rem 0 $house,
        //
        inset 0.1rem 0.1rem 0.5rem $shadow,
        //
        -0.2rem 0 0 rgba($shadow, 0.5),
        //
        -0.2rem 0.75rem 0 rgba($shadow, 0.5),
        //
        0 0.75rem 0 $house2,
        //
        0 -0.25rem 0 $shadow,
        //
        0 1rem 0 $house;
      opacity: 0.8;

      &:before {
        transform: translate3d(8rem, 0.15rem, 0);
        width: 1rem;
        height: 1rem;
        border-radius: 0.1rem;
        background: $house;
        box-shadow: inset -0.1rem -0.1rem 0 $house,
          //
          inset 0.1rem 0.1rem 0.5rem $shadow,
          //
          -0.2rem 0 0 rgba($shadow, 0.5),
          //
          -0.2rem 0.75rem 0 rgba($shadow, 0.5),
          //
          0 0.75rem 0 $house2,
          //
          0 -0.25rem 0 $shadow,
          //
          0 1rem 0 $house;
        opacity: 0.8;
      }
    }
    //door
    & > x:nth-of-type(20) {
      transform: translate3d(141.5rem, 58.25rem, 0) skewY(-4deg) skewX(1deg);
      width: 1rem;
      height: 2rem;
      background: $house2;
      box-shadow: -0.25rem 0 0 $shadow,
        //
        -0.5rem 0 0 $house2,
        //
        0.25rem 0 0 $house,
        //
        inset 0 0 0.5rem $shadow;
      opacity: 0.8;

      &:before {
        transform: translate3d(-0.75rem, -0.5rem, 0);
        width: 1.5rem;
        height: 1rem;
        border-radius: 100% 100% 0 0;
        box-shadow: inset 0 0.25rem 0 $house,
          //
          0.5rem 0 0 rgba($sun1, 0.1),
          //
          0.5rem 0 0 rgba($shadow, 0.8);
      }

      &:after {
        transform: translate3d(1.5rem, -1rem, 0);
        width: 1.15rem;
        height: 2.5rem;
        background: $house;
        border-radius: 0.2rem;
        opacity: 0.8;
        box-shadow: inset 0.2rem 0.2rem 0 rgba($house3, 0.8),
          //
          inset -0.25rem -0.25rem 0 rgba($house3, 0.8),
          //
          inset 0.5rem 0.5rem 0 $house2,
          //
          inset 0.15rem 0.15rem 0.5rem $shadow,
          //
          0.25rem 0 0 $house2;
        //;
      }
    }

    & > x:nth-of-type(21) {
      transform: translate3d(145rem, 57.5rem, 0) skewY(-3deg) skewX(1deg);
      width: 1.75rem;
      height: 2rem;
      background: linear-gradient(to bottom right, $grass, $house);
      opacity: 0.8;
      border-radius: 0.2rem;

      &:after {
        transform: translate3d(0.5rem, -0.5rem, 0);
        width: 1.15rem;
        height: 2.5rem;
        background: $house;
        border-radius: 0.2rem;
        opacity: 0.8;
        box-shadow: inset 0.2rem 0.2rem 0 rgba($house3, 0.8),
          //
          inset -0.25rem -0.25rem 0 rgba($house3, 0.8),
          //
          inset 0.5rem 0.5rem 0 $house2,
          //
          inset 0.15rem 0.15rem 0.5rem $shadow,
          //
          0.25rem 0 0 $house2;
        //;
      }

      &:before {
        transform: translate3d(2.5rem, -0.25rem, 0) skewY(1deg);
        width: 4.5rem;
        height: 2.25rem;
        background: $house;
        border-radius: 0.2rem;
        opacity: 0.8;
      }
    }

    & > x:nth-of-type(22) {
      transform: translate3d(151.35rem, 58rem, 0) skewY(-3deg) skewX(1deg);
      width: 0.5rem;
      height: 1rem;
      background: $shadow;
      border-radius: 0.2rem;
      box-shadow: -0.65rem 0 0 $shadow,
        //
        -1.3rem 0 0 $shadow,
        //
        -2.75rem 0 0 rgba($grass, 0.5),
        //
        -2.4rem 0 0 rgba($grass, 0.3),
        //
        -2.75rem -1rem 0 rgba($grass, 0.8),
        //
        -2.4rem -1rem 0 rgba($grass, 0.5),
        //
        -5rem -1rem 0 rgba($grass, 0.5),
        //
        -4rem -1rem 0 rgba($grass, 0.5);

      &:before {
        transform: translate3d(-6.5rem, -0.25rem, 0);
        width: 7rem;
        height: 0.25rem;
        background: $house2;
        box-shadow: 0 0.15rem 0 $shadow,
          //
          0 1rem 0 $shadow;
        opacity: 0.3;
      }

      &:after {
        transform: translate3d(1rem, -7.8rem, 0) skewX(20deg) skewY(3deg);
        background: $shadow;
        width: 4rem;
        height: 1rem;
        border-radius: 0.2rem 0.2rem 0 0;
      }
    }

    & > x:nth-of-type(23) {
      transform: translate3d(154rem, 47.5rem, 0);
      width: 0.15rem;
      height: 2rem;
      background: $grass;
      border-radius: 0.1rem;

      &:before {
        transform: translate3d(-1.825rem, 1.75rem, 0) rotate(50deg) skewX(10deg);
        width: 3.75rem;
        height: 3.75rem;
        background: linear-gradient(
            to top right,
            $none,
            $none 50%,
            rgba($sun1, 0.03) 50%
          )
          $shadow;
        border-radius: 0.3rem;
      }

      &:after {
        transform: translate3d(-2.65rem, 3.5rem, 0);
        width: 5.15rem;
        height: 10rem;
        box-shadow: inset 0 0 0 3rem $shadow;
        border: 0.3rem solid $none;
        border-top-color: $house4;
        border-radius: 0.2rem;
      }
    }

    & > x:nth-of-type(24) {
      transform: translate3d(151.6rem, 49.5rem, 0) skewX(-2deg);
      border: 0.5rem solid $none;
      border-bottom: 1rem solid $house2;

      &:before {
        width: 0.5rem;
        height: 1.5rem;
        background: $house2;
        transform: translate3d(0.05rem, 1.25rem, 0) skewX(2deg);
        border-radius: 0.2rem;
        box-shadow: inset -0.15rem -0.15rem 0 $house,
          //
          -0.4rem 0 0 -0.1rem $house2,
          //
          -0.4rem 0 0 $house,
          //
          //
          2.5rem 0 0 -0.1rem $house2,
          //
          2.5rem 0 0 $house,
          //
          //
          2.95rem 0 0 -0.1rem $house2,
          //
          2.95rem 0 0 $house;
        //;
      }

      &:after {
        transform: translate3d(2.3rem, -0.65rem, 0) skewX(2deg);
        border: 0.6rem solid $none;
        border-bottom: 1rem solid $house2;
      }
    }

    & > x:nth-of-type(25) {
      transform: translate3d(157.4rem, 50rem, 0) skewX(0deg) skewY(-4deg);
      width: 2rem;
      border: 0.3rem solid $none;
      border-top: 0.5rem solid $house;
      height: 10rem;
      box-shadow: inset 0 0 0 2rem $house, 0 -1rem 0 -0.5rem $house2;
      border-radius: 0.4rem;

      &:before {
        transform: translate3d(-0.75rem, -7rem, 0) skewX(1deg) skewY(8deg);
        border: 0.9rem solid $none;
        border-left-width: 1rem;
        border-bottom: 2rem solid $house4;
        height: 9rem;
        box-shadow: 0 9rem 0 $house2,
          //
          -1rem 10.5rem 0 $house2;
      }

      &:after {
        width: 0.5rem;
        height: 1.5rem;
        background: $house2;
        transform: translate3d(-4rem, 3.5rem, 0) skewX(2deg) skewY(4deg);
        border-radius: 0.2rem;
        box-shadow: inset -0.15rem -0.15rem 0 $house,
          //
          -0.4rem 0 0 -0.1rem $house2,
          //
          -0.4rem 0 0 $house;
        //;
      }
    }

    & > x:nth-of-type(26) {
      transform: translate3d(156rem, 50.65rem, 0) skewX(-20deg) skewY(-4deg);
      width: 1.5rem;
      height: 3rem;
      border-radius: 0.1rem;
      background: $shadow;

      &:after {
        transform: translate3d(-1rem, 1rem, 0) skewX(20deg) skewY(10deg);
        border: 3.5rem solid $none;
        border-bottom: 3rem solid $house2;
        height: 5rem;
        box-shadow: 0 5rem 0 $house2;
      }

      &:before {
        transform: translate3d(-4.6rem, 6rem, 0) skewX(-55deg) skewY(2deg);
        width: 5rem;
        height: 0.75rem;
        background: linear-gradient(to right, $shadow, $house4);
        box-shadow: 1rem 0.25rem 0 $house4, 2rem 0.75rem 0.75rem $shadow;
      }
    }

    & > x:nth-of-type(27) {
      transform: translate3d(155rem, 58rem, 0) skewY(-7deg);
      width: 0.75rem;
      height: 5rem;
      border-radius: 0.5rem;
      background: $shadow;
      box-shadow: 0.25rem 0 0 rgba($shadow, 0.5),
        //
        0.15rem -0.15rem 0 $house,
        //
        0.15rem -0.5rem 0 rgba($shadow, 0.7);
      opacity: 0.7;

      &:before {
        transform: translate3d(1.25rem, 0rem, 0) skewY(11deg);
        width: 0.6rem;
        height: 1rem;
        border-radius: 0.1rem;
        background: $house2;
        box-shadow: 0 -0.15rem 0 $house,
          //
          0 -0.25rem 0 $house4,
          //
          0 0.75rem 0 $house4,
          //
          0 0.9rem 0 $house,
          //
          0 1.25rem 0 rgba($house4, 0.7),
          //
          inset -0.15rem 0.15rem 0 $house4,
          //
          //
          0 -3.5rem 0 -0.2rem rgba($shadow, 0.2),
          //
          0 -3rem 0 -0.2rem rgba($shadow, 0.2),
          //
          0 -3.5rem 0 $house4,
          //
          0 -3rem 0 rgba($shadow, 0.5),
          //
          0 -3.65rem 0 $house,
          //
          0 -3.8rem 0 $house4,
          //
          0 -3.35rem 0 $house,
          //
          0 -3.2rem 0 rgba($house4, 0.7); //
      }

      &:after {
        transform: translate3d(2.75rem, 0.25rem, 0) skewY(11deg);
        width: 0.65rem;
        height: 1rem;
        border-radius: 0.1rem;
        background: $house2;
        box-shadow: 0 -0.15rem 0 $house,
          //
          0 -0.25rem 0 $house4,
          //
          0 1rem 0 $house4,
          //
          0 0.15rem 0 $house,
          //
          0 0.35rem 0 rgba($house4, 0.7),
          //
          inset -0.15rem 0.15rem 0 $house4,
          //
          //
          0 -3.5rem 0 $house4,
          //
          0 -2.5rem 0 $shadow,
          //
          0 -3.65rem 0 $house,
          //
          0 -3.8rem 0 $house4,
          //
          0 -2.35rem 0 $house,
          //
          0 -2.2rem 0 rgba($house4, 0.7); //
      }
    }
  }

  & > x:nth-of-type(3) {
    & > x:nth-of-type(1) {
      width: 3rem;
      height: 2rem;
      transform: translate3d(104.25rem, 58.5rem, 0) skewY(2deg);
      background: $shadow;
      border-radius: 1rem;
      box-shadow: 5rem 0.25rem 0 $shadow,
        //
        7rem 0rem 0.5rem $shadow,
        //
        9rem 0.25rem 0.5rem $shadow,
        //
        12rem 0.5rem 0.5rem $shadow,
        //
        14rem 0.75rem 0.5rem $shadow,
        //
        16rem 0.25rem 0.5rem $shadow,
        //
        18rem 0.5rem 0.5rem $shadow;

      &:after {
        width: 30rem;
        height: 5rem;
        transform: translate3d(-1rem, 1rem, 0);
        background: $shadow;
        border-radius: 0 0 0 100%;
      }

      &:before {
        width: 3rem;
        height: 2rem;
        transform: translate3d(27rem, 0rem, 0) skewY(2deg);
        background: $shadow;
        border-radius: 1rem;
        box-shadow: 0rem -0.5rem 0.5rem $shadow,
          //
          2rem -0.25rem 0.5rem $shadow,
          //
          4rem -1rem 0.75rem $shadow,
          //
          6rem -1.5rem 0.75rem $shadow,
          //
          9rem -0.75rem 0.25rem $shadow,
          //
          11rem -0.75rem 0.5rem $shadow,
          //
          13rem -0.75rem 0.5rem $shadow,
          //
          15rem -0.5rem 0.5rem $shadow,
          //
          21rem -0.75rem 0.5rem $shadow,
          //
          22rem -0.75rem 0.5rem $shadow,
          //
          25rem -0.75rem 0.5rem $shadow,
          //
          29rem -1.5rem 0.5rem $shadow,
          //
          28rem -0.75rem 0.5rem $shadow;
        //;
      }
    }

    & > x:nth-of-type(2) {
      transform: translate3d(125rem, 60.5rem, 0) skewY(0deg);
      width: 10rem;
      height: 0.15rem;
      background: $house;
      opacity: 0.5;
      box-shadow: 0 0.5rem 0 $house;

      &:before {
        transform: translate3d(-13rem, 1.75rem, 0) skewY(-28deg);
        width: 7rem;
        height: 0.15rem;
        background: $house;
        opacity: 0.8;
        box-shadow: 0 0.5rem 0 $house;
      }
    }

    & > x:nth-of-type(3) {
      transform: translate3d(135rem, 60.5rem, 0);
      width: 7rem;
      height: 3rem;
      background: $grass;
      border-radius: 2rem;
      box-shadow: 0 -0.15rem 0 $house;
    }

    &:after {
      width: 30rem;
      height: 6rem;
      transform: translate3d(102rem, 60.5rem, 0) skewY(2deg);
      background: linear-gradient(to bottom right, $grass5, $none);
      border-radius: 0 100% 0 100%;
      border: 0.5rem dashed $shadow;
      box-shadow: 0 -0.15rem 0 rgba($house, 0.5);
    }
  }

  & > x:nth-of-type(4) {
    width: 60rem;
    height: 20rem;
    transform: translate3d(112.5rem, 46rem, 0) skewY(2deg);
    overflow: hidden;

    &:before {
      width: 60rem;
      height: 4rem;
      transform: translate3d(3rem, 16rem, 0) skewX(-60deg) skewY(-1deg);
      background: $grass;
      box-shadow: inset 0 0 2rem $shadow;
      border-radius: 1rem;
    }

    &:after {
      width: 1rem;
      height: 2rem;
      transform: translate3d(5rem, 17rem, 0) skewY(-1deg);
      background: $grass2;
      border-radius: 50%;
      box-shadow: 0.5rem -1rem 0 $grass2,
        //
        1.25rem -2rem 0 $grass2,
        //
        1.75rem -2.5rem 0 $grass2;
    }

    & > x:nth-of-type(1),
    & > x:nth-of-type(2),
    & > x:nth-of-type(3),
    & > x:nth-of-type(4),
    & > x:nth-of-type(5),
    & > x:nth-of-type(6) {
      background: $grass2;
      border-radius: 50%;
      filter: blur(0.05rem);
    }

    & > x:nth-of-type(1) {
      width: 1rem;
      height: 2rem;
      transform: translate3d(6rem, 17.1rem, 0) skewY(-1deg);
      box-shadow: 0.5rem -1rem 0 $grass2,
        //
        1.25rem -2rem 0 $grass2,
        //
        1.75rem -2.4rem 0 -0.2rem $grass2,
        //
        1rem 0.1rem 0 $grass2,
        //
        1.5rem -0.8rem 0 -0.2rem $grass2,
        //
        2.3rem -1.75rem 0 $grass2,
        //
        2.7rem -2.3rem 0 -0.1rem $grass2;

      &:before {
        width: 1rem;
        height: 2rem;
        transform: translate3d(1.9rem, -0.2rem, 0) skewY(-1deg);
        background: $grass3;
        border-radius: 50%;
        box-shadow: 0.5rem -1rem 0 $grass2,
          //
          1.25rem -2rem 0 0.1rem $grass3,
          //
          1.75rem -2.4rem 0 $grass2,
          //
          1rem 0.1rem 0 $grass3,
          //
          1.5rem -0.8rem 0 -0.2rem $grass3,
          //
          2.3rem -1.75rem 0 $grass2,
          //
          2.7rem -2.3rem 0 -0.1rem $grass2;
      }

      &:after {
        width: 1.1rem;
        height: 1.9rem;
        transform: translate3d(4rem, -0.2rem, 0) skewY(-1deg);
        background: $grass3;
        border-radius: 50%;
        box-shadow: 0.5rem -1rem 0 $grass3,
          //
          1.25rem -2rem 0 0.1rem $grass2,
          //
          1.75rem -2.4rem 0 $grass2,
          //
          1rem 0.1rem 0 $grass3,
          //
          1.5rem -0.8rem 0 -0.2rem $grass3,
          //
          2.3rem -1.75rem 0 $grass2,
          //
          2.7rem -2rem 0 -0.1rem $grass2;
      }
    }

    & > x:nth-of-type(2) {
      width: 1rem;
      height: 2rem;
      transform: translate3d(15rem, 17rem, 0) skewY(-1deg);
      box-shadow: 0.75rem -1rem 0 $grass2,
        //
        1.5rem -1.25rem 0 $grass3,
        //
        2rem -1.7rem 0 -0.2rem rgba($grass2, 0.8),
        //
        1rem 0.1rem 0 $grass2,
        //
        2rem -0.8rem 0 -0.2rem $grass2,
        //
        2.5rem -1.75rem 0 $grass2;

      &:before {
        width: 1rem;
        height: 2rem;
        transform: translate3d(2rem, 0.3rem, 0) skewY(-1deg);
        background: $grass2;
        border-radius: 50%;
        box-shadow: 0.75rem -1rem 0 $grass2,
          //
          1.5rem -1.25rem 0 $grass3,
          //
          2rem -1.7rem 0 -0.2rem rgba($grass2, 0.8),
          //
          1rem -0.5rem 0 $grass2,
          //
          2rem -0.8rem 0 -0.2rem $grass2,
          //
          2.5rem -1.75rem 0 $grass2;
      }

      &:after {
        width: 1.1rem;
        height: 1.9rem;
        transform: translate3d(4rem, -0.6rem, 0) skewY(-1deg);
        background: $grass3;
        border-radius: 50%;
        box-shadow: 0.5rem -1rem 0 $grass3,
          //
          1.25rem -2rem 0 0.1rem $grass2,
          //
          1.75rem -2.4rem 0 $grass2,
          //
          1rem 0.1rem 0 $grass3,
          //
          1.5rem -0.8rem 0 -0.2rem $grass3,
          //
          2.3rem -1.75rem 0 $grass3,
          //
          2.7rem -2rem 0 -0.1rem $grass2;
      }
    }

    & > x:nth-of-type(3) {
      width: 1rem;
      height: 2rem;
      transform: translate3d(21.5rem, 17rem, 0) skewY(-1deg);
      box-shadow: 0.75rem -0.5rem 0 $grass2,
        //
        1.5rem -1.1rem 0 $grass3,
        //
        2rem -1.6rem 0 0 $grass2,
        //
        0.5rem -1.5rem 0 0 $grass2,
        //
        1rem -2.1rem 0 0 $grass2,
        //
        1.5rem -2.5rem 0 0 $grass2;

      &:before {
        width: 1rem;
        height: 2rem;
        transform: translate3d(4rem, 0rem, 0) skewY(-1deg);
        background: $grass2;
        border-radius: 50%;
        box-shadow: 1rem -0.5rem 0 $grass2,
          //
          1.6rem -1rem 0 $grass3,
          //
          2.1rem -1.5rem 0 0 $grass3,
          //
          0.6rem -1.6rem 0 -0.1rem $grass2,
          //
          1.1rem -2rem 0 0 $grass2,
          //
          1.5rem -2.4rem 0 -0.2rem $grass2; //
      }

      &:after {
        width: 1rem;
        height: 2rem;
        transform: translate3d(6rem, -1rem, 0) skewY(2deg);
        background: $grass3;
        border-radius: 50%;
        box-shadow: 0.75rem -0.5rem 0 $grass3,
          //
          1.5rem -1.1rem 0 $grass3,
          //
          2.2rem -1.6rem 0 0 $grass3,
          //
          0.6rem -1.5rem 0 0 $grass3,
          //
          1.3rem -2.1rem 0 0 $grass2,
          //
          1.6rem -2.5rem 0 -0.2rem $grass2; //
      }
    }

    & > x:nth-of-type(4) {
      width: 1rem;
      height: 2rem;
      transform: translate3d(27rem, 17.5rem, 0) skewY(-1deg);
      box-shadow: 0.75rem -0.5rem 0 $grass2,
        //
        1.5rem -1.1rem 0 $grass3,
        //
        2rem -1.6rem 0 0 $grass2,
        //
        2.6rem -2rem 0 0 $grass3,
        //
        3rem -2.5rem 0 0 $grass2,
        //
        3.5rem -2.4rem 0 0 $grass3,
        //
        4rem -3.1rem 0 0 $grass2,
        //
        1.75rem -0.4rem 0 $grass2,
        //
        2.5rem -1.3rem 0 $grass3,
        //
        3rem -1.5rem 0 0 $grass2,
        //
        3.6rem -1.9rem 0 0 $grass3,
        //
        4rem -2.3rem 0 0 $grass2,
        //
        4.5rem -3rem 0 0 $grass3,
        //
        5rem -3.5rem 0 0 $grass2;

      &:before {
        width: 1rem;
        height: 2rem;
        transform: translate3d(2rem, 0.1rem, 0) skewY(-1deg);
        background: $grass2;
        border-radius: 50%;
        box-shadow: 0.75rem -0.5rem 0 $grass2,
          //
          1.5rem -1.1rem 0 $grass3,
          //
          2rem -1.6rem 0 0 $grass2,
          //
          2.6rem -2rem 0 0 $grass3,
          //
          3rem -2.5rem 0 0 $grass2,
          //
          3.5rem -2.4rem 0 0 $grass3,
          //
          4rem -3.1rem 0 0 $grass2,
          //
          1.75rem -0.4rem 0 $grass2,
          //
          2.5rem -1.3rem 0 $grass3,
          //
          3rem -1.5rem 0 0 $grass2,
          //
          3.6rem -1.9rem 0 0 $grass3,
          //
          4rem -2.3rem 0 0 $grass2,
          //
          4.5rem -3rem 0 0 $grass3,
          //
          5rem -3.5rem 0 0 $grass2;
        //;
      }

      &:after {
        width: 1rem;
        height: 2rem;
        transform: translate3d(4rem, 0.3rem, 0) skewY(-1deg);
        background: $grass2;
        border-radius: 50%;
        box-shadow: 0.75rem -0.5rem 0 $grass2,
          //
          1.5rem -1.1rem 0 $grass3,
          //
          2rem -1.6rem 0 0 $grass2,
          //
          2.6rem -2rem 0 0 $grass3,
          //
          3rem -2.5rem 0 0 $grass2,
          //
          3.5rem -2.4rem 0 0 $grass3,
          //
          4rem -3.1rem 0 0 $grass3,
          //
          1.75rem -0.4rem 0 $grass2,
          //
          2.5rem -1.3rem 0 $grass3,
          //
          3rem -1.5rem 0 0 $grass3,
          //
          3.6rem -1.9rem 0 0 $grass3,
          //
          4rem -2.3rem 0 0 $grass3,
          //
          4.5rem -3rem 0 0 $grass3,
          //
          5rem -3.2rem 0 0 $grass2;
        //;
      }
    }

    & > x:nth-of-type(5) {
      width: 1rem;
      height: 2rem;
      transform: translate3d(39rem, 17.5rem, 0) skewY(-1deg);
      box-shadow: 0.75rem -0.5rem 0 $grass2,
        //
        1.5rem -1.1rem 0 $grass3,
        //
        2rem -1.6rem 0 0 $grass2,
        //
        2.6rem -2rem 0 0 $grass3,
        //
        3rem -2.5rem 0 0 $grass2,
        //
        3.5rem -2.4rem 0 0 $grass3,
        //
        4rem -3.1rem 0 0 $grass2,
        //
        1.75rem -0.4rem 0 $grass2,
        //
        2.5rem -1.3rem 0 $grass3,
        //
        3rem -1.5rem 0 0 $grass2,
        //
        3.6rem -1.9rem 0 0 $grass3,
        //
        4rem -2.3rem 0 0 $grass2,
        //
        4.5rem -3rem 0 0 $grass3,
        //
        5rem -3.5rem 0 0 $grass2;

      &:before {
        width: 1rem;
        height: 2rem;
        transform: translate3d(2rem, 0.1rem, 0) skewY(-1deg);
        background: $grass2;
        border-radius: 50%;
        box-shadow: 0.75rem -0.5rem 0 $grass2,
          //
          1.5rem -1.1rem 0 $grass3,
          //
          2rem -1.6rem 0 0 $grass2,
          //
          2.6rem -2rem 0 0 $grass3,
          //
          3rem -2.5rem 0 0 $grass2,
          //
          3.5rem -2.4rem 0 0 $grass3,
          //
          4rem -3.1rem 0 0 $grass2,
          //
          1.75rem -0.4rem 0 $grass2,
          //
          2.5rem -1.3rem 0 $grass3,
          //
          3rem -1.5rem 0 0 $grass2,
          //
          3.6rem -1.9rem 0 0 $grass3,
          //
          4rem -2.3rem 0 0 $grass2,
          //
          4.5rem -3rem 0 0 $grass3,
          //
          5rem -3.5rem 0 0 $grass2;
        //;
      }

      &:after {
        width: 1rem;
        height: 2rem;
        transform: translate3d(4rem, 0.3rem, 0) skewY(-1deg);
        background: $grass2;
        border-radius: 50%;
        box-shadow: 0.75rem -0.5rem 0 $grass2,
          //
          1.5rem -1.1rem 0 $grass3,
          //
          2rem -1.6rem 0 0 $grass2,
          //
          2.6rem -2rem 0 0 $grass3,
          //
          3rem -2.5rem 0 0 $grass2,
          //
          3.5rem -2.4rem 0 0 $grass3,
          //
          4rem -3.1rem 0 0 $grass3,
          //
          1.75rem -0.4rem 0 $grass2,
          //
          2.5rem -1.3rem 0 $grass3,
          //
          3rem -1.5rem 0 0 $grass3,
          //
          3.6rem -1.9rem 0 0 $grass3,
          //
          4rem -2.3rem 0 0 $grass3,
          //
          4.5rem -3rem 0 0 $grass3,
          //
          5rem -3.2rem 0 0 $grass2;
        //;
      }
    }

    & > x:nth-of-type(6) {
      width: 1rem;
      height: 2rem;
      transform: translate3d(34rem, 16.5rem, 0) skewY(-1deg);
      box-shadow: 0.75rem -0.3rem 0 $grass2,
        //
        1.35rem -0.7rem 0 $grass3,
        //
        2rem -1.5rem 0 $grass3,
        //
        1.75rem -0.3rem 0 $grass3,
        //
        2.35rem -0.7rem 0 $grass3,
        //
        3rem -1.5rem 0 $grass3;

      &:before {
        opacity: 0.5;
        width: 1rem;
        height: 0.5rem;
        transform: translate3d(-26rem, 2rem, 0) skewX(-30deg);
        background: $shadow;
        border-radius: 50%;
        box-shadow: 0.75rem -0.2rem 0 $shadow,
          //
          1.75rem -0.7rem 0 $shadow,
          //
          2.5rem -0.2rem 0 $shadow,
          //
          2.75rem -1rem 0 $shadow,
          //
          3.75rem -0.1rem 0 $shadow,
          //
          4.75rem -0.7rem 0 $shadow,
          //
          5.5rem -0.2rem 0 $shadow,
          //
          4.25rem -1.2rem 0 $shadow,
          //
          3.75rem -2rem 0 $shadow,
          //
          4.5rem -2.5rem 0 $shadow;
        //;
      }

      &:after {
        width: 1rem;
        height: 2rem;
        transform: translate3d(-15rem, -1rem, 0) skewY(4deg);
        background: $grass3;
        border-radius: 50%;
        box-shadow: 0.75rem -0.3rem 0 $grass2,
          //
          1.35rem -0.7rem 0 $grass3,
          //
          2rem -1.5rem 0 $grass2,
          //
          1.75rem -0.3rem 0 $grass2,
          //
          2.35rem -0.7rem 0 $grass3,
          //
          3rem -1.5rem 0 $grass3;
      }
    }

    & > x:nth-of-type(7) {
      opacity: 0.5;
      width: 1rem;
      height: 0.5rem;
      transform: translate3d(19.5rem, 19rem, 0) skewX(-30deg);
      background: $shadow;
      border-radius: 50%;
      box-shadow: -0.75rem -0.2rem 0 $shadow,
        //
        1.75rem -0.7rem 0 $shadow,
        //
        2.5rem -0.2rem 0 $shadow,
        //
        2.75rem -1rem 0 $shadow,
        //
        3.75rem -0.1rem 0 $shadow,
        //
        4.75rem -0.7rem 0 $shadow,
        //
        5.5rem -0.2rem 0 $shadow,
        //
        4.25rem -1.2rem 0 $shadow,
        //
        3.75rem -2rem 0 $shadow,
        //
        4.5rem -2.5rem 0 $shadow;

      &:before {
        width: 1rem;
        height: 0.5rem;
        transform: translate3d(12rem, 0rem, 0) skewX(-30deg);
        background: $shadow;
        border-radius: 50%;
        box-shadow: 0.75rem -0.2rem 0 $shadow,
          //
          1.75rem -0.7rem 0 $shadow,
          //
          2.5rem -0.2rem 0 $shadow,
          //
          2.75rem -1rem 0 $shadow,
          //
          3.75rem -0.1rem 0 $shadow,
          //
          4.75rem -0.7rem 0 $shadow,
          //
          5.5rem -0.2rem 0 $shadow,
          //
          4.25rem -1.2rem 0 $shadow,
          //
          3.75rem -2rem 0 $shadow,
          //
          4.5rem -2.5rem 0 $shadow;
      }

      &:after {
        width: 20rem;
        height: 0.15rem;
        background: linear-gradient(
          to right,
          $beach,
          rgba($beach, 0.5),
          $beach
        );
        transform: translate3d(9rem, 0, 0) skewY(-1.5deg);
        box-shadow: 0 0.5rem 0 $beach;
        opacity: 0.5;
      }
    }
  }

  & > x:nth-of-type(5) {
    width: 50rem;
    height: 50rem;
    transform: translate3d(70rem, 23rem, 0);
    border-radius: 50%;
    background: radial-gradient($none, $sun3 20%, $none, $none);
    filter: blur(1rem);
    opacity: 0.3;

    &:before {
      width: 13rem;
      height: 13rem;
      transform: translate3d(19rem, 19rem, 0);
      border-radius: 50%;
      background: $light;
      box-shadow: -2rem -10rem 0 8rem rgba($sky2, 0.2),
        //
        -20rem -30rem 0 12rem rgba($light, 0.2);
      //;
    }

    &:after {
      width: 70rem;
      height: 2rem;
      border-radius: 50%;
      transform: translate3d(-11rem, 25rem, 0) rotate(-50deg);
      background: linear-gradient(
        to right,
        $sun1,
        $sun1 24%,
        $red 25%,
        $red 35%,
        $green2 36%,
        #fff 45%,
        $sun1
      );
    }
  }
}

seasun {
  transform: translate3d(74rem, 63.5rem, 0) skewY(1deg) rotateX(52deg);
  width: 50rem;
  height: 50rem;

  &:before {
    transform: translate3d(19.5rem, -0.5rem, 0);
    width: 7.5rem;
    height: 6rem;
    background: $sky2;
    border-radius: 50%;
    opacity: 0.75;
    box-shadow: // 0 0 1rem $sky2,
      //
        // circle2 0.5rem 3rem 1rem -1rem
      $sky2,
      //
      // circle3
      0.5rem 6rem 1rem 0.5rem $sky2,
      //
      //4
      0 8rem 1rem -0.5rem $sky2,
      //
      //35
      1rem 10rem 1rem -1rem $sky2,
      //
      //5
      -0.5rem 12rem 1rem -0.7rem $sky2,
      //
      //6
      0 22rem 1rem -1rem $sky2; //
  }

  &:after {
    transform: translate3d(20rem, 0, 0);
    width: 6.5rem;
    height: 5rem;
    background: $light;
    border-radius: 50%;
    box-shadow: 0 0 1rem $light,
      //
      // circle22
      0.5rem 3rem 0 -1rem $light,
      //
      0.5rem 3rem 1rem -1rem $light,
      //
      // circle2
      0.5rem 6rem 0 0.5rem $light,
      //
      0.5rem 6rem 1rem 0.5rem $light,
      //
      //3
      0 8rem 0 -0.5rem $light,
      //
      0 8rem 1rem -0.5rem $light,
      //
      //35
      1rem 10rem 0 -1.5rem $light,
      //
      1rem 10rem 1rem -1.5rem $light,
      //
      //4
      -0.5rem 12rem 0 -1.25rem $light,
      //
      -0.5rem 12rem 1rem -1.25rem $light,
      //
      //5
      0 22rem 0 -1rem $light,
      //
      0 22rem 1rem -1rem $light;
  }

  & > x:nth-of-type(4),
  & > x:nth-of-type(2),
  & > x:nth-of-type(3) {
    transform-origin: 50% 0;
    transform: translate3d(21rem, 1rem, 0) skewX(-2deg);

    & > x:nth-of-type(1) {
      transform: translate3d(1rem, 8rem, 0) scaleY(0.6);
    }

    & > x:nth-of-type(2) {
      transform: translate3d(-1rem, 15rem, 0) scaleY(0.7);
    }

    & > x:nth-of-type(3) {
      transform: translate3d(3rem, 19rem, 0) scaleY(0.8);
    }

    & > x:nth-of-type(4) {
      transform: translate3d(-2rem, 24rem, 0) scaleY(0.9);
    }

    & > x:nth-of-type(5) {
      transform: translate3d(-1rem, 28rem, 0) scaleY(1);
    }

    & > x:nth-of-type(6) {
      transform: translate3d(-2.5rem, 32rem, 0) scaleY(1.1);
    }

    &,
    *,
    *:before,
    *:after {
      color: $light;
      background: currentColor;
      border-radius: 0 0 100% 100%;
      width: 2rem;
      height: 0.3rem;
    }

    &,
    *:before,
    *:after,
    * {
      box-shadow: 1.5rem 0 0.15rem currentColor,
        //
        //
        6.2rem 2rem 0.25rem currentColor,
        //
        2.4rem 2.2rem 0 currentColor,
        //
        4rem 2.9rem 0.15rem currentColor,
        //
        //
        -0.5rem 4.2rem 0.25rem currentColor,
        //
        1.5rem 5rem 0.15rem currentColor,
        //
        2.75rem 4.5rem 0 currentColor,
        //
        //
        5.7rem 7.3rem 0.25rem currentColor,
        //
        0.75rem 6.1rem 0 currentColor,
        //
        3.5rem 6.6rem 0.15rem currentColor,
        //
        //
        8rem 8.4rem 0.15rem currentColor,
        //
        2.5rem 8.3rem 0.25rem currentColor,
        //
        2.2rem 9.1rem 0 currentColor;
      //
      //;
    }

    *:before {
      transform: translate3d(-4rem, 1rem, 0) skewY(5deg);
      color: $sun2;
    }

    *:after {
      transform: translate3d(3rem, -1rem, 0) skewY(-5deg);
      color: $sun2;
    }
  }

  & > x:nth-of-type(2) {
    transform: translate3d(27rem, 2rem, 0) scaleX(-1) skewX(10deg);

    &,
    *,
    *:before,
    *:after {
      color: $sky2;
      width: 1rem;
      height: 0.5rem;
    }
  }

  & > x:nth-of-type(4) {
    transform: translate3d(19rem, -1rem, 0);

    &,
    *,
    *:before,
    *:after {
      color: $sun3;
      width: 2rem;
      height: 0.2rem;
    }
  }

  & > x:nth-of-type(5) {
    transform: translate3d(20rem, 16rem, 0);

    &,
    &:before,
    &:after {
      color: $light;
      width: 5rem;
      height: 1rem;
      background: currentColor;
      border-radius: 50%;
      box-shadow: // 0 0 1rem currentColor,
        // 0 1rem 0 -0.25rem currentColor,
        //
        0 1rem 1rem -0.25rem currentColor,
        //
        -1rem 2rem 0 currentColor,
        //
        -1rem 2rem 1rem currentColor,
        //
        1rem 3rem 0 0.15rem currentColor,
        //
        1rem 3rem 1rem 0.15rem currentColor,
        //
        -1rem 5rem 0 0.15rem currentColor,
        //
        -1rem 5rem 1rem 0.15rem currentColor,
        //
        -1.5rem 11rem 0 0.2rem currentColor,
        //
        -1.5rem 11rem 1rem 0.2rem currentColor,
        //
        1rem 13rem 0 -0.1rem currentColor,
        //
        1rem 13rem 1rem -0.1rem currentColor,
        //
        -2rem 14rem 0 -0.1rem currentColor,
        //
        -2rem 14rem 1rem -0.1rem currentColor,
        //
        -2.5rem 15rem 0 0rem currentColor,
        //
        -2.5rem 15rem 1rem 0rem currentColor,
        //
        -1rem 17rem 0 0.2rem currentColor,
        //
        -1rem 17rem 1rem 0.2rem currentColor,
        //
        -3rem 20rem 0 0.15rem currentColor,
        //
        -3rem 20rem 1rem 0.15rem currentColor,
        //
        -1rem 22rem 0 0.1rem currentColor,
        //
        -1rem 22rem 1rem 0.1rem currentColor,
        //
        //
        -2rem -8rem 0 0.5rem currentColor,
        //
        3rem -7.5rem 0 0.5rem currentColor,
        //
        -2rem -8rem 1rem 0.5rem currentColor,
        //
        3rem -7.5rem 1rem 0.5rem currentColor,
        //
        //
        -2rem -13.25rem 0 currentColor,
        //
        2rem -14.25rem 0 currentColor,
        //
        -2rem -13.25rem 1rem currentColor,
        //
        2rem -14.25rem 1rem currentColor;
      //;
    }

    & {
      color: rgba($sky2, 0.8);
      width: 7rem;
      height: 1rem;
    }

    &:before {
      transform: translate3d(-1rem, 0, 0);
      color: $sky2;
      width: 9rem;
      height: 1.5rem;
      opacity: 0.5;
    }

    &:after {
      transform: translate3d(1rem, 0, 0);
    }
  }

  & > x:nth-of-type(1) {
    width: 30rem;
    border-radius: 50%;
    height: 50rem;
    background: linear-gradient(to right, $none, $none, $sun3, $none, $none);
    transform: translate3d(7rem, -1rem, 0) skewX(-4deg);
    opacity: 0.8;
  }
}

sky {
  height: 100%;
  width: 100%;

  & > x:nth-of-type(1) {
    &:after {
      width: 11rem;
      height: 11rem;
      border-radius: 50%;
      transform: translate3d(90rem, 42.5rem, 0);
      background: $light;
      box-shadow: 0 0 1rem $light, 0 0 2rem $light, 0 0 2rem $light;
    }

    & > x:nth-of-type(3) {
      width: 13rem;
      height: 1rem;
      background: $light;
      box-shadow: 0 0 1rem $light;
      border-radius: 50%;
      transform: translate3d(90rem, 52.5rem, 0) skewY(-5deg);

      &:before {
        width: 19rem;
        height: 2rem;
        background: $light;
        border-radius: 50%;
        transform: translate3d(-4rem, -4rem, 0) skewY(5deg);
        box-shadow: 0 0 1rem $light,
          //
          0 1rem 0.5rem -0.5rem $light;
      }

      &:after {
        width: 16rem;
        height: 2rem;
        background: $light;
        border-radius: 50%;
        transform: translate3d(-2rem, -7rem, 0) skewY(3deg);
        box-shadow: 0 0 1rem $light,
          //
          0 5rem 0.5rem -0.5rem $light,
          //
          0 1rem 1rem -0.5rem $light; //
      }
    }

    & > x:nth-of-type(2) {
      width: 80rem;
      height: 10rem;
      border-radius: 50%;
      background: rgba($beach, 0.1);
      transform: translate3d(-20rem, 58rem, 0) skewY(-2deg) skewX(10deg);
      box-shadow: 0 0 1rem rgba($beach, 0.05),
        //
        -7rem -6rem 1rem rgba($beach, 0.1),
        //
        -9rem -12rem 1rem rgba($beach, 0.1),
        //
        25rem -17rem 1rem rgba($beach, 0.1),
        //
        10rem -12rem 1rem rgba($beach, 0.05),
        //
        70rem -7rem 1rem rgba($beach, 0.08),
        //
        140rem -9rem 1rem rgba($beach, 0.08),
        //
        //
        50rem -22rem 1rem rgba($beach, 0.05),
        //
        110rem -18rem 1rem rgba($beach, 0.05),
        //
        130rem -25rem 1rem rgba($beach, 0.05),
        //
        //
        5rem -25rem 1rem rgba($beach, 0.07),
        //
        40rem -29rem 1rem rgba($beach, 0.05),
        //
        100rem -20rem 1rem rgba($beach, 0.06),
        //
        110rem -30rem 1rem rgba($beach, 0.05),
        //
        //
        -4rem -35rem 1rem rgba($beach, 0.08),
        //
        60rem -37rem 1rem rgba($beach, 0.05),
        //
        140rem -30rem 1rem rgba($beach, 0.06),
        //
        150rem -40rem 1rem rgba($beach, 0.05),
        //
        //
        -10rem -45rem 1rem rgba($beach, 0.05),
        //
        40rem -48rem 1rem rgba($beach, 0.05),
        //
        110rem -42rem 1rem rgba($beach, 0.06),
        //
        130rem -50rem 1rem rgba($beach, 0.05),
        //
        //
        -8rem -56rem 1rem rgba($beach, 0.07),
        //
        50rem -58rem 1rem rgba($beach, 0.08),
        //
        90rem -55rem 1rem rgba($beach, 0.07),
        //
        120rem -64rem 1rem rgba($beach, 0.05);

      &:before {
        width: 40rem;
        height: 2rem;
        background: $sky2;
        border-radius: 60% 40%;
        transform: translate3d(45rem, 0, 0);
        opacity: 0.2;
        box-shadow: 0 0 1rem $sky2,
          //
          -30rem 0 1rem rgba($beach, 0.4),
          //
          1rem 1rem 1rem rgba($beach, 0.5),
          //
          -33rem -2rem 1rem rgba($beach, 0.5),
          //
          -32rem -3rem 1rem $sky2,
          //
          6rem -1rem 1rem rgba($beach, 0.5),
          //
          5rem -2rem 1rem $sun3,
          //
          inset 0 1rem 1rem $sun3;
        //;
      }

      &:after {
        width: 70rem;
        height: 3rem;
        background: radial-gradient(
            rgba($light, 0.8) 40%,
            rgba($sky2, 0.5),
            $none
          ),
          $light;
        border-radius: 50%;
        transform: translate3d(85rem, -7rem, 0) skewY(-2deg);
        box-shadow: 0 0 1rem $sun2,
          //
          0 0 2rem $sky2,
          //
          0 0 1rem $sun2,
          //
          -30rem 0 1rem rgba($sun1, 0.2),
          //
          //
          -6rem 2.5rem 1rem -0.5rem rgba($light, 0.3),
          //
          -6rem 2.5rem 1rem -0.5rem $sky2,
          //
          //
          //
          -5rem -4rem 1rem -1.1rem rgba($light, 0.5),
          //
          -5rem -4rem 1rem rgba($sun2, 0.5);
        //;
      }
    }

    & > x:nth-of-type(1) {
      width: 30rem;
      height: 30rem;
      border-radius: 50%;
      transform: translate3d(83rem, 35rem, 0);
      background: radial-gradient($light, $light, $sun2, $none, $none, $none);

      &:before {
        width: 80rem;
        height: 2rem;
        transform: translate3d(-65rem, 15rem, 0) skewY(-4deg) skewX(10deg);
        background: linear-gradient(to right, $sky2, $light);
        border-radius: 50%;
        box-shadow: -1rem 0 1rem $sun2,
          //
          10rem 0 1rem $light,
          //
          80rem 0 1rem $sun2,
          //
          85rem 2rem 1rem rgba($sun2, 0.5),
          //
          85rem 4rem 1rem rgba($sun2, 0.2),
          //
          30rem -1rem 2rem $light,
          //
          32rem -2rem 2rem $sun2,
          //
          40rem -4rem 2rem $light;
        //;
      }

      &:after {
        opacity: 0.25;
        width: 20rem;
        height: 0.5rem;
        border-radius: 50%;
        background: $sea1;
        transform: translate3d(-34rem, 22rem, 0) skewY(-2deg) skewX(20deg);
        box-shadow: -5rem -2rem 0.25rem $sea1,
          //
          -1rem -6rem 0.25rem $sea1,
          //
          10rem -5.5rem 0.25rem $sea1,
          //
          4rem -4rem 0.25rem $sea1,
          //
          -25rem -0.5rem 0.25rem $sea1,
          //
          //
          10rem -3rem 0.25rem $sea1,
          //
          20rem -1rem 0.25rem $sea1,
          //
          25rem -0.5rem 0.25rem $sea1,
          //
          //
          6rem -10rem 0.25rem $sea1,
          //
          20rem -9rem 0.25rem $sea1,
          //
          35rem -8.25rem 0.25rem $sea1,
          //
          //
          21rem -4rem 0.25rem $sea1; //
      }
    }
  }

  & > x:nth-of-type(2) {
    // background
    & > x:nth-of-type(1) {
      opacity: 0.3;
      width: 20rem;
      height: 1rem;
      border-radius: 50%;
      transform: translate3d(20rem, 61.5rem, 0);
      background: $sea2;
      box-shadow: 15rem 0 0 $sea2;

      &:before {
        width: 4rem;
        height: 4rem;
        border-radius: 1rem;
        background: $sea2;
        transform: translate3d(9rem, -0.25rem, 0);
        box-shadow: -0.5rem -1.5rem 0 -1.25rem $sea2;
      }

      &:after {
        width: 0.5rem;
        height: 0.75rem;
        border-radius: 50% 50% 0 0;
        background: $sea2;
        transform: translate3d(11.5rem, -0.75rem, 0);
      }
    }
    //clouds
    & > x:nth-of-type(2),
    & > x:nth-of-type(3),
    & > x:nth-of-type(4),
    & > x:nth-of-type(5),
    & > x:nth-of-type(6),
    & > x:nth-of-type(7),
    & > x:nth-of-type(8),
    & > x:nth-of-type(9) {
      &,
      &:after,
      &:before {
        font-size: 1rem;
        filter: blur(0.2rem);
        color: $cloud;
        transform: translate3d(115em, 47em, 0) rotate(-5deg) skewX(-100deg);
        width: 10em;
        height: 1em;
        background: rgba($cloud, 0.3);
        border-radius: 50%;
        box-shadow: // 5em -1em 0.25em 2em currentColor,
          // 14em -0.5em
          0.25em 1em currentColor,
          //
          20em -0.25em 0.25em 0.5em currentColor,
          //
          23em 0 0.25em currentColor,
          //
          //
          -1em 1em 0.25em 0.5em currentColor,
          //
          5em 0.5em 0.25em 1em currentColor,
          //
          15em 0em 0.25em currentColor,
          //
          17em 0em 0.25em -0.5em currentColor;
        //;
      }

      &:before {
        transform: translate3d(25rem, -5rem, 0);
        height: 3em;
      }

      &:after {
        transform: translate3d(-40rem, -3rem, 0);
        font-size: 0.75rem;
        width: 20em;
        opacity: 0.7;
      }
    }

    & > x:nth-of-type(3) {
      transform: translate3d(80rem, 43rem, 0) rotate(-5deg) skewX(-100deg);
      width: 5rem;
    }

    & > x:nth-of-type(4) {
      transform: translate3d(138rem, 38rem, 0) rotate(-5deg) skewX(-100deg);
      width: 5rem;
      height: 3rem;
    }

    & > x:nth-of-type(5) {
      transform: translate3d(60rem, 39rem, 0) rotate(-5deg) skewX(-100deg);

      &,
      &:after,
      &:before {
        width: 10rem;
        height: 3rem;
        color: darken($cloud, 5%);
      }
    }

    & > x:nth-of-type(6) {
      transform: translate3d(-15rem, 50rem, 0) rotate(-5deg) skewX(-100deg);

      &,
      &:after,
      &:before {
        width: 20rem;
        height: 1rem;
        color: darken($cloud, 15%);
      }

      &:before {
        transform: translate3d(25rem, 0, 0);
      }
    }

    & > x:nth-of-type(7) {
      transform: translate3d(60rem, 30rem, 0) rotate(-5deg) skewX(-100deg)
        scale(1.5);

      &,
      &:after,
      &:before {
        width: 30rem;
        height: 1rem;
        color: darken($cloud, 10%);
      }

      &:before {
        transform: translate3d(-31rem, -7rem, 0);
      }

      &:after {
        transform: translate3d(19rem, 4rem, 0);
      }
    }

    & > x:nth-of-type(8) {
      transform: translate3d(100rem, 20rem, 0) rotate(-5deg) skewX(-100deg)
        scale(2);

      &,
      &:after,
      &:before {
        width: 30rem;
        height: 1rem;
        color: darken($cloud, 5%);
      }

      &:before {
        transform: translate3d(-34rem, -6rem, 0);
      }

      &:after {
        transform: translate3d(20rem, -10rem, 0);
      }
    }

    & > x:nth-of-type(9) {
      transform: translate3d(116rem, 51rem, 0) rotate(-5deg) skewX(-100deg);

      &:before {
        transform: translate3d(-22rem, -9rem, 0);
      }
    }
  }
}

sig {
  &,
  * {
    height: 9.25em;
    overflow: hidden;
    border-radius: 0.5em;
  }

  font-size: 0.5rem;
  width: 10em;
  top: auto;
  left: auto;
  bottom: 1em;
  right: 1em;
  transform: skewX(10deg) scaleY(0.45) rotate(2deg);

  &:before,
  *:before {
    width: 5em;
    height: 5em;
    background: #000;
    transform: translate3d(-2.5em, 0, 0) rotate(-45deg);
    box-shadow: -3em 3em 0 0 #000;
    border-radius: 0.5em 2em 0.5em 2em;
  }

  * {
    width: 5em;
    transform: translate3d(3.75em, 0, 0) scaleY(0.95);

    &:before {
      transform: translate3d(-3em, -2em, 0) rotate(-45deg);
      box-shadow: -3em 3em 0 0 #000, -6em 6em 0 0 #000;
      border-radius: 0.5em;
    }
  }
}

              
            
!

JS

              
                // A Pure CSS Landscape
// No images, just CSS

// <- Choose your own sunset and change the light source

// www.instagram.com/ivorjetski
// twitter.com/ivorjetski

// The final part to my pointless trilogy
// Still Life = https://codepen.io/ivorjetski/pen/xMJoYO
// Portrait = https://codepen.io/ivorjetski/pen/dBYWWZ

              
            
!
999px

Console