Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

Save Automatically?

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 Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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>
    </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,.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,.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,.4);

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

@media (orientation:portrait) {
    html {
        font-size: .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: .75;
        background: linear-gradient(rgba($purple,.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: .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: .8;
        -webkit-mask-image: linear-gradient(to right,$none, #fff);
        filter: blur(.5rem);
    }

    x:nth-of-type(3) {
        width: 300rem;
        height: 50rem;
        border-radius: 50%;
        box-shadow: 20rem .5rem .2rem 1.2rem $darksea2, 25rem .5rem .2rem 2.5rem $sea1, 50rem .5rem .2rem 4rem $darksea2;
        left: -50rem;
        top: 44%;
        overflow: hidden;
        transform: skewX(-20deg) rotate(4deg);
        opacity: .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: .3;
        filter: blur(1rem);
    }

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

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

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

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

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

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

    x:nth-of-type(7) {
        width: 30rem;
        height: 1rem;
        background: rgba($lightsea,.5);
        left: 0rem;
        top: 6.5rem;
        border-radius: 50%;
        filter: blur(.3rem);
        opacity: .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 .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(.2rem);
        opacity: .3;
        transform: rotate(-1deg);
        box-shadow: 5rem -2rem 0 rgba($lightsea,.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: .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, .5rem .5rem;
        opacity: .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: .2;

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

        &:after {
            box-shadow: $waves1;
            width: 1.5rem;
            height: .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: .8rem;
        height: 3.2rem;
        background: $shadow;
        left: 22.75rem;
        top: 10.4rem;
        border-radius: .2rem;
        transform: skewX(-2deg);

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

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

    & > x:nth-of-type(2) {
        width: 8rem;
        height: .5rem;
        background: $shadow;
        left: 22rem;
        top: 12.3rem;
        border-radius: .2rem;
        transform: skewX(-2deg) rotate(-2deg);
        box-shadow: -.1rem .65rem .2rem -.15rem rgba($shadow,.7);

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

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

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

        &:before {
            width: .3rem;
            height: 1.1rem;
            background: $shadow;
            left: .32rem;
            box-shadow: .1rem 0 .1rem rgba($body,.5);
        }

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

    & > x:nth-of-type(4) {
        width: 1rem;
        height: .5rem;
        background: $shadow;
        left: 22.5rem;
        top: 13.5rem;
        box-shadow: -.1rem .5rem .1rem .1rem $shadow, .1rem .75rem .2rem .2rem rgba($shadow,.8), -.2rem 1.5rem .3rem .3rem rgba($shadow,.6), 0rem 3rem .4rem .4rem rgba($shadow,.4), -.1rem 4rem .5rem .5rem rgba($shadow,.2);
        border-radius: 50%;
        opacity: .3;
        filter: blur(.1rem);

        &:before {
            width: 1rem;
            height: .5rem;
            background: $shadow;
            left: 6.4rem;
            top: 0rem;
            box-shadow: -.1rem .5rem .1rem .1rem $shadow, -.1rem .75rem .2rem .2rem rgba($shadow,.8), .2rem 2rem .3rem .3rem rgba($shadow,.4), -.2rem 4rem .4rem .4rem rgba($shadow,.2), -.4rem 6rem .5rem .5rem rgba($shadow,.1);
            border-radius: 50%;
        }
    }

    & > x:nth-of-type(5) {
        width: .3rem;
        height: 1.5rem;
        background: $shadow;
        left: 31rem;
        top: 4.1rem;
        border-radius: .2rem;
        transform: skewX(4deg);
        box-shadow: 2.5rem 0 0 $shadow, 2.5rem 1.5rem .1rem rgba($shadow,.1), 0 1.5rem .1rem rgba($shadow,.1), 0 .5rem .2rem .2rem rgba($shadow,.1);
        opacity: .9;

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

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

    & > x:nth-of-type(6) {
        width: .2rem;
        height: .7rem;
        background: $shadow;
        left: 34rem;
        top: 2.5rem;
        border-radius: .2rem;
        transform: skewX(.2deg);
        box-shadow: 1.5rem 0 0 $shadow, 1.5rem 1.5rem .1rem rgba($shadow,.2), 0 1.5rem .1rem rgba($shadow,.2), 0 .5rem .2rem .2rem rgba($shadow,.2);
        opacity: .8;

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

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

    & > x:nth-of-type(7) {
        width: .1rem;
        height: .4rem;
        background: $shadow;
        left: 33.1rem;
        top: 1.9rem;
        border-radius: .05rem;
        transform: skewX(-.2deg);
        box-shadow: 1.3rem 0 0 $shadow, 1.3rem .4rem .1rem rgba($shadow,.2), 0 .3rem .1rem rgba($shadow,.2), 0 .5rem .2rem .2rem rgba($shadow,.2);
        opacity: .7;

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

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

    & > x:nth-of-type(8) {
        width: 1.5rem;
        height: 5rem;
        background: $shadow;
        border-radius: .5rem .5rem .75rem .75rem;
        transform: translate3d(131rem,25rem,0) skewX(2deg) skewY(4deg);
        box-shadow: 0 -.9rem 0 -.15rem $shadow, 8rem -1.5rem 0 -.15rem $shadow, 15rem -2rem 0 -.15rem $shadow, 22.6rem -2.5rem 0 -.15rem $shadow, 29.5rem -2.9rem 0 -.15rem $shadow, 8rem -.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 .2vmin .2vmin 0 rgba($shadow,.5);
        }

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

    & > x:nth-of-type(9) {
        width: 1.5rem;
        height: .75rem;
        border-radius: 0 0 .75rem .75rem;
        left: 131rem;
        top: 29rem;
        background: $shadow;
        transform: skewY(-4deg);
        box-shadow: 1rem -.2rem .5rem rgba($shadow,.75), 3rem -.3rem .5rem rgba($shadow,.75), -.15rem .5rem .2rem rgba($shadow,.95), .35rem 1rem .2rem rgba($shadow,.9), .25rem 1.75rem .2rem rgba($shadow,.8), 0 2rem .2rem rgba($shadow,.7), 1rem 2rem .2rem -.2rem rgba($shadow,.7), -.5rem 2.5rem .2rem -.2rem rgba($shadow,.6), 0rem 2.75rem .2rem -.2rem rgba($shadow,.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 .25rem .25rem rgba($shadow,.75), 10.5rem .5rem .5rem rgba($shadow,.75), 8rem 1rem .2rem rgba($shadow,.95), 8.1rem 2.1rem .2rem rgba($shadow,.8), 8.5rem 3rem .2rem rgba($shadow,.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 .5rem rgba($shadow,.75), 17.5rem 1rem .5rem rgba($shadow,.75), 15rem 1rem .2rem rgba($shadow,.95), 15.1rem 2.5rem .2rem rgba($shadow,.8), 14.9rem 3rem .2rem rgba($shadow,.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 .5rem rgba($shadow,.75), 27.5rem 1rem .5rem rgba($shadow,.75), 23rem 1rem .2rem rgba($shadow,.95), 23.1rem 2.5rem .2rem rgba($shadow,.5), 22.6rem 3rem .2rem rgba($shadow,.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: .25rem;
            border-radius: 0 0 .75rem .75rem;
            left: 8rem;
            top: 3.5rem;
            background: $shadow;
            transform: skewY(4deg);
            opacity: .7;
            box-shadow: 1rem 1rem .3rem $shadow, //
            1.5rem 1.25rem .3rem $shadow, //
            7rem 0rem .2rem $shadow, //
            9rem -2rem .3rem $shadow, //
            10rem -2.5rem .2rem $shadow, //
            10.5rem -2rem .2rem $shadow, //
            11rem -2.25rem .2rem $shadow, //
            11.3rem -2.75rem .3rem $shadow, //
            12.3rem -2.5rem .4rem $shadow, //
            14rem -2.35rem .2rem $shadow, //
            16rem 2.35rem .2rem $shadow, //
            15rem 1rem .5rem $shadow, //
            16rem -2rem .2rem $shadow, //
            17rem -2rem .2rem $shadow, //
            19.5rem -2.5rem .2rem $shadow, //
            18.2rem -1.9rem .5rem $shadow, //
            17.2rem -1rem .4rem $shadow, //
            17.6rem -1.1rem .2rem $shadow, //
            18.1rem -.9rem .2rem $shadow, //
            21rem -1.4rem .2rem $shadow, //
            21.1rem -2rem .2rem $shadow;
        }

        &:after {
            left: -.2rem;
            top: -8rem;
            background: $shadow;
            width: .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 / .2rem 0 0 0;

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

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

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

        &:before {
            left: .2rem;
            top: -.3rem;
            width: .6rem;
            height: .5rem;
            border-radius: 50% 50% 50% 0;
            background: darken($house,5%);
        }

        &:after {
            border: .1rem solid $none;
            border-top: .4rem solid darken($red,30%);
            transform: rotate(44deg);
            left: .1rem;
            top: .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: .3rem;
            height: 1.7rem;
            border-radius: .1rem;
            background: $shadow;
            transform: skew(4deg);

            &:before {
                left: 7rem;
                top: .4rem;
                width: .2rem;
                height: 1.3rem;
                border-radius: .1rem;
                background: $shadow;
                transform: skew(-6deg);
                box-shadow: 2.1rem .1rem 0 $shadow, //
                -2.1rem 0 0 $shadow, //
                -4.2rem 0 0 $shadow, //
                -6rem 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 .2rem 0 $shadow;
                transform: scaleY(.2);
                opacity: .8;
            }
        }

        & > x:nth-of-type(2) {
            transform: translate3d(10.9rem,.6rem,0) rotate(-2deg);
            width: .3rem;
            height: 1rem;
            border-radius: .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: .5rem;
                width: 4rem;
                height: .5rem;
                background: $shadow;
                transform: rotate(1deg);
                box-shadow: -2rem 0 0 -.1rem $shadow, //
                4rem 0 0 .1rem $shadow, //
                0 .3rem .2rem rgba($shadow,.2), //
                -2rem .2rem .2rem -.1rem rgba($shadow,.2), //
                4rem .5rem .2rem .1rem rgba($shadow,.2);
            }

            &:after {
                left: 9.6rem;
                top: -.5rem;
                width: .4rem;
                height: 1.5rem;
                border-radius: .1rem;
                background: $shadow;
                box-shadow: 2rem 0 0 $shadow, //
                4.05rem 0 0 $shadow, //
                5.9rem 0 0 $shadow, //
                7.9rem -.1rem 0 $shadow, //
                9.8rem -.2rem 0 $shadow, //
                11.6rem -.3rem 0 $shadow, //
                13.5rem -.5rem 0 $shadow, //
                15.5rem -.5rem 0 $shadow, //
                17.4rem -.6rem 0 $shadow, //
                19.4rem -.7rem 0 $shadow, //
                21.7rem -.8rem 0 $shadow, //
                26.5rem -.6rem 0 $shadow, //
            }
        }

        & > x:nth-of-type(3) {
            transform: translate3d(20.5rem,.6rem,0) rotate(-2deg);
            width: 2.2rem;
            height: .6rem;
            background: $shadow;
            box-shadow: 2.2rem -.1rem 0 $shadow, //
            4.4rem -.2rem 0 $shadow, //
            6.2rem -.3rem 0 $shadow, //
            8.2rem -.4rem 0 $shadow, //
            10rem -.5rem 0 $shadow, //
            12rem -.6rem 0 $shadow, //
            14rem -.7rem 0 $shadow, //
            16rem -.8rem 0 $shadow, //
            18rem -.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: .2rem;
                box-shadow: 1rem .2rem 0 $shadow, //
                1.5rem .5rem .5rem $shadow, //
                -5rem .6rem 0 .2rem $shadow, //
                -5rem .8rem .2rem .2rem rgba($shadow,.5), //
                -10rem 1rem 0 0 $shadow, //
                -10rem 1.2rem .2rem 0 rgba($shadow,.5);
            }

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

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

            &:before {
                width: .4rem;
                height: 5rem;
                border-radius: .2rem;
                background: $shadow;
                opacity: .4;
                transform: translate3d(-19.5rem,-.5rem,0) rotateY(-6deg) rotateX(80deg);
                box-shadow: 2rem 0 .15rem $shadow, //
                4.05rem 0 .15rem $shadow, //
                5.9rem 0 .15rem $shadow, //
                7.9rem -.1rem .15rem $shadow, //
                9.8rem .4rem .15rem $shadow, //
                11.6rem .5rem .15rem $shadow, //
                13.5rem .6rem .15rem $shadow, //
                15.5rem .7rem .2rem $shadow, //
                17.4rem .8rem .2rem $shadow, //
                19.4rem .9rem .25rem $shadow, //
                21.7rem .10rem .25rem $shadow;
            }

            &:after {
                transform: translate3d(-4rem,.2rem,0) skewX(45deg);
                background: $wave2;
                width: .4rem;
                height: 2rem;
                border-radius: .2rem;
                opacity: .2;
                box-shadow: 6.25rem 0 0 rgba($wave2,.7), -6.5rem .5rem 0 rgba($wave2,.9);
            }
        }

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

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

            &:after {
                transform: translate3d(-14rem, -1rem, 0) skewY(20deg) rotate(60deg);
                height: 3rem;
                width: 2rem;
                border-radius: .3rem;
                background: linear-gradient(105deg, $wave2, $wave2,rgba($shadow,.25) 25%,$none, $none);
                filter: blur(.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(.6);

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

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

            &:after {
                display: none;
            }
        }
    }

    & > x:nth-of-type(14) {
        transform: translate3d(47rem,2rem,0) scale(.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(.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, -.15rem,0);
        }

        &:after {
            width: 2rem;
            height: 1rem;
            background: $beach;
            transform: translate3d(3rem, -.15rem,0);
            border-radius: .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: .6rem solid $shadow;
            box-sizing: content-box;
        }

        &:before {
            width: 250rem;
            height: 2.5rem;
            border-bottom: 1rem solid rgba($shadow,.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(.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 .5rem $shadow, //
            4rem .5rem 0 $beach, //
            10rem .5rem 0 $beach, //
            10rem .5rem .5rem $shadow, //
            17rem .6rem 0 $beach2, //
            23rem .8rem 0 $beach, //
            26rem 1rem 0 .1rem $beach2;
        }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        &:before {
            width: 2.8rem;
            height: .75rem;
            background: $wave1;
            transform: translate3d(12rem, -5rem, 0);
            border-radius: .75rem;
            box-shadow: -3rem .6rem 0 .1rem $wave1, //
            -9rem .8rem 0 -.1rem $wave1, //
            -12rem 0rem 0 $wave1;
        }

        &:after {
            width: 2.8rem;
            height: .75rem;
            background: $wave1;
            transform: translate3d(17rem, -10rem, 0);
            border-radius: .75rem;
            box-shadow: -3rem .6rem 0 .1rem $wave1, //
            4rem -2rem 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 .75rem $shadow, //
        -8rem .1rem 0 $beach1, //
        -7rem 0 .75rem $shadow;

        &:after {
            width: 10rem;
            height: .75rem;
            background: $beach2;
            transform: translate3d(-10.75rem, .25rem, 0) rotate(-1deg);
            border-radius: 50%;
            box-shadow: 1rem .35rem .5rem $beach2;
        }

        &:before {
            width: .5rem;
            height: 2rem;
            border-radius: .1rem;
            background: $shadow;
            transform: translate3d(-5rem, -1rem, 0);
            box-shadow: 2rem -1rem .5rem $shadow, //
            -3rem .2rem 0 $shadow, //
            -6rem .2rem 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: .75rem;
            background: $beach1;
            transform: translate3d(-11rem, -1rem, 0) rotate(-1deg);
            border-radius: 50%;
            box-shadow: -4rem -1rem 0 0 $beach, //
            -7rem -.6rem 0 -.1rem $beach2, //
            0 0 .5rem 0 $beach2, //
            -11rem -1.1rem 0 -.2rem $beach, //
            1rem -.5rem 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: .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: .75rem;
                    height: 1rem;
                    background: $house;
                    transform: translate3d(2rem, .5rem, 0) skewY(-10deg) skewX(30deg);
                    box-shadow: -.15rem 0 0 $grass, //
                    -.25rem .25rem 0 $grass, //
                    .5rem .4rem 0 -.25rem $house2, //
                    .75rem .4rem 0 -.25rem $house2, //
                    1rem .4rem 0 -.25rem $house2, //
                    .75rem 0 0 $grass, //
                }

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

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

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

                &:before {
                    width: 7rem;
                    height: 7rem;
                    background: $grass;
                    transform: translate3d(3rem,-1.25rem, 0);
                    box-shadow: 3rem -.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: .1rem;
                box-shadow: -.15rem 0 0 $house;

                &:after {
                    width: 7rem;
                    height: .7rem;
                    background: $grass;
                    transform: translate3d(.5rem,-.6rem, 0) skewX(-65deg);
                }

                &:before {
                    width: .25rem;
                    height: 1rem;
                    background: $grass;
                    transform: translate3d(1.75rem, -1rem, 0);
                    border-radius: .1rem;
                    box-shadow: 0 -.25rem 0 -.1rem $grass, //
                    -.75rem .1rem 0 -.05rem $grass, //
                    -1.5rem .1rem 0 -.1rem $grass, //
                    .75rem .1rem 0 $grass, //
                    3rem -.1rem 0 $grass, //
                    3rem -.4rem 0 -.1rem $grass, //
                    3.5rem -.1rem 0 $grass, //
                    3.74rem -.1rem 0 $grass, //
                    3.5rem -.5rem 0 -.1rem $grass, //
                    3.74rem -.5rem 0 -.1rem $grass, //
                    4.15rem .1rem 0 -.1rem $grass, //
                    5rem 0 0 $grass, //
                    5.24rem 0 0 $grass, //
                    5.175rem -.25rem 0 -.1rem $grass, //
                    6.25rem -.5rem 0 $grass, //
                    6rem -.5rem 0 $grass, //
                    6.25rem -.75rem 0 -.1rem $grass, //
                    6rem -.75rem 0 -.1rem $grass, //
                    ;
                }
            }

            & > x:nth-of-type(5) {
                width: .4rem;
                height: 1rem;
                background: $house;
                transform: translate3d(9rem, 19.2rem, 0) skewY(-2deg);
                border-radius: .25rem .25rem 0 0;
                box-shadow: -.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 .4rem 0 $house, //
                -5.7rem .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: .75rem;
                    background: $house2;
                    transform: translate3d(.3rem, .25rem, 0) skewY(2deg);
                }

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

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

                &:before {
                    height: .85rem;
                    width: .75rem;
                    background: $house2;
                    transform: translate3d(-1rem, .25rem, 0);
                    border-radius: 50% 50% 0 0;
                    box-shadow: .5rem .25rem 0 $grass, //
                    2rem .35rem 0 $grass, //
                    2.5rem .1rem 0 $grass, //
                    3.3rem .35rem 0 $grass, //
                    5rem -1.5rem 0 $grass;
                }

                &:after {
                    width: 4.35rem;
                    border: .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: .25rem;
                height: 1rem;
                background: $house2;
                transform: translate3d(18.5rem, 13.75rem, 0) skewY(-3deg);
                border-radius: .1rem;
                box-shadow: .1rem 0 0 $house2, //
                .5rem 0 0 $house2, //
                2.5rem -.15rem 0 $house2, //
                3rem -.15rem 0 -.1rem $house2, //
                3.25rem -.15rem 0 -.05rem $house2, //
                3.75rem -.1rem 0 0 $house2, //
                3.75rem .25rem 0 .15rem $house2;

                &:before {
                    width: 4rem;
                    height: 2.25rem;
                    background: $house;
                    transform: translate3d(.25rem, .75rem, 0);
                    box-shadow: -.5rem 0 0 $grass, //
                    -1rem .5rem 0 $grass, //
                }

                &:after {
                    width: .25rem;
                    height: .35rem;
                    background: $house2;
                    transform: translate3d(.75rem, .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: .75rem;
                background: linear-gradient(to right, $house,$house2, $none, $beach2, $beach);
                transform: translate3d(13rem, 17rem, 0) skewY(-3deg);
                box-shadow: 0 .25rem .5rem $shadow, 0 .25rem 1rem $shadow;
                border-radius: 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,.2));
                    transform: translate3d(2rem,0rem, 0) rotate(-45deg);
                    border-radius: .5rem;
                    box-shadow: -2rem -.75rem .5rem rgba($shadow,.8);
                }
            }

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

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

                &:after {
                    width: 1.25rem;
                    height: 1rem;
                    background: $house2;
                    transform: translate3d(1.9rem,.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: .25rem;
                    height: .5rem;
                    background: $grass;
                    border-radius: .15rem;
                    transform: translate3d(0,-.3rem, 0);
                    box-shadow: 1rem 0 0 $grass;
                }

                &:after {
                    width: .75rem;
                    height: .5rem;
                    background: $house;
                    opacity: .2;
                    transform: translate3d(-.5rem,1rem, 0) rotate(65deg) skewX(45deg);
                    box-shadow: 1rem -.7rem 0 $house, //
                    1.7rem -.2rem 0 $house, //
                    .5rem .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: .5rem;
                    height: 4rem;
                    background: $grass;
                    border-radius: .15rem;
                    transform: translate3d(0,-.5rem, 0);
                    box-shadow: 1rem 0 0 $grass, //
                    -.5rem 0 0 $grass, //
                    -.2rem -.3rem 0 $grass, //
                    ;
                }

                &:after {
                    width: .15rem;
                    height: .75rem;
                    opacity: .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: .5rem;
                height: 1.5rem;
                background: $grass;
                border-radius: .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 -.2rem 0 $grass, //
                2.4rem -.2rem 0 $grass, //
                //
                -.5rem 0 0 $grass, //
                -.4rem -.3rem 0 $grass, //
                6.25rem .4rem 0 $grass, //
                6.25rem 0rem 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: .15rem;
                    height: .75rem;
                    opacity: .6;
                    background: $house;
                    transform: translate3d(-2rem,2.25rem, 0);
                    box-shadow: .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: -.25rem 3.5rem 0 $house2;

                &:before {
                    height: 1.1rem;
                    width: 3rem;
                    transform: translate3d(-.5rem,0,0) skewX(-50deg);
                    background: $house;
                    opacity: .8;
                    box-shadow: 0 .25rem .5rem $house;
                }

                &:after {
                    width: .15rem;
                    height: .75rem;
                    opacity: .6;
                    background: $house;
                    transform: translate3d(-1rem,1.75rem, 0);
                    box-shadow: .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: .35rem;
                height: .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 -.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% .25rem 0 0;
                    box-shadow: 0 0 .25rem $shadow;
                }

                &:after {
                    height: 1rem;
                    width: .5rem;
                    transform: translate3d(-.5rem,2.35rem,0) skewY(-5deg);
                    background: $house2;
                    border-radius: .25rem;
                    box-shadow: -.5rem 0 0 $house2, //
                    -1.6rem 0 0 $house2, //
                    1rem 0 0 rgba($house2,.5), //
                    1.5rem 0 0 rgba($house2,.2), //
                    -2rem 0 0 rgba($house2,.5), //
                    -2.5rem 0 0 $house2, //
                    -2.9rem 0 0 rgba($house2,.9), //
                    -3.5rem 0 0 rgba($house2,.5), //
                    -3.9rem 0 0 -.1rem rgba($house2,.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: .5;

                &:before {
                    height: 1rem;
                    width: .25rem;
                    background: $house;
                    transform: translate3d(-.75rem,0, 0) skewX(-50deg);
                    box-shadow: .35rem .25rem .1rem $shadow;
                }

                &:after {
                    height: 2rem;
                    width: .25rem;
                    background: $sea1;
                    transform: translate3d(0rem,-2rem, 0) skewX(-10deg);
                    box-shadow: .35rem .25rem .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 .25rem 0 .25rem rgba($shadow,.5), //
                inset .75rem 0 .75rem rgba($sun1,.1), //
                inset .5rem 0 .5rem rgba($sun1,.1), //
                inset 0 1.25rem .5rem rgba($sun1,.1);

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

                &:after {
                    width: .4rem;
                    height: .75rem;
                    border-radius: 50% 50% 0 0;
                    box-shadow: inset -.25rem .25rem .5rem $shadow;
                    transform: translate3d(1.3rem,.5rem, 0) skewX(3deg) skewY(2deg);
                    opacity: .75;
                }
            }

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

                &:before {
                    width: 1.75rem;
                    border: .15rem solid $none;
                    border-bottom: .5rem solid $house2;
                    transform: translate3d(.3rem, -.3rem, 0);
                }

                &:after {
                    width: 1.5rem;
                    height: 1.7rem;
                    border-top: .15rem solid $house2;
                    border-right: .25rem solid $house2;
                    transform: translate3d(.4rem, -1.5rem, 0);
                    border-radius: .5rem 1rem .5rem .5rem / .5rem .5rem .5rem .5rem;
                    box-shadow: inset 0.15rem -0.3rem 0 -0.15rem $house2;
                    background: linear-gradient(to top right, rgba($house,.2), $none, $none);
                }
            }

            & > x:nth-of-type(3) {
                width: .65rem;
                height: .5rem;
                border-radius: .25rem .3rem 0 0;
                background: $house2;
                transform: translate3d(44.5rem, 5.5rem, 0) skewY(-3deg);

                &:before {
                    width: .35rem;
                    height: .5rem;
                    border-radius: 100% 0 0 0;
                    background: $house2;
                    transform: translate3d(.4rem, .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: .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: .2rem;
                    height: 1.25rem;
                    background: $house2;
                    transform: translate3d(3.5rem,-.75rem,0);
                    border-radius: .1rem;
                    box-shadow: .5rem .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,.2), 0 2rem 0 $house2;

                &:before {
                    width: .4rem;
                    height: 1rem;
                    background: $shadow;
                    border-radius: .1rem;
                    transform: translate3d(4rem,-.65rem, 0);
                    box-shadow: .3rem 0 0 $shadow, //
                    .1rem -.3rem 0 -.05rem $shadow, //
                    .2rem -.3rem 0 -.05rem $shadow, //
                    -2rem .1rem 0 -.05rem $shadow, //
                    2rem .1rem 0 $shadow, //
                    2.3rem .1rem 0 $shadow, //
                    2.1rem -.3rem 0 -.05rem $shadow, //
                    2.2rem -.3rem 0 -.05rem $shadow, //
                }

                &:after {
                    width: .5rem;
                    height: 1.25rem;
                    background: $house;
                    border-radius: .2rem;
                    transform: translate3d(1rem,1.25rem, 0);
                    opacity: .5;
                    box-shadow: .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: .4rem;
                    height: 1.25rem;
                    background: $house2;
                    transform: translate3d(-.5rem,.75rem,0);
                    border-radius: .1rem;
                    box-shadow: .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: .1rem;
                    box-shadow: 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 -.5rem 0 $house2, //
                1rem -.5rem 0 $house2, //
                -.1rem -.1rem .1rem $lightsea, //
                -2rem -.25rem 0 $shadow, //
                -2.1rem -.26rem .1rem $lightsea, //
                -3rem -.5rem 0 $house2, //
                -4rem -.25rem 0 $shadow, //
                -4.1rem -.26rem .1rem $lightsea, //
                -5rem -.25rem 0 $house, //
                -6rem -.5rem 0 $shadow, //
                -6rem -.5rem .5rem $shadow, //
                -7rem -.25rem 0 $house, //
                -7.5rem -.5rem 0 $shadow, //
                -7.5rem -.5rem .5rem $shadow;

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

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

            & > x:nth-of-type(8) {
                transform: translate3d(49.5rem,4rem, 0) skewY(-3deg);
                width: .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(-.5rem,-1.5rem, 0);
                    width: .1rem;
                    height: 2rem;
                    border: 1.5rem solid $none;
                    border-bottom-color: $grass;
                    box-sizing: content-box;
                    box-shadow: 0 5rem 0 $house2;
                }

                &:before {
                    width: .5rem;
                    height: 2rem;
                    background: $house2;
                    border-radius: .1rem;
                    transform: translate3d(-.5rem,1.25rem, 0);
                    box-shadow: .4rem 0 0 $house2, //
                    .7rem .75rem 0 $house2, //
                    1rem .75rem 0 $house2, //
                    .2rem -.25rem 0 $house2, //
                    //
                    1.5rem 0 0 $house2, //
                    1.5rem -.5rem 0 -.15rem $house2, //
                }
            }

            & > x:nth-of-type(9) {
                transform: translate3d(49.75rem,9.75rem, 0) skewX(-20deg);
                width: 1rem;
                height: .75rem;
                background: $grass;
                box-shadow: .75rem -.2rem 0 $grass, //
                1.5rem -.4rem 0 $grass; //
                &:before {
                    width: .35rem;
                    height: 1.5rem;
                    background: $house3;
                    border-radius: 50% 50% 0 0;
                    transform: translate3d(.25rem,.25rem, 0) skewX(20deg);
                    box-shadow: .75rem -.1rem 0 $house3, //
                    1.5rem -.2rem 0 $house3, //
                    0 2rem 0 $house3, //
                    .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(.9rem, -1.26rem, 0) skewY(-4deg) skewX(-60deg);
                    background: linear-gradient( to top right, $house, $house2,$house, $house2, $house2,$house2);
                    border-radius: .1rem;
                    box-shadow: .5rem .5rem .5rem -.5rem $shadow, .5rem .5rem .5rem -.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: .1rem;
                    box-shadow: 0 .5rem .5rem -.5rem $shadow,.5rem .5rem .5rem -.5rem $shadow;
                }
            }

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

                &:after {
                    width: .2rem;
                    height: 1rem;
                    background: $grass;
                    border-radius: .1rem;
                    transform: translate3d(.15rem,-.65rem, 0);
                    box-shadow: .2rem 0 0 $grass, //
                    .45rem 0 0 $grass, //
                    .65rem 0 0 $grass, //
                    .85rem 0 0 $grass, //
                    //
                    3rem -.5rem 0 $grass, //
                    3.2rem -.5rem 0 $grass, //
                    3.45rem -.5rem 0 $grass, //
                    3.65rem -.5rem 0 $grass, //
                    3.85rem -.5rem 0 $grass, //
                    4rem -.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: .3rem;
                height: .8rem;
                background: $house;
                border-radius: .1rem;
                opacity: .8;
                box-shadow: 1rem -.1rem 0 $house, //
                2rem -.2rem 0 $house, //
                2.5rem -.25rem 0 $house, //
                //
                3.5rem -.3rem 0 $house, //
                4rem -.35rem 0 $house, //
                //
                5.5rem -.3rem 0 $house, //
                6.5rem -.35rem 0 $house, //
                5.6rem -.5rem 0 $house, //
                6.6rem -.55rem 0 $house, //
                ;

                &:before {
                    transform: translate3d(-.2rem,1.2rem, 0);
                    width: .3rem;
                    height: 1rem;
                    background: $grass;
                    border-radius: .1rem;
                    opacity: .8;
                    box-shadow: -.1rem .1rem 0 $house, //
                    //
                    .6rem -.05rem 0 $grass, //
                    .5rem .05rem 0 $house, //
                    //
                    1.2rem -.1rem 0 $grass, //
                    1.1rem 0rem 0 $house, //
                    //
                    2.2rem -.2rem 0 $grass, //
                    2.1rem 0rem 0 $house, //
                    //
                    2.7rem -.25rem 0 $grass, //
                    2.6rem -.05rem 0 $house, //
                    //
                    3.7rem -.2rem 0 $grass, //
                    //
                    4.4rem -.25rem 0 $grass, //
                    4.5rem -.15rem 0 $grass, //
                    //
                    5.8rem -.2rem 0 $house, //
                    5.9rem -.25rem 0 $house, //
                    //
                    6.5rem -.3rem 0 $house, //
                    6.6rem -.35rem 0 $house, //
                    ;
                }

                &:after {
                    transform: translate3d(-.2rem,3rem, 0);
                    width: .3rem;
                    height: 1rem;
                    background: $grass;
                    border-radius: .1rem;
                    opacity: .8;
                    box-shadow: -.1rem .1rem 0 $house, //
                    //
                    .6rem -.05rem 0 $grass, //
                    .5rem .05rem 0 $house, //
                    //
                    1.2rem -.1rem 0 $grass, //
                    1.1rem 0rem 0 $house, //
                    //
                    2.2rem -.2rem 0 $grass, //
                    2.1rem 0rem 0 $house, //
                    //
                    2.7rem -.25rem 0 $grass, //
                    2.6rem -.05rem 0 $house, //
                    //
                    3.7rem -.2rem 0 $grass, //
                    //
                    4.4rem -.25rem 0 $grass, //
                    4.5rem -.15rem 0 $grass, //
                    //
                    5.8rem -.2rem 0 $house, //
                    5.9rem -.25rem 0 $house, //
                    //
                    6.5rem -.3rem 0 $house, //
                    6.6rem -.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(.9rem, -1.7rem, 0) skewY(-1deg) skewX(-60deg);
                border-radius: .1rem;
                background: $shadow;
                box-shadow: 0 .5rem .5rem -.5rem $shadow,.5rem .5rem .5rem -.5rem $shadow;
            }
        }

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

            &:after {
                width: .2rem;
                height: 1rem;
                background: $shadow;
                border-radius: .1rem;
                transform: translate3d(.15rem,-.65rem, 0);
                box-shadow: .3rem .2rem 0 $shadow, //
                .6rem 0 0 $shadow, //
                .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: .2rem;
            border-top: .35rem solid $house2;
            opacity: .6;
            box-shadow: 3rem 0 0 $house, //
            3rem 1rem 0 $house, //
            3rem -1rem 0 rgba($house,.5), //
            10rem .5rem 0 rgba($house,.75), //
            10rem 2rem 0 rgba($house,.75), //
            ;

            &:before {
                transform: translate3d(.8rem, -2rem, 0);
                width: .5rem;
                height: 1.5rem;
                background: $house;
                border: .15rem solid $shadow;
                border-bottom-color: $house;
                border-right-color: $house;
                border-radius: .2rem;
                box-shadow: .9rem -.1rem 0 -.1rem $grass, 1rem 0 0 $house, //
                2.8rem 0 0 rgba($house,.5), //
                4.6rem -.1rem 0 -.1rem rgba($grass,.8), 4.8rem 0 0 -.05rem $house, //
                5.6rem -.1rem 0 -.1rem rgba($grass,.8), 5.8rem 0 0 -.05rem $house, //
                //
                0rem 1.9rem 0 -.05rem $shadow, //
                0rem 4rem 0 $shadow, //
                //
                .9rem 1.9rem 0 -.1rem $grass, 1rem 2rem 0 $house, //
                .9rem 3.9rem 0 -.1rem $grass, 1rem 4rem 0 $house, //
                //
                2.4rem 2rem 0 -.1rem $grass, //
                2.4rem 4rem 0 -.1rem $grass, //
                //
                3rem 2.1rem 0 -.05rem $grass, //
                3rem 4.1rem 0 -.05rem $grass, //
                ;
            }

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

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

            &:before {
                transform: translate3d(-.1rem,1.2rem, 0);
                width: .5rem;
                height: .3rem;
                background: $house3;
                border-radius: .1rem;
                box-shadow: .5rem 0 0 $house3, //
                1.5rem 0 0 $house3, //
                //
                2.3rem .2rem 0 $house3, //
                3rem .2rem 0 $house3, //
                3.6rem .2rem 0 $house3, //
                4.2rem .2rem 0 $house3, //
                //
                5rem .2rem 0 $house3, //
                5.8rem .4rem 0 $house3, //
            }

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

        & > x:nth-of-type(5) {
            transform: translate3d(127.65rem, 53.2rem, 0) skewY(-4deg);
            width: .4rem;
            height: .6rem;
            background: $house3;
            border-radius: .1rem;
            opacity: .9;
            box-shadow: 0 .3rem 0 $house, //
            0 .5rem 0 $house3, //
            //
            .8rem 0rem 0 $house3, //
            .8rem .3rem 0 $house, //
            .8rem .5rem 0 $house3, //
            //
            1.6rem 0rem 0 $house3, //
            1.6rem .3rem 0 $house, //
            1.6rem .5rem 0 $house3, //
            ;

            &:before {
                transform: translate3d(.7rem, 2.2rem, 0);
                width: .5rem;
                height: .7rem;
                background: $house3;
                border-radius: .1rem;
                opacity: .9;
                box-shadow: 0 .6rem 0 $house2, //
                0 .9rem 0 $house3, //
                //
                -.8rem 0rem 0 -.1rem $house, //
                -.8rem .6rem 0 -.1rem $house2, //
                -.8rem .9rem 0 -.1rem $house, //
                //
                .8rem 0rem 0 $house, //
                .8rem .6rem 0 $house2, //
                .8rem .9rem 0 $house3, //
                //
                0 2.5rem 0 $house2, //
                //
                -.8rem 2.5rem 0 -.1rem $house, //
                //
                .8rem 2.5rem 0 $house, //
                //
                -1.5rem 0rem 0 -.1rem $house3, //
                -1.5rem .6rem 0 -.1rem $shadow, //
                -1.5rem .7rem 0 -.1rem $house2, //
                //
                -1.6rem 2.4rem 0 -.1rem $shadow, //
                -1.6rem 3.1rem 0 -.1rem $grass, //
                -1.6rem 3.3rem 0 -.1rem $house2, //
                ;
            }

            &:after {
                width: 8rem;
                height: 8rem;
                transform: translate3d(2.5rem, -.4rem, 0) skewY(8deg) skewX(2deg);
                background: $side;
                border-radius: .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: .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 -.5rem 0 $grass3, //
                4rem .3rem 0 $grass3, //
                0 2rem 0 2rem $shadow;
            }

            &:after {
                height: .35rem;
                width: 1.5rem;
                border-radius: .35rem 100% 0 0;
                background: $house;
                opacity: .9;
                transform: translate3d(-4.2rem, 17.2rem, 0) skewY(-4deg);
                box-shadow: .5rem .5rem 0 $house, //
                -.5rem .2rem 0 $house2, //
                -.3rem .1rem 0 $house2, //
                0 .5rem 0 rgba($sky1,.1); //
            }
        }
        //house roof
        & > x:nth-of-type(7) {
            transform: translate3d(131.75rem, 43rem, 0) skewY(-5deg) skewX(2deg);
            width: 4.5rem;
            height: 8rem;
            border: .75rem solid $none;
            border-bottom: 1rem solid $house4;
            border-radius: .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: -.25rem 0 0 $shadow, //
                -.5rem 0 0 $house, //
                -.65rem 0 0 $shadow, //
                inset 0 1.25rem 0 $house, //
                inset .2rem 0 0 $shadow;
            }

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

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

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

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

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

            &:after {
                transform: translate3d(-1rem, 2.25rem, 0);
                width: .75rem;
                height: 1.5rem;
                background: $house2;
                border-radius: .1rem;
                box-shadow: 0 .25rem 0 $house, //
                3.15rem -.15rem 0 $house2, //
                3.15rem .15rem 0 $house, //
                //
                1.25rem 0rem 0 -.1rem $shadow, //
                1.25rem .25rem 0 $house2, //
                4.35rem -.15rem 0 -.1rem $shadow, //
                4.35rem .15rem 0 $house2, //
                //
                1.25rem 2.5rem 0 -.1rem $shadow, //
                1.25rem 2.75rem 0 $house2, //
                4.35rem 2.35rem 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: .25rem;
                border-radius: .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 .15rem 0 $house;
                opacity: .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: .2rem;
            height: 1rem;
            background: $shadow;
            box-shadow: .2rem 0 0 $shadow, //
            .4rem 0 0 $shadow, //
            .65rem 0 0 $shadow, //
            .9rem 0 0 $shadow, //
            1.1rem 0 0 $shadow, //
            1.4rem 0 0 $shadow, //
            1.6rem 0 0 $shadow, //
            //
            3.8rem 0 0 .025rem $shadow, //
            4.1rem .1rem 0 .025rem $shadow, //
            4.4rem .1rem 0 .025rem $shadow, //
            //
            -5rem .8rem 0 .025rem $shadow, //
            -5.3rem .8rem 0 .025rem $shadow, //
            -5.6rem .7rem 0 .025rem $shadow, //
            -5.9rem .8rem 0 .025rem $shadow, //
            ;
            border-radius: .1rem;

            &:before {
                transform: translate3d(-4.5rem, .5rem, 0) skewY(-6deg);
                width: 1.75rem;
                height: 3rem;
                border: .25rem solid $none;
                border-top: .25rem solid $shadow;
                border-radius: .3rem;
                box-shadow: inset 0 0 0 1rem $shadow, //
                0 -.75rem 0 -.25rem $shadow, //
                0 -1.35rem 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: .2rem;
            }
        }

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

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

            &:after {
                transform: translate3d(3.25rem, -.25rem, 0) skewY(-2deg);
                width: 2rem;
                height: 2rem;
                box-shadow: inset 0 1rem 1rem rgba($shadow,.25), //
                inset 0 0 0 2rem $house3, //
                ;
                border: .3rem solid $none;
                border-top: .3rem solid $house2;
                border-radius: .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: .3rem;
            box-shadow: .5rem .3rem 0 $house2;

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

            &:after {
                background: linear-gradient(rgba($sun1,.1),$shadow);
                width: 3rem;
                height: 2.85rem;
                border-radius: .1rem;
                transform: translate3d(3.9rem, .1rem, 0) skewY(2deg) skewX(51deg);
                box-shadow: -.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: .2rem;
            box-shadow: -.2rem 0 0 $house, //
            -.3rem 0 0 $shadow;

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

            &:after {
                width: 4rem;
                height: 2.7rem;
                transform: translate3d(2.5rem, 0rem, 0) skewY(-4deg) skewX(-20deg);
                background: $shadow;
                border-radius: .2rem;
                box-shadow: .5rem .3rem 0 $house2, 2rem .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: .2rem;
            box-shadow: inset .15rem .15rem 0 $house, //
            inset -.15rem -.15rem 0 $house, //
            inset 0 0 .8rem $shadow;

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

            &:after {
                width: 1.75rem;
                height: .65rem;
                transform: translate3d(.5rem, -.65rem, 0) skewX(-60deg);
                background: $shadow;
                border-radius: .1rem;
                box-shadow: inset 0 .2rem .3rem rgba($sun1,.05);
            }
        }

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

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

            &:after {
                width: 1.75rem;
                height: .65rem;
                transform: translate3d(.5rem, -.65rem, 0) skewX(-60deg);
                background: $house2;
                border-radius: 100% .1rem .1rem .1rem;
                box-shadow: inset 0 .2rem .3rem rgba($sun1,.05);
            }
        }

        & > x:nth-of-type(17) {
            transform: translate3d(142.5rem, 54rem, 0) skewY(-4deg);
            width: 1.75rem;
            height: 3rem;
            background: $house;
            border-radius: .2rem .5rem .2rem .2rem;
            box-shadow: inset 0 .2rem .2rem rgba($shadow,.8), //
            inset .15rem .15rem 0 $house, //
            inset -.15rem -.15rem 0 $house, //
            inset .1rem .1rem .8rem $shadow, //
            ;

            &:before {
                transform: translate3d(.15rem, .75rem, 0) skewY(-1deg);
                width: 1.45rem;
                height: 1.5rem;
                box-shadow: inset .15rem .15rem 0 $house, //
                inset -.15rem -.15rem 0 $house, //
                inset .15rem .1rem .5rem $shadow, //
                0 .2rem .2rem rgba($shadow,.8), //
            }

            &:after {
                transform: translate3d(3.5rem, .5rem, 0) skewY(-1deg);
                border-radius: .1rem;
                width: 1.45rem;
                height: 1.75rem;
                background: $house2;
                box-shadow: inset 0 .25rem .5rem $shadow, //
                inset .25rem 0 0 rgba($shadow,.2), //
                inset .5rem 0 0 $house, //
                inset 1rem 0 0 rgba($shadow,.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: .25rem solid $none;
            border-bottom-color: $house;
            border-top-color: rgba($house,.3);
            border-right-color: rgba($house,.5);
            border-radius: .15rem;
            box-shadow: inset .25rem 0 0 $house;
            opacity: .8;

            &:before {
                transform: translate3d(-.25rem, .9rem, 0);
                width: 3rem;
                height: .25rem;
                background: linear-gradient(to right,$none,$none,$house3);
                opacity: .8;
                box-shadow: -.5rem 1rem 0 rgba($house,.5);
            }

            &:after {
                transform: translate3d(.5rem, -.15rem, 0);
                width: .2rem;
                height: 3rem;
                background: $house;
                opacity: .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: .1rem;
            background: $house;
            box-shadow: inset -.1rem -.1rem 0 $house, //
            inset .1rem .1rem .5rem $shadow, //
            -.2rem 0 0 rgba($shadow,.5), //
            -.2rem .75rem 0 rgba($shadow,.5), //
            0 .75rem 0 $house2, //
            0 -.25rem 0 $shadow, //
            0 1rem 0 $house, //
            ;
            opacity: .8;

            &:before {
                transform: translate3d(8rem, .15rem, 0);
                width: 1rem;
                height: 1rem;
                border-radius: .1rem;
                background: $house;
                box-shadow: inset -.1rem -.1rem 0 $house, //
                inset .1rem .1rem .5rem $shadow, //
                -.2rem 0 0 rgba($shadow,.5), //
                -.2rem .75rem 0 rgba($shadow,.5), //
                0 .75rem 0 $house2, //
                0 -.25rem 0 $shadow, //
                0 1rem 0 $house, //
                ;
                opacity: .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: -.25rem 0 0 $shadow, //
            -.5rem 0 0 $house2, //
            .25rem 0 0 $house, //
            inset 0 0 .5rem $shadow;
            opacity: .8;

            &:before {
                transform: translate3d(-.75rem, -.5rem, 0);
                width: 1.5rem;
                height: 1rem;
                border-radius: 100% 100% 0 0;
                box-shadow: inset 0 .25rem 0 $house, //
                .5rem 0 0 rgba($sun1,.1), //
                .5rem 0 0 rgba($shadow,.8);
            }

            &:after {
                transform: translate3d(1.5rem, -1rem, 0);
                width: 1.15rem;
                height: 2.5rem;
                background: $house;
                border-radius: .2rem;
                opacity: .8;
                box-shadow: inset .2rem .2rem 0 rgba($house3,.8), //
                inset -.25rem -.25rem 0 rgba($house3,.8), //
                inset .5rem .5rem 0 $house2, //
                inset .15rem .15rem .5rem $shadow, //
                .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: .8;
            border-radius: .2rem;

            &:after {
                transform: translate3d(.5rem, -.5rem, 0);
                width: 1.15rem;
                height: 2.5rem;
                background: $house;
                border-radius: .2rem;
                opacity: .8;
                box-shadow: inset .2rem .2rem 0 rgba($house3,.8), //
                inset -.25rem -.25rem 0 rgba($house3,.8), //
                inset .5rem .5rem 0 $house2, //
                inset .15rem .15rem .5rem $shadow, //
                .25rem 0 0 $house2, //
                ;
            }

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

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

            &:before {
                transform: translate3d(-6.5rem, -.25rem, 0);
                width: 7rem;
                height: .25rem;
                background: $house2;
                box-shadow: 0 .15rem 0 $shadow, //
                0 1rem 0 $shadow;
                opacity: .3;
            }

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

        & > x:nth-of-type(23) {
            transform: translate3d(154rem, 47.5rem, 0);
            width: .15rem;
            height: 2rem;
            background: $grass;
            border-radius: .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,.03) 50%) $shadow;
                border-radius: .3rem;
            }

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

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

            &:before {
                width: .5rem;
                height: 1.5rem;
                background: $house2;
                transform: translate3d(.05rem, 1.25rem, 0) skewX(2deg);
                border-radius: .2rem;
                box-shadow: inset -.15rem -.15rem 0 $house, //
                -.4rem 0 0 -.1rem $house2, //
                -.4rem 0 0 $house, //
                //
                2.5rem 0 0 -.1rem $house2, //
                2.5rem 0 0 $house, //
                //
                2.95rem 0 0 -.1rem $house2, //
                2.95rem 0 0 $house, //
                ;
            }

            &:after {
                transform: translate3d(2.3rem, -.65rem, 0) skewX(2deg);
                border: .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: .3rem solid $none;
            border-top: .5rem solid $house;
            height: 10rem;
            box-shadow: inset 0 0 0 2rem $house,0 -1rem 0 -.5rem $house2;
            border-radius: .4rem;

            &:before {
                transform: translate3d(-.75rem, -7rem, 0) skewX(1deg) skewY(8deg);
                border: .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: .5rem;
                height: 1.5rem;
                background: $house2;
                transform: translate3d(-4rem, 3.5rem, 0) skewX(2deg) skewY(4deg);
                border-radius: .2rem;
                box-shadow: inset -.15rem -.15rem 0 $house, //
                -.4rem 0 0 -.1rem $house2, //
                -.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: .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: .75rem;
                background: linear-gradient(to right,$shadow, $house4);
                box-shadow: 1rem .25rem 0 $house4, 2rem .75rem .75rem $shadow;
            }
        }

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

            &:before {
                transform: translate3d(1.25rem, 0rem, 0) skewY(11deg);
                width: .6rem;
                height: 1rem;
                border-radius: .1rem;
                background: $house2;
                box-shadow: 0 -.15rem 0 $house, //
                0 -.25rem 0 $house4, //
                0 .75rem 0 $house4, //
                0 .9rem 0 $house, //
                0 1.25rem 0 rgba($house4,.7), //
                inset -.15rem .15rem 0 $house4, //
                //
                0 -3.5rem 0 -.2rem rgba($shadow,.2), //
                0 -3rem 0 -.2rem rgba($shadow,.2), //
                0 -3.5rem 0 $house4, //
                0 -3rem 0 rgba($shadow,.5), //
                0 -3.65rem 0 $house, //
                0 -3.8rem 0 $house4, //
                0 -3.35rem 0 $house, //
                0 -3.2rem 0 rgba($house4,.7), //
            }

            &:after {
                transform: translate3d(2.75rem, .25rem, 0) skewY(11deg);
                width: .65rem;
                height: 1rem;
                border-radius: .1rem;
                background: $house2;
                box-shadow: 0 -.15rem 0 $house, //
                0 -.25rem 0 $house4, //
                0 1rem 0 $house4, //
                0 .15rem 0 $house, //
                0 .35rem 0 rgba($house4,.7), //
                inset -.15rem .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,.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 .25rem 0 $shadow, //
            7rem 0rem .5rem $shadow, //
            9rem .25rem .5rem $shadow, //
            12rem .5rem .5rem $shadow, //
            14rem .75rem .5rem $shadow, //
            16rem .25rem .5rem $shadow, //
            18rem .5rem .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 -.5rem .5rem $shadow, //
                2rem -.25rem .5rem $shadow, //
                4rem -1rem .75rem $shadow, //
                6rem -1.5rem .75rem $shadow, //
                9rem -.75rem .25rem $shadow, //
                11rem -.75rem .5rem $shadow, //
                13rem -.75rem .5rem $shadow, //
                15rem -.5rem .5rem $shadow, //
                21rem -.75rem .5rem $shadow, //
                22rem -.75rem .5rem $shadow, //
                25rem -.75rem .5rem $shadow, //
                29rem -1.5rem .5rem $shadow, //
                28rem -.75rem .5rem $shadow, //
                ;
            }
        }

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

            &:before {
                transform: translate3d(-13rem, 1.75rem, 0) skewY(-28deg);
                width: 7rem;
                height: .15rem;
                background: $house;
                opacity: .8;
                box-shadow: 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 -.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: .5rem dashed $shadow;
            box-shadow: 0 -.15rem 0 rgba($house,.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: .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(.05rem);
        }

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

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

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

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

            &:before {
                width: 1rem;
                height: 2rem;
                transform: translate3d(2rem, .3rem, 0) skewY(-1deg);
                background: $grass2;
                border-radius: 50%;
                box-shadow: .75rem -1rem 0 $grass2, //
                1.5rem -1.25rem 0 $grass3, //
                2rem -1.7rem 0 -.2rem rgba($grass2,.8), //
                1rem -.5rem 0 $grass2, //
                2rem -.8rem 0 -.2rem $grass2, //
                2.5rem -1.75rem 0 $grass2;
            }

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

        & > x:nth-of-type(3) {
            width: 1rem;
            height: 2rem;
            transform: translate3d(21.5rem, 17rem, 0) skewY(-1deg);
            box-shadow: .75rem -.5rem 0 $grass2, //
            1.5rem -1.1rem 0 $grass3, //
            2rem -1.6rem 0 0 $grass2, //
            .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 -.5rem 0 $grass2, //
                1.6rem -1rem 0 $grass3, //
                2.1rem -1.5rem 0 0 $grass3, //
                .6rem -1.6rem 0 -.1rem $grass2, //
                1.1rem -2rem 0 0 $grass2, //
                1.5rem -2.4rem 0 -.2rem $grass2, //
            }

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

        & > x:nth-of-type(4) {
            width: 1rem;
            height: 2rem;
            transform: translate3d(27rem, 17.5rem, 0) skewY(-1deg);
            box-shadow: .75rem -.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 -.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, .1rem, 0) skewY(-1deg);
                background: $grass2;
                border-radius: 50%;
                box-shadow: .75rem -.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 -.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, .3rem, 0) skewY(-1deg);
                background: $grass2;
                border-radius: 50%;
                box-shadow: .75rem -.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 -.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: .75rem -.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 -.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, .1rem, 0) skewY(-1deg);
                background: $grass2;
                border-radius: 50%;
                box-shadow: .75rem -.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 -.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, .3rem, 0) skewY(-1deg);
                background: $grass2;
                border-radius: 50%;
                box-shadow: .75rem -.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 -.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: .75rem -.3rem 0 $grass2, //
            1.35rem -.7rem 0 $grass3, //
            2rem -1.5rem 0 $grass3, //
            1.75rem -.3rem 0 $grass3, //
            2.35rem -.7rem 0 $grass3, //
            3rem -1.5rem 0 $grass3;

            &:before {
                opacity: .5;
                width: 1rem;
                height: .5rem;
                transform: translate3d(-26rem, 2rem, 0) skewX(-30deg);
                background: $shadow;
                border-radius: 50%;
                box-shadow: .75rem -.2rem 0 $shadow, //
                1.75rem -.7rem 0 $shadow, //
                2.5rem -.2rem 0 $shadow, //
                2.75rem -1rem 0 $shadow, //
                3.75rem -.1rem 0 $shadow, //
                4.75rem -.7rem 0 $shadow, //
                5.5rem -.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: .75rem -.3rem 0 $grass2, //
                1.35rem -.7rem 0 $grass3, //
                2rem -1.5rem 0 $grass2, //
                1.75rem -.3rem 0 $grass2, //
                2.35rem -.7rem 0 $grass3, //
                3rem -1.5rem 0 $grass3;
            }
        }

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

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

            &:after {
                width: 20rem;
                height: .15rem;
                background: linear-gradient(to right, $beach, rgba($beach,.5), $beach);
                transform: translate3d(9rem, 0, 0) skewY(-1.5deg);
                box-shadow: 0 .5rem 0 $beach;
                opacity: .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: .3;

        &:before {
            width: 13rem;
            height: 13rem;
            transform: translate3d(19rem, 19rem,0);
            border-radius: 50%;
            background: $light;
            box-shadow: -2rem -10rem 0 8rem rgba($sky2,.2), //
            -20rem -30rem 0 12rem rgba($light,.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, -.5rem, 0);
        width: 7.5rem;
        height: 6rem;
        background: $sky2;
        border-radius: 50%;
        opacity: .75;
        box-shadow: //
        0 0 1rem $sky2, //
        // circle2
        .5rem 3rem 1rem -1rem $sky2, //
        // circle3
        .5rem 6rem 1rem .5rem $sky2, //
        //4
        0 8rem 1rem -.5rem $sky2, //
        //35
        1rem 10rem 1rem -1rem $sky2, //
        //5
        -.5rem 12rem 1rem -.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
        .5rem 3rem 0 -1rem $light, //
        .5rem 3rem 1rem -1rem $light, //
        // circle2
        .5rem 6rem 0 .5rem $light, //
        .5rem 6rem 1rem .5rem $light, //
        //3
        0 8rem 0 -.5rem $light, //
        0 8rem 1rem -.5rem $light, //
        //35
        1rem 10rem 0 -1.5rem $light, //
        1rem 10rem 1rem -1.5rem $light, //
        //4
        -.5rem 12rem 0 -1.25rem $light, //
        -.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(.6);
        }

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

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

        & > x:nth-of-type(4) {
            transform: translate3d(-2rem, 24rem, 0) scaleY(.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: .3rem;
        }

            &, *:before, *:after, * {
                box-shadow: 1.5rem 0 .15rem currentColor, //
                //
                6.2rem 2rem .25rem currentColor, //
                2.4rem 2.2rem 0 currentColor, //
                4rem 2.9rem .15rem currentColor, //
                //
                -.5rem 4.2rem .25rem currentColor, //
                1.5rem 5rem .15rem currentColor, //
                2.75rem 4.5rem 0 currentColor, //
                //
                5.7rem 7.3rem .25rem currentColor, //
                .75rem 6.1rem 0 currentColor, //
                3.5rem 6.6rem .15rem currentColor, //
                //
                8rem 8.4rem .15rem currentColor, //
                2.5rem 8.3rem .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: .5rem;
        }
    }

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

        &, *, *:before, *:after {
            color: $sun3;
            width: 2rem;
            height: .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 -.25rem currentColor, //
            0 1rem 1rem -.25rem currentColor, //
            -1rem 2rem 0 currentColor, //
            -1rem 2rem 1rem currentColor, //
            1rem 3rem 0 .15rem currentColor, //
            1rem 3rem 1rem .15rem currentColor, //
            -1rem 5rem 0 .15rem currentColor, //
            -1rem 5rem 1rem .15rem currentColor, //
            -1.5rem 11rem 0 .2rem currentColor, //
            -1.5rem 11rem 1rem .2rem currentColor, //
            1rem 13rem 0 -.1rem currentColor, //
            1rem 13rem 1rem -.1rem currentColor, //
            -2rem 14rem 0 -.1rem currentColor, //
            -2rem 14rem 1rem -.1rem currentColor, //
            -2.5rem 15rem 0 0rem currentColor, //
            -2.5rem 15rem 1rem 0rem currentColor, //
            -1rem 17rem 0 .2rem currentColor, //
            -1rem 17rem 1rem .2rem currentColor, //
            -3rem 20rem 0 .15rem currentColor, //
            -3rem 20rem 1rem .15rem currentColor, //
            -1rem 22rem 0 .1rem currentColor, //
            -1rem 22rem 1rem .1rem currentColor, //
            //
            -2rem -8rem 0 .5rem currentColor, //
            3rem -7.5rem 0 .5rem currentColor, //
            -2rem -8rem 1rem .5rem currentColor, //
            3rem -7.5rem 1rem .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,.8);
            width: 7rem;
            height: 1rem;
        }

            &:before {
                transform: translate3d(-1rem,0, 0);
                color: $sky2;
                width: 9rem;
                height: 1.5rem;
                opacity: .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: .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 .5rem -.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 .5rem -.5rem $light, //
                0 1rem 1rem -.5rem $light, //
            }
        }

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

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

            &:after {
                width: 70rem;
                height: 3rem;
                background: radial-gradient(rgba($light,.8) 40%, rgba($sky2,.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,.2), //
                //
                -6rem 2.5rem 1rem -.5rem rgba($light,.3), //
                -6rem 2.5rem 1rem -.5rem $sky2, //
                //
                //
                -5rem -4rem 1rem -1.1rem rgba($light,.5), //
                -5rem -4rem 1rem rgba($sun2,.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,.5), //
                85rem 4rem 1rem rgba($sun2,.2), //
                30rem -1rem 2rem $light, //
                32rem -2rem 2rem $sun2, //
                40rem -4rem 2rem $light, //
                ;
            }

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

    & > x:nth-of-type(2) {
        // background
        & > x:nth-of-type(1) {
            opacity: .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, -.25rem,0);
                box-shadow: -.5rem -1.5rem 0 -1.25rem $sea2;
            }

            &:after {
                width: .5rem;
                height: .75rem;
                border-radius: 50% 50% 0 0;
                background: $sea2;
                transform: translate3d(11.5rem, -.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(.2rem);
                color: $cloud;
                transform: translate3d(115em, 47em,0) rotate(-5deg) skewX(-100deg);
                width: 10em;
                height: 1em;
                background: rgba($cloud,.3);
                border-radius: 50%;
                box-shadow: //
                5em -1em .25em 2em currentColor, //
                14em -.5em .25em 1em currentColor, //
                20em -.25em .25em .5em currentColor, //
                23em 0 .25em currentColor, //
                //
                -1em 1em .25em .5em currentColor, //
                5em .5em .25em 1em currentColor, //
                15em 0em .25em currentColor, //
                17em 0em .25em -.5em currentColor, //
                ;
            }

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

                &:after {
                    transform: translate3d(-40rem, -3rem,0);
                    font-size: .75rem;
                    width: 20em;
                    opacity: .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);
            }
        }
    }
}
              
            
!

JS

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

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

// www.benevansdesign.co.uk
// www.instagram.com/benevansdesign
// 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