Skip to content

Instantly share code, notes, and snippets.

@drenovac

drenovac/index.html

Created April 5, 2020 08:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save drenovac/a6a6782e91e40856dabe1e8b669f2793 to your computer and use it in GitHub Desktop.
Save drenovac/a6a6782e91e40856dabe1e8b669f2793 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS Landscape - An Evening in Southwold
Raw
index.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>
Raw
pure-css-landscape-an-evening-in-southwold.markdown

Pure CSS Landscape - An Evening in Southwold

A Pure CSS Landscape No images, just CSS

Edit the CSS at the top and choose your own sunset colour

http://benevansdesign.co.uk https://www.instagram.com/benevansdesign https://twitter.com/ivorjetski

This is the final part to my pointless trilogy:

Still Life = https://codepen.io/ivorjetski/pen/xMJoYO

Portrait = https://codepen.io/ivorjetski/pen/dBYWWZ

Also here's a video of screenshots of the process:

https://www.youtube.com/watch?v=rUCVBNNyjC4

A Pen by Ben Evans on CodePen.

License.

Raw
script.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
Raw
style.scss
// 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);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment