// v CHANGE THE COLOUR OF THE SUN v // $sun1: #f2de6f; // ^ CHANGE THE COLOUR OF THE SUN ^ // // $sun1: orange; // for example $none: rgba(#fff, 0); $red: adjust-hue($sun1, -50deg); $red: darken($red, 25%); $green2: adjust-hue($sun1, 25deg); $green2: darken($green2, 30%); $sky1: adjust-hue($sun1, 165deg); $sky1: desaturate($sky1, 40%); $sky2: adjust-hue($sun1, -15deg); $sun2: lighten($sun1, 1%); $light: lighten($sun1, 50%); $sun3: adjust-hue($sun1, -20deg); $purple: adjust-hue($sun1, 240deg); $purple: darken($purple, 60%); $body: $purple; $bluegrey: desaturate($sky1, 20%); $darksea2: darken($bluegrey, 50%); $darksea3: darken($darksea2, 80%); $darksea1: $darksea2; $lightsea: lighten($sun1, 10%); $sungrey: desaturate($sun1, 70%); $sea1: darken($sungrey, 10%); $sea2: darken($sky1, 50%); $shadow: darken($sun1, 68%); $wall: darken($sun1, 80%); $beach: darken($sea1, 45%); $beach1: lighten($beach, 1%); $beach2: darken($beach, 2%); $wave1: rgba($shadow, 0.9); $wave2: desaturate($sun1, 90%); $wave2: darken($wave2, 35%); $green: adjust-hue($sun1, 20deg); $green: desaturate($green, 50%); $grass: darken($green, 67%); $grass: rgba($grass, 0.95); $grass2: darken($grass, 1%); $grass3: darken($grass, 2%); $grass4: darken($green, 67%); $grass5: lighten($grass, 2%); $house: darken($bluegrey, 47%); $house2: darken($house, 10%); $house3: lighten($house, 10%); $house4: darken($sungrey, 64%); $side: darken($sky1, 50%); $side: desaturate($side, 10%); $cloud: darken($sky1, 8%); $cloud: desaturate($cloud, 40%); $cloud: rgba($cloud, 0.4); html { font-size: 0.97vmin; /*font-size: 6.2px;*/ } @media (orientation: portrait) { html { font-size: 0.6vmin; } } body { margin: 0; background: $body; *, *:before, *:after { display: block; top: 0; left: 0; box-sizing: border-box; position: absolute; content: ""; transform-style: preserve-3d; perspective: 200rem; } } landscape, a { height: 100rem; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: linear-gradient($sky1, $sky2); width: 161rem; overflow: hidden; border-radius: 3rem; box-shadow: 0 0 5rem $shadow, 0 0 10rem $shadow, 0 0 50rem $shadow; &:after { width: 100%; height: 100%; box-shadow: inset 0 0 10rem $purple, inset 0 0 20rem $darksea2, inset 0 0 5rem $purple; opacity: 0.75; background: linear-gradient(rgba($purple, 0.3) 30%, $none); } } //Safari can't do the sea speckles @supports (-webkit-marquee-repetition: infinite) and (object-fit: fill) { body { *, *:before, *:after { transform-style: flat !important; perspective: none !important; } } sea x:nth-of-type(9) { transform: translate3d(-10rem, 0, 0) !important; top: 0 !important; } houses > x:nth-of-type(3):after { display: none; } } @function waves($a, $b, $c) { $value: "#{random(150) + 200}rem #{random(60)}rem "+$b+" "+$c; @for $i from 2 through $a { $value: "#{$value} , #{random(150) + 100}rem #{random(61)}rem "+$b+" "+$c; } @return unquote($value); } $waves1: waves(1500, 0, $sea1); $waves2: waves(1701, 0, $darksea2); sea, groins { height: 38%; top: auto; bottom: 0; } sea { width: 106%; left: -3%; background: $darksea2; box-shadow: inset 0 1rem 1rem $darksea2; &:before { width: 100%; height: 100%; background: radial-gradient(circle at 40% 0%, $sea1, $none); } &:after { width: 100%; height: 100%; background: linear-gradient(to right bottom, $none, $darksea2); } x:nth-of-type(1) { width: 120rem; height: 50rem; border-radius: 50%; border: 0 solid $none; border-top: 3rem solid $sea1; left: -30rem; top: 60%; -webkit-mask-image: linear-gradient(to right, #fff, $none); filter: blur(1rem); overflow: hidden; transform: skewX(-20deg) rotate(-3deg); opacity: 0.5; &:before { width: 100%; height: 100%; background: $darksea2; top: -85%; border-radius: 50%; } } x:nth-of-type(2) { width: 150rem; height: 50rem; border-radius: 50%; border: 0 solid $none; border-top: 2rem solid $darksea2; left: 30rem; top: 60%; overflow: hidden; transform: skewX(10deg) rotate(5deg); opacity: 0.8; -webkit-mask-image: linear-gradient(to right, $none, #fff); filter: blur(0.5rem); } x:nth-of-type(3) { width: 300rem; height: 50rem; border-radius: 50%; box-shadow: 20rem 0.5rem 0.2rem 1.2rem $darksea2, 25rem 0.5rem 0.2rem 2.5rem $sea1, 50rem 0.5rem 0.2rem 4rem $darksea2; left: -50rem; top: 44%; overflow: hidden; transform: skewX(-20deg) rotate(4deg); opacity: 0.9; } x:nth-of-type(4) { width: 34rem; height: 4rem; border-radius: 50%; box-shadow: 10rem 2rem 1em $darksea2; left: 35rem; top: 43%; transform: skewX(-75deg) rotate(3deg); opacity: 0.3; filter: blur(1rem); } x:nth-of-type(5) { width: 24rem; height: 0.2rem; background: $darksea2; left: 0rem; top: 2rem; border-radius: 50%; filter: blur(0.3rem); box-shadow: 2rem 0.6rem 0 rgba($lightsea, 0.4); &:before { left: 28rem; width: 6rem; height: 0.2rem; background: $darksea2; border-radius: 50%; } &:after { left: 24rem; top: 0.8rem; width: 12rem; height: 0.4rem; background: $sea1; border-radius: 50%; box-shadow: 15rem 0 0 $sea1; } } x:nth-of-type(6) { width: 35rem; height: 0.4rem; background: $darksea2; left: 0rem; top: 5rem; border-radius: 50%; filter: blur(0.3rem); opacity: 0.5; box-shadow: 36rem 0 0 $sea1; &:before { left: 34rem; top: -0.75rem; width: 35rem; height: 0.2rem; background: $lightsea; border-radius: 50%; } &:after { left: 45rem; top: -1.5rem; width: 10rem; height: 0.1rem; background: $lightsea; border-radius: 50%; } } x:nth-of-type(7) { width: 30rem; height: 1rem; background: rgba($lightsea, 0.5); left: 0rem; top: 6.5rem; border-radius: 50%; filter: blur(0.3rem); opacity: 0.2; box-shadow: 36rem 0 0 $lightsea; &:before { left: 1rem; top: 1rem; width: 20rem; height: 1.5rem; background: $darksea2; border-radius: 50%; transform: rotate(-1deg); box-shadow: 22rem 0 0 $darksea2, 50rem 0.5rem 0 $darksea2; } &:after { left: 52rem; top: 2.5rem; width: 10rem; height: 1rem; background: $darksea2; border-radius: 50%; transform: rotate(-1deg); box-shadow: -15rem 1rem 0 $darksea2, -18rem 0rem 0 $darksea2, -1rem 3.5rem 0 $darksea2; } } x:nth-of-type(8) { width: 20rem; height: 1rem; background: $darksea2; left: 7rem; top: 9.5rem; border-radius: 50%; filter: blur(0.2rem); opacity: 0.3; transform: rotate(-1deg); box-shadow: 5rem -2rem 0 rgba($lightsea, 0.2), 50rem 2rem 0 $darksea2, 50rem 5rem 0 $darksea2; &:before { left: -1rem; top: 1rem; width: 20rem; height: 1rem; background: $darksea2; border-radius: 50%; transform: rotate(2deg); } &:after { left: -2rem; top: 2.5rem; width: 35rem; height: 1rem; background: $lightsea; border-radius: 50%; transform: rotate(1deg); opacity: 0.5; box-shadow: 40rem 1rem 0 $lightsea, 43rem -3rem 0 $lightsea, 35rem -1rem 0 $lightsea; } } x:nth-of-type(10) { width: 100%; height: 100%; background-image: radial-gradient($lightsea 20%, $none 0), radial-gradient($lightsea 20%, $none 0); background-size: 1rem 1rem; background-position: 0 0, 0.5rem 0.5rem; opacity: 0.15; box-shadow: inset 0 0 2em $darksea3, 0 0 2em $darksea3; top: 1em; } x:nth-of-type(9) { width: 200%; height: 400%; left: -50%; top: -132%; transform: translateZ(70rem) rotateX(70deg); opacity: 0.2; &:before { box-shadow: $waves2; width: 1.5rem; height: 0.5rem; border-radius: 50%; } &:after { box-shadow: $waves1; width: 1.5rem; height: 0.5rem; border-radius: 50%; } } & > x:nth-of-type(11) { width: 100%; background: linear-gradient( to right, $none, $none 30%, $sky2 60%, $none, $none ); height: 100%; top: auto; bottom: 0; } & > x:nth-of-type(12) { width: 40rem; border-radius: 50%; height: 50rem; background: linear-gradient(to right, $none, $sun3, $none); transform: translate3d(80rem, 8rem, 0) skewX(-4deg); filter: blur(1rem); } } groins { width: 100%; & > x:nth-of-type(1) { width: 0.8rem; height: 3.2rem; background: $shadow; left: 22.75rem; top: 10.4rem; border-radius: 0.2rem; transform: skewX(-2deg); &:before { top: auto; bottom: 0; width: 0.3rem; height: 5.5rem; background: $shadow; } &:after { top: auto; bottom: 0; width: 0.2rem; height: 8rem; background: $shadow; left: 0.2rem; } } & > x:nth-of-type(2) { width: 8rem; height: 0.5rem; background: $shadow; left: 22rem; top: 12.3rem; border-radius: 0.2rem; transform: skewX(-2deg) rotate(-2deg); box-shadow: -0.1rem 0.65rem 0.2rem -0.15rem rgba($shadow, 0.7); &:before { width: 0.6rem; height: 2.5rem; background: $shadow; left: 7rem; border-radius: 0.2rem; transform: skewX(-2deg); top: auto; bottom: -0.5rem; } &:after { width: 0.5rem; height: 3rem; background: $shadow; left: 7.25rem; border-radius: 0.2rem; transform: skewX(-6deg); top: auto; bottom: -0.5rem; } } & > x:nth-of-type(3) { width: 1.1rem; height: 1.1rem; background: $beach; left: 22.6rem; top: 5rem; border-radius: 0.2rem; transform: skewX(-2deg) rotate(-2deg); border-left: 0.1rem solid $shadow; border-right: 0.1rem solid $shadow; &:before { width: 0.3rem; height: 1.1rem; background: $shadow; left: 0.32rem; box-shadow: 0.1rem 0 0.1rem rgba($body, 0.5); } &:after { width: 7rem; height: 0.1rem; background: rgba($shadow, 0.5); transform: rotate(25deg); top: 5.5rem; } } & > x:nth-of-type(4) { width: 1rem; height: 0.5rem; background: $shadow; left: 22.5rem; top: 13.5rem; box-shadow: -0.1rem 0.5rem 0.1rem 0.1rem $shadow, 0.1rem 0.75rem 0.2rem 0.2rem rgba($shadow, 0.8), -0.2rem 1.5rem 0.3rem 0.3rem rgba($shadow, 0.6), 0rem 3rem 0.4rem 0.4rem rgba($shadow, 0.4), -0.1rem 4rem 0.5rem 0.5rem rgba($shadow, 0.2); border-radius: 50%; opacity: 0.3; filter: blur(0.1rem); &:before { width: 1rem; height: 0.5rem; background: $shadow; left: 6.4rem; top: 0rem; box-shadow: -0.1rem 0.5rem 0.1rem 0.1rem $shadow, -0.1rem 0.75rem 0.2rem 0.2rem rgba($shadow, 0.8), 0.2rem 2rem 0.3rem 0.3rem rgba($shadow, 0.4), -0.2rem 4rem 0.4rem 0.4rem rgba($shadow, 0.2), -0.4rem 6rem 0.5rem 0.5rem rgba($shadow, 0.1); border-radius: 50%; } } & > x:nth-of-type(5) { width: 0.3rem; height: 1.5rem; background: $shadow; left: 31rem; top: 4.1rem; border-radius: 0.2rem; transform: skewX(4deg); box-shadow: 2.5rem 0 0 $shadow, 2.5rem 1.5rem 0.1rem rgba($shadow, 0.1), 0 1.5rem 0.1rem rgba($shadow, 0.1), 0 0.5rem 0.2rem 0.2rem rgba($shadow, 0.1); opacity: 0.9; &:before { top: -1rem; left: 0.1rem; width: 0.1rem; height: 1rem; background: rgba($shadow, 0.5); transform: skewX(-15deg); } &:after { width: 0.6rem; height: 0.6rem; background: $beach; left: 0.2rem; top: -1.6rem; border-radius: 0.2rem; transform: skewX(-15deg) rotate(-2deg); border-left: 0.1rem solid $shadow; border-right: 0.1rem solid $shadow; } } & > x:nth-of-type(6) { width: 0.2rem; height: 0.7rem; background: $shadow; left: 34rem; top: 2.5rem; border-radius: 0.2rem; transform: skewX(0.2deg); box-shadow: 1.5rem 0 0 $shadow, 1.5rem 1.5rem 0.1rem rgba($shadow, 0.2), 0 1.5rem 0.1rem rgba($shadow, 0.2), 0 0.5rem 0.2rem 0.2rem rgba($shadow, 0.2); opacity: 0.8; &:before { top: -1rem; left: 0rem; width: 0.1rem; height: 1rem; background: rgba($shadow, 0.5); transform: skewX(-5deg); } &:after { width: 0.3rem; height: 0.3rem; background: $beach; left: -0.1rem; top: -1rem; border-radius: 0.2rem; transform: skewX(-2deg) rotate(-2deg); border-left: 0.1rem solid $shadow; border-right: 0.1rem solid $shadow; } } & > x:nth-of-type(7) { width: 0.1rem; height: 0.4rem; background: $shadow; left: 33.1rem; top: 1.9rem; border-radius: 0.05rem; transform: skewX(-0.2deg); box-shadow: 1.3rem 0 0 $shadow, 1.3rem 0.4rem 0.1rem rgba($shadow, 0.2), 0 0.3rem 0.1rem rgba($shadow, 0.2), 0 0.5rem 0.2rem 0.2rem rgba($shadow, 0.2); opacity: 0.7; &:before { top: -0.7rem; left: 0rem; width: 0.1rem; height: 0.7rem; background: rgba($shadow, 0.5); transform: skewX(-5deg); } &:after { width: 0.2rem; height: 0.2rem; background: $beach; left: 0; top: -0.7rem; border-radius: 0.2rem; transform: skewX(-2deg) rotate(-2deg); border-left: 0.1rem solid $shadow; border-right: 0.1rem solid $shadow; } } & > x:nth-of-type(8) { width: 1.5rem; height: 5rem; background: $shadow; border-radius: 0.5rem 0.5rem 0.75rem 0.75rem; transform: translate3d(131rem, 25rem, 0) skewX(2deg) skewY(4deg); box-shadow: 0 -0.9rem 0 -0.15rem $shadow, 8rem -1.5rem 0 -0.15rem $shadow, 15rem -2rem 0 -0.15rem $shadow, 22.6rem -2.5rem 0 -0.15rem $shadow, 29.5rem -2.9rem 0 -0.15rem $shadow, 8rem -0.5rem 0 0 $shadow, 15rem -1rem 0 0 $shadow, 22.6rem -1.5rem 0 0 $shadow, 29.5rem -1.9rem 0 0 $shadow; &:before { width: 16rem; height: 1rem; background: $shadow; transform: translate3d(0, 2.5rem, 0) skewY(-3deg); box-shadow: 0 0.2vmin 0.2vmin 0 rgba($shadow, 0.5); } &:after { width: 16rem; height: 2rem; background: $shadow; transform: translate3d(16rem, 0.5rem, 0) skewY(-4deg); box-shadow: 0 0.2vmin 0.2vmin 0 rgba($shadow, 0.5); } } & > x:nth-of-type(9) { width: 1.5rem; height: 0.75rem; border-radius: 0 0 0.75rem 0.75rem; left: 131rem; top: 29rem; background: $shadow; transform: skewY(-4deg); box-shadow: 1rem -0.2rem 0.5rem rgba($shadow, 0.75), 3rem -0.3rem 0.5rem rgba($shadow, 0.75), -0.15rem 0.5rem 0.2rem rgba($shadow, 0.95), 0.35rem 1rem 0.2rem rgba($shadow, 0.9), 0.25rem 1.75rem 0.2rem rgba($shadow, 0.8), 0 2rem 0.2rem rgba($shadow, 0.7), 1rem 2rem 0.2rem -0.2rem rgba($shadow, 0.7), -0.5rem 2.5rem 0.2rem -0.2rem rgba($shadow, 0.6), 0rem 2.75rem 0.2rem -0.2rem rgba($shadow, 0.9), 0.2rem 2rem 0.3rem 0.3rem rgba($shadow, 0.4), -0.2rem 4rem 0.4rem 0.4rem rgba($shadow, 0.2), -0.4rem 6rem 0.5rem 0.5rem rgba($shadow, 0.1), 1.2rem 5.5rem 0.4rem 0.4rem rgba($shadow, 0.1), 1.4rem 7.2rem 0.5rem 0.5rem rgba($shadow, 0.05), //post2 9.5rem 0.25rem 0.25rem rgba($shadow, 0.75), 10.5rem 0.5rem 0.5rem rgba($shadow, 0.75), 8rem 1rem 0.2rem rgba($shadow, 0.95), 8.1rem 2.1rem 0.2rem rgba($shadow, 0.8), 8.5rem 3rem 0.2rem rgba($shadow, 0.7), 8.2rem 2rem 0.3rem 0.3rem rgba($shadow, 0.4), 7.92rem 4rem 0.4rem 0.4rem rgba($shadow, 0.2), 7.8rem 6rem 0.5rem 0.5rem rgba($shadow, 0.1), 8.5rem 5.5rem 0.4rem 0.4rem rgba($shadow, 0.1), 9rem 7.2rem 0.5rem 0.5rem rgba($shadow, 0.05), //post3 16.5rem 1rem 0.5rem rgba($shadow, 0.75), 17.5rem 1rem 0.5rem rgba($shadow, 0.75), 15rem 1rem 0.2rem rgba($shadow, 0.95), 15.1rem 2.5rem 0.2rem rgba($shadow, 0.8), 14.9rem 3rem 0.2rem rgba($shadow, 0.1), 15.2rem 2rem 0.3rem 0.3rem rgba($shadow, 0.4), 14.92rem 4rem 0.4rem 0.4rem rgba($shadow, 0.2), 14.8rem 6rem 0.5rem 0.5rem rgba($shadow, 0.1), 15.5rem 5.5rem 0.4rem 0.4rem rgba($shadow, 0.1), 16rem 7.2rem 0.5rem 0.5rem rgba($shadow, 0.05), //post4 26.5rem 1rem 0.5rem rgba($shadow, 0.75), 27.5rem 1rem 0.5rem rgba($shadow, 0.75), 23rem 1rem 0.2rem rgba($shadow, 0.95), 23.1rem 2.5rem 0.2rem rgba($shadow, 0.5), 22.6rem 3rem 0.2rem rgba($shadow, 0.9), 22.2rem 2rem 0.3rem 0.3rem rgba($shadow, 0.4), 22.92rem 4rem 0.4rem 0.4rem rgba($shadow, 0.2), 22.8rem 6rem 0.5rem 0.5rem rgba($shadow, 0.1), 24.5rem 5.5rem 0.4rem 0.4rem rgba($shadow, 0.1), 25rem 7.2rem 0.5rem 0.5rem rgba($shadow, 0.05); &:before { width: 1.2rem; height: 0.25rem; border-radius: 0 0 0.75rem 0.75rem; left: 8rem; top: 3.5rem; background: $shadow; transform: skewY(4deg); opacity: 0.7; box-shadow: 1rem 1rem 0.3rem $shadow, // 1.5rem 1.25rem 0.3rem $shadow, // 7rem 0rem 0.2rem $shadow, // 9rem -2rem 0.3rem $shadow, // 10rem -2.5rem 0.2rem $shadow, // 10.5rem -2rem 0.2rem $shadow, // 11rem -2.25rem 0.2rem $shadow, // 11.3rem -2.75rem 0.3rem $shadow, // 12.3rem -2.5rem 0.4rem $shadow, // 14rem -2.35rem 0.2rem $shadow, // 16rem 2.35rem 0.2rem $shadow, // 15rem 1rem 0.5rem $shadow, // 16rem -2rem 0.2rem $shadow, // 17rem -2rem 0.2rem $shadow, // 19.5rem -2.5rem 0.2rem $shadow, // 18.2rem -1.9rem 0.5rem $shadow, // 17.2rem -1rem 0.4rem $shadow, // 17.6rem -1.1rem 0.2rem $shadow, // 18.1rem -0.9rem 0.2rem $shadow, // 21rem -1.4rem 0.2rem $shadow, // 21.1rem -2rem 0.2rem $shadow; } &:after { left: -0.2rem; top: -8rem; background: $shadow; width: 0.6rem; height: 9rem; transform: skewY(18deg); } } & > x:nth-of-type(10) { left: 138.5rem; top: 23.3rem; width: 2rem; height: 2rem; transform: rotate(-30deg); overflow: hidden; border-radius: 50% 0 0 0 / 0.2rem 0 0 0; &:before { background: $house2; border-radius: 0 40% 60% 0; transform: rotate(30deg); height: 1rem; width: 2rem; left: -0.4rem; top: -0.6rem; box-shadow: 0.4rem -0.4rem 0 0.4rem darken($house, 5%); } &:after { height: 0.5rem; width: 0.1rem; background: darken($red, 30%); transform: rotate(30deg); top: 0.65rem; left: 1rem; } } & > x:nth-of-type(11) { left: 139.5rem; top: 22.9rem; width: 0.8rem; height: 0.65rem; border-radius: 50%; background: darken($house, 5%); &:before { left: 0.2rem; top: -0.3rem; width: 0.6rem; height: 0.5rem; border-radius: 50% 50% 50% 0; background: darken($house, 5%); } &:after { border: 0.1rem solid $none; border-top: 0.4rem solid darken($red, 30%); transform: rotate(44deg); left: 0.1rem; top: 0.05rem; } } & > x:nth-of-type(12), & > x:nth-of-type(13), & > x:nth-of-type(14), & > x:nth-of-type(15) { & > x:nth-of-type(1) { width: 0.3rem; height: 1.7rem; border-radius: 0.1rem; background: $shadow; transform: skew(4deg); &:before { left: 7rem; top: 0.4rem; width: 0.2rem; height: 1.3rem; border-radius: 0.1rem; background: $shadow; transform: skew(-6deg); box-shadow: 2.1rem 0.1rem 0 $shadow, // -2.1rem 0 0 $shadow, // -4.2rem 0 0 $shadow, // -6rem 0 0.1rem $shadow; } &:after { left: 1.5rem; top: 1.2rem; width: 6rem; height: 1rem; border-radius: 0 0 100% 100%; background: $shadow; box-shadow: 0 0 0.2rem 0 $shadow; transform: scaleY(0.2); opacity: 0.8; } } & > x:nth-of-type(2) { transform: translate3d(10.9rem, 0.6rem, 0) rotate(-2deg); width: 0.3rem; height: 1rem; border-radius: 0.1rem; background: $shadow; box-shadow: 2rem 0 0 $shadow, // 4.05rem 0 0 $shadow, // 5.9rem 0 0 $shadow, // 7.9rem 0 0 $shadow; &:before { left: 2.1rem; top: 0.5rem; width: 4rem; height: 0.5rem; background: $shadow; transform: rotate(1deg); box-shadow: -2rem 0 0 -0.1rem $shadow, // 4rem 0 0 0.1rem $shadow, // 0 0.3rem 0.2rem rgba($shadow, 0.2), // -2rem 0.2rem 0.2rem -0.1rem rgba($shadow, 0.2), // 4rem 0.5rem 0.2rem 0.1rem rgba($shadow, 0.2); } &:after { left: 9.6rem; top: -0.5rem; width: 0.4rem; height: 1.5rem; border-radius: 0.1rem; background: $shadow; box-shadow: 2rem 0 0 $shadow, // 4.05rem 0 0 $shadow, // 5.9rem 0 0 $shadow, // 7.9rem -0.1rem 0 $shadow, // 9.8rem -0.2rem 0 $shadow, // 11.6rem -0.3rem 0 $shadow, // 13.5rem -0.5rem 0 $shadow, // 15.5rem -0.5rem 0 $shadow, // 17.4rem -0.6rem 0 $shadow, // 19.4rem -0.7rem 0 $shadow, // 21.7rem -0.8rem 0 $shadow, // 26.5rem -0.6rem 0 $shadow; // } } & > x:nth-of-type(3) { transform: translate3d(20.5rem, 0.6rem, 0) rotate(-2deg); width: 2.2rem; height: 0.6rem; background: $shadow; box-shadow: 2.2rem -0.1rem 0 $shadow, // 4.4rem -0.2rem 0 $shadow, // 6.2rem -0.3rem 0 $shadow, // 8.2rem -0.4rem 0 $shadow, // 10rem -0.5rem 0 $shadow, // 12rem -0.6rem 0 $shadow, // 14rem -0.7rem 0 $shadow, // 16rem -0.8rem 0 $shadow, // 18rem -0.9rem 0 $shadow, // 20rem -1rem 0 $shadow; // &:before { left: 21.8rem; top: -1.1rem; width: 4.8rem; height: 1.5rem; background: $shadow; transform: rotate(1deg); border-radius: 0.2rem; box-shadow: 1rem 0.2rem 0 $shadow, // 1.5rem 0.5rem 0.5rem $shadow, // -5rem 0.6rem 0 0.2rem $shadow, // -5rem 0.8rem 0.2rem 0.2rem rgba($shadow, 0.5), // -10rem 1rem 0 0 $shadow, // -10rem 1.2rem 0.2rem 0 rgba($shadow, 0.5); } &:after { width: 8rem; height: 1rem; left: 0; top: 0rem; background: $shadow; box-shadow: 0 0.2rem 0.2rem rgba($shadow, 0.2), // 7.8rem 0 0 0.2rem $shadow; } } & > x:nth-of-type(4) { transform: translate3d(40rem, -0.5rem, 0); width: 7rem; height: 1.75rem; border-radius: 0.2rem; background: $shadow; &:before { width: 0.4rem; height: 5rem; border-radius: 0.2rem; background: $shadow; opacity: 0.4; transform: translate3d(-19.5rem, -0.5rem, 0) rotateY(-6deg) rotateX(80deg); box-shadow: 2rem 0 0.15rem $shadow, // 4.05rem 0 0.15rem $shadow, // 5.9rem 0 0.15rem $shadow, // 7.9rem -0.1rem 0.15rem $shadow, // 9.8rem 0.4rem 0.15rem $shadow, // 11.6rem 0.5rem 0.15rem $shadow, // 13.5rem 0.6rem 0.15rem $shadow, // 15.5rem 0.7rem 0.2rem $shadow, // 17.4rem 0.8rem 0.2rem $shadow, // 19.4rem 0.9rem 0.25rem $shadow, // 21.7rem 0.1rem 0.25rem $shadow; } &:after { transform: translate3d(-4rem, 0.2rem, 0) skewX(45deg); background: $wave2; width: 0.4rem; height: 2rem; border-radius: 0.2rem; opacity: 0.2; box-shadow: 6.25rem 0 0 rgba($wave2, 0.7), -6.5rem 0.5rem 0 rgba($wave2, 0.9); } } & > x:nth-of-type(5) { transform: translate3d(42rem, 0.5rem, 0) skewY(-5deg); height: 1rem; width: 8rem; border-radius: 50%; background: $beach2; box-shadow: inset 0.5rem 0.2rem 0.2rem rgba($shadow, 0.75); &:before { transform: translate3d(-5.3rem, 0rem, 0) skewY(4deg); height: 0.7rem; width: 8rem; border-radius: 50%; background: $beach2; box-shadow: inset 1rem 0.2rem 0.2rem rgba($shadow, 0.75); } &:after { transform: translate3d(-14rem, -1rem, 0) skewY(20deg) rotate(60deg); height: 3rem; width: 2rem; border-radius: 0.3rem; background: linear-gradient( 105deg, $wave2, $wave2, rgba($shadow, 0.25) 25%, $none, $none ); filter: blur(0.1rem); } } } & > x:nth-of-type(12) { transform: translate3d(60rem, 5.5rem, 0); } & > x:nth-of-type(13) { transform: translate3d(50.5rem, 3.1rem, 0) scale(0.6); & > x:nth-of-type(1):after { display: none; } x:nth-of-type(5) { background: darken($beach, 7%); box-shadow: 2rem 0.5rem 0 -0.2rem darken($beach, 6%), // 3rem 0.6rem 0 -0.3rem darken($beach, 8%); &:after { display: none; } } } & > x:nth-of-type(14) { transform: translate3d(47rem, 2rem, 0) scale(0.4); & > x:nth-of-type(1):after { left: 5.5rem; } x:nth-of-type(5):after { display: none; } } & > x:nth-of-type(15) { transform: translate3d(43rem, 1.5rem, 0) scale(0.3); & > x:nth-of-type(1):after { display: none; } x:nth-of-type(5):after { display: none; } } } beach { & > *, & > *:before, & > *:after { border-radius: 50%; } & > x:nth-of-type(1) { width: 30rem; height: 1rem; background: $beach; transform: translate3d(50rem, 62rem, 0); &:before { width: 1rem; height: 1rem; background: $beach; transform: translate3d(2rem, -0.15rem, 0); } &:after { width: 2rem; height: 1rem; background: $beach; transform: translate3d(3rem, -0.15rem, 0); border-radius: 0.5rem 1rem 0 0; } } & > x:nth-of-type(2) { width: 250rem; height: 2.5rem; background: $house; transform: translate3d(50rem, 65.5rem, 0) skewX(-40deg) skewY(2.1deg); border-bottom: 3rem solid $house4; box-sizing: content-box; box-shadow: 20rem 1rem 1rem $shadow; &:after { width: 250rem; height: 2.5rem; border-bottom: 0.6rem solid $shadow; box-sizing: content-box; } &:before { width: 250rem; height: 2.5rem; border-bottom: 1rem solid rgba($shadow, 0.5); box-sizing: content-box; } } & > x:nth-of-type(5) { width: 25rem; height: 4rem; background: $beach1; transform: translate3d(150rem, 74rem, 0) skewX(50deg) skewY(5deg); filter: blur(0.3rem); &:before { width: 15rem; height: 3rem; background: $beach1; transform: translate3d(-20rem, -1rem, 0); } &:after { width: 20rem; height: 2rem; background: $beach1; transform: translate3d(-2rem, -3rem, 0) skewX(-82deg) skewY(6deg); box-shadow: 1rem -1.5rem 0 $beach, // 12rem 0rem 0 $beach; } } & > x:nth-of-type(4) { width: 25rem; height: 4rem; background: $beach2; transform: translate3d(152rem, 76rem, 0) skewX(50deg) skewY(5deg); &:before { width: 15rem; height: 3rem; background: $beach2; transform: translate3d(-20rem, -1rem, 0); } &:after { width: 15rem; height: 3rem; background: $beach2; transform: translate3d(-10rem, -5rem, 0); box-shadow: 2rem 3rem 1rem $beach, // 4rem 1rem 1rem $beach, // 5rem 2rem 1rem $beach, // 1rem 5.5rem 0 $beach; } } & > x:nth-of-type(3) { width: 10rem; height: 3rem; background: $beach2; transform: translate3d(120rem, 70rem, 0) skewX(50deg) skewY(5deg); &:before { width: 10rem; height: 2rem; background: $beach2; transform: translate3d(2rem, -1.7rem, 0) rotate(-5deg); box-shadow: 5rem 1rem 0 $beach2, // 0rem 0rem 0.5rem $shadow, // 4rem 0.5rem 0 $beach, // 10rem 0.5rem 0 $beach, // 10rem 0.5rem 0.5rem $shadow, // 17rem 0.6rem 0 $beach2, // 23rem 0.8rem 0 $beach, // 26rem 1rem 0 0.1rem $beach2; } &:after { width: 8rem; height: 1.75rem; background: $beach; transform: translate3d(-3rem, -1.2rem, 0) rotate(-5deg); box-shadow: -7rem -0.5rem 0 $beach1, // -4rem -0.4rem 0 $beach1, // -4rem 1rem 0 $beach1, // 1rem 2rem 0 $beach1, // -11rem -0.25rem 0 -0.3rem $beach2; } } & > x:nth-of-type(7) { width: 2rem; height: 0.5rem; background: $wave1; transform: translate3d(121rem, 72rem, 0) skewX(69deg); border-radius: 0.5rem; box-shadow: -2rem 0 0.25rem 0.1rem $wave2, // 0.5rem 0 0.25rem -0.1rem $wave2, // 1rem 0.25rem 0.25rem $wave1, // -1rem 0.25rem 0.25rem 0.1rem $wave2, // 1.5rem 0.25rem 0.25rem 0.2rem $wave2, // 3rem 0.5rem 0.25rem -0.1rem $wave2, // 2rem 0.5rem 0.25rem 0.2rem $wave2, // 3.5rem 0.5rem 0.25rem 0.1rem $wave2; filter: blur(0.1rem); &:before { width: 2rem; height: 0.5rem; background: $wave1; transform: translate3d(1rem, 1rem, 0); border-radius: 0.5rem; box-shadow: -2rem 0 0.25rem $wave2, // 0.5rem 0 0.25rem 0.1rem $wave2, // 1rem 0.5rem 0.25rem $wave1, // -1rem 0.5rem 0.25rem $wave2, // 1.5rem 0.5rem 0.25rem 0.1rem $wave2, // 2rem 1rem 0.25rem $wave1, // 1rem 1rem 0.25rem 0.1rem $wave2, // 2.5rem 1rem 0.25rem $wave2; } &:after { width: 2.5rem; height: 0.52rem; background: $wave1; transform: translate3d(3rem, 2rem, 0); border-radius: 0.5rem; box-shadow: -2rem 0 0.25rem 0.1rem $wave2, // 0.5rem 0 0.25rem $wave2, // 1rem 0.5rem 0.25rem -0.1rem $wave1, // -1rem 0.5rem 0.25rem $wave2, // 1.5rem 0.5rem 0.25rem 0.1rem $wave2, // 2rem 1rem 0.25rem $wave1, // 1rem 1rem 0.25rem 0.1rem $wave2, // 2.5rem 1rem 0.25rem $wave2; } } & > x:nth-of-type(6) { width: 3rem; height: 0.5rem; background: $wave1; transform: translate3d(110rem, 70rem, 0) skewX(69deg); border-radius: 0.5rem; box-shadow: -2rem 0 0.25rem $wave2, // 0.5rem 0 0.25rem $wave2, // 1rem 0.25rem 0.25rem $wave1, // -1rem 0.25rem 0.25rem $wave2, // 1.5rem 0.25rem 0.25rem $wave2, // 3rem 0.5rem 0.25rem $wave2, // 2rem 0.5rem 0.25rem $wave2, // 3.5rem 0.5rem 0.25rem $wave2; filter: blur(0.2rem); &:before { width: 2rem; height: 0.5rem; background: $wave1; transform: translate3d(1rem, 1rem, 0); border-radius: 0.5rem; box-shadow: -2rem 0 0.25rem $wave2, // 0.5rem 0 0.25rem $wave2, // 1rem 0.5rem 0.25rem $wave1, // -1rem 0.5rem 0.25rem $wave2, // 1.5rem 0.5rem 0.25rem $wave2, // 2rem 1rem 0.25rem $wave1, // 1rem 1rem 0.25rem $wave2, // 2.5rem 1rem 0.25rem $wave2; } &:after { width: 2.5rem; height: 0.52rem; background: $wave1; transform: translate3d(3rem, 2rem, 0); border-radius: 0.5rem; box-shadow: -2rem 0 0.25rem $wave2, // 0.5rem 0 0.25rem $wave2, // 1rem 0.5rem 0.25rem $wave1, // -1rem 0.5rem 0.25rem $wave2, // 1.5rem 0.5rem 0.25rem $wave2, // 2rem 1rem 0.25rem $wave1, // 1rem 1rem 0.25rem $wave2, // 2.5rem 1rem 0.25rem $wave2; } } & > x:nth-of-type(8) { width: 3rem; height: 0.75rem; background: $wave2; transform: translate3d(105rem, 70rem, 0) skewX(69deg); border-radius: 0.75rem; filter: blur(0.1rem); box-shadow: 2rem 0.75rem 0 0.1rem $wave2, // 4rem 1.25rem 0 -0.1rem $wave2, // 5rem 2rem 0 $wave2, // 6rem 2.75rem 0 0.2rem $wave2, // 8rem 3.25rem 0 0.1rem $wave2, // 10rem 4rem 0 -0.1rem $wave2; &:before { width: 3rem; height: 0.75rem; background: $wave2; transform: translate3d(5rem, 3rem, 0); border-radius: 0.75rem; filter: blur(0.1rem); box-shadow: 2rem 0.75rem 0 0.1rem $wave2, // 4rem 1.25rem 0 -0.1rem $wave2, // 5rem 2rem 0 $wave2, // 6rem 2.75rem 0 0.2rem $wave2, // 8rem 3.25rem 0 0.1rem $wave2, // 10rem 4rem 0 -0.1rem $wave2; } &:after { width: 3rem; height: 0.75rem; background: $wave2; transform: translate3d(10rem, 3.5rem, 0); border-radius: 0.75rem; filter: blur(0.1rem); box-shadow: 2rem 0.75rem 0 0.1rem $wave2, // 4rem 1.25rem 0 -0.1rem $wave2, // 5rem 2rem 0 $wave2, // 6rem 2.75rem 0 0.2rem $wave2, // 8rem 3.25rem 0 0.1rem $wave2, // 10rem 4rem 0 -0.1rem $wave2; } } & > x:nth-of-type(9) { width: 3rem; height: 0.75rem; background: $wave2; transform: translate3d(120rem, 72rem, 0) skewX(69deg); border-radius: 0.75rem; filter: blur(0.1rem); box-shadow: 2rem 0.75rem 0 0.1rem $wave2, // 4rem 1.25rem 0 -0.1rem $wave2, // 5rem 2rem 0 $wave2, // 6rem 2.75rem 0 0.2rem $wave2, // 8rem 3.25rem 0 0.1rem $wave2, // 10rem 4rem 0 -0.1rem $wave2; &:before { width: 3rem; height: 0.75rem; background: $wave2; transform: translate3d(5rem, 3rem, 0); border-radius: 0.75rem; filter: blur(0.1rem); box-shadow: 2rem 0.75rem 0 0.1rem $wave2, // 4rem 1.25rem 0 -0.1rem $wave2, // 5rem 2rem 0 $wave2, // 6rem 2.75rem 0 0.2rem $wave2, // 8rem 3.25rem 0 0.1rem $wave2, // 10rem 4rem 0 -0.1rem $wave2; } &:after { width: 3rem; height: 0.75rem; background: $wave2; transform: translate3d(10rem, 3.5rem, 0); border-radius: 0.75rem; filter: blur(0.1rem); box-shadow: 2rem 0.75rem 0 0.1rem $wave2, // 4rem 1.25rem 0 -0.1rem $wave2, // 5rem 2rem 0 $wave2, // 6rem 2.75rem 0 0.2rem $wave2, // 8rem 3.25rem 0 0.1rem $wave2, // 10rem 4rem 0 -0.1rem $wave2; } } & > x:nth-of-type(10) { width: 3rem; height: 0.75rem; background: $wave1; transform: translate3d(150rem, 82rem, 0) skewX(261deg) rotate(10deg); border-radius: 0.75rem; filter: blur(0.2rem); opacity: 0.6; box-shadow: -3rem 0.6rem 0 0.1rem $wave1, // -9rem 0.8rem 0 -0.1rem $wave1, // -8rem -1rem 0 rgba($wave1, 0.5), // -5rem 0rem 0 0 $wave1; &:before { width: 2.8rem; height: 0.75rem; background: $wave1; transform: translate3d(12rem, -5rem, 0); border-radius: 0.75rem; box-shadow: -3rem 0.6rem 0 0.1rem $wave1, // -9rem 0.8rem 0 -0.1rem $wave1, // -12rem 0rem 0 $wave1; } &:after { width: 2.8rem; height: 0.75rem; background: $wave1; transform: translate3d(17rem, -10rem, 0); border-radius: 0.75rem; box-shadow: -3rem 0.6rem 0 0.1rem $wave1, // 4rem -2rem 0 -0.1rem $wave1, // 5rem -3rem 0 $wave1; } } //sand after groin & > x:nth-of-type(11) { width: 10rem; height: 2rem; background: $beach1; transform: translate3d(90rem, 66.5rem, 0) rotate(1deg); border-radius: 2rem 2rem 0 0 / 100% 2rem 0 0; box-shadow: 1rem 0 0.75rem $shadow, // -8rem 0.1rem 0 $beach1, // -7rem 0 0.75rem $shadow; &:after { width: 10rem; height: 0.75rem; background: $beach2; transform: translate3d(-10.75rem, 0.25rem, 0) rotate(-1deg); border-radius: 50%; box-shadow: 1rem 0.35rem 0.5rem $beach2; } &:before { width: 0.5rem; height: 2rem; border-radius: 0.1rem; background: $shadow; transform: translate3d(-5rem, -1rem, 0); box-shadow: 2rem -1rem 0.5rem $shadow, // -3rem 0.2rem 0 $shadow, // -6rem 0.2rem 0 -0.15rem $shadow; // } } & > x:nth-of-type(12) { width: 10rem; height: 1rem; background: $beach1; transform: translate3d(60rem, 64.5rem, 0) rotate(1deg); border-radius: 50%; box-shadow: -5rem -1rem 0 0 $beach1; &:after { width: 10rem; height: 0.75rem; background: $beach1; transform: translate3d(-11rem, -1rem, 0) rotate(-1deg); border-radius: 50%; box-shadow: -4rem -1rem 0 0 $beach, // -7rem -0.6rem 0 -0.1rem $beach2, // 0 0 0.5rem 0 $beach2, // -11rem -1.1rem 0 -0.2rem $beach, // 1rem -0.5rem 0 0.1rem $beach2; } &:before { width: 10rem; transform: translate3d(-17rem, -2.2rem, 0); border-bottom: 1rem solid $beach2; border-left: 2rem solid $none; border-right: 4rem solid $none; border-radius: 0; } } } houses { &:after { width: 100rem; height: 2rem; border-radius: 50%; transform: translate3d(43rem, 50rem, 0) rotate(-50deg); background: linear-gradient( to right, $sun1, $sun1 24%, $red 25%, $red 35%, $green2 36%, #fff 45%, $sun1 ); filter: blur(1rem); opacity: 0.2; } & > x:nth-of-type(2) { width: 65rem; height: 20rem; transform: translate3d(54.5rem, 43.75rem, 0) skewY(2.2deg); overflow: hidden; &:before { width: 75rem; height: 9rem; transform: translate3d(0rem, 15.5rem, 0) skewX(-30deg) skewY(-1deg); background: $grass; box-shadow: inset 0 0 2rem $shadow; border-radius: 50%; } & > x:nth-of-type(2) { & > x:nth-of-type(1) { width: 20rem; height: 5rem; background: $grass; transform: translate3d(0, 17rem, 0) skewY(-2deg) skewX(-30deg); border-radius: 50%; &:after { width: 0.75rem; height: 1rem; background: $house; transform: translate3d(2rem, 0.5rem, 0) skewY(-10deg) skewX(30deg); box-shadow: -0.15rem 0 0 $grass, // -0.25rem 0.25rem 0 $grass, // 0.5rem 0.4rem 0 -0.25rem $house2, // 0.75rem 0.4rem 0 -0.25rem $house2, // 1rem 0.4rem 0 -0.25rem $house2, // 0.75rem 0 0 $grass; // } &:before { width: 7rem; height: 0.5rem; background: $grass; transform: translate3d(1.75rem, 0.25rem, 0) skewX(-45deg); } } & > x:nth-of-type(2) { width: 0.35rem; height: 1rem; background: $grass; transform: translate3d(6.4rem, 17rem, 0); border-radius: 0.1rem; box-shadow: 0 -0.25rem 0 -0.1rem $grass, // -2rem -0.25rem 0 -0.1rem $grass; &:after { width: 1rem; height: 1rem; background: $house2; transform: translate3d(-2.25rem, 0.35rem, 0) rotate(45deg); border-radius: 0.2rem; } &:before { width: 7rem; height: 7rem; background: $grass; transform: translate3d(3rem, -1.25rem, 0); box-shadow: 3rem -0.25rem 0 $grass; } } & > x:nth-of-type(4) { width: 2rem; height: 1.25rem; background: $house2; transform: translate3d(9rem, 16.4rem, 0) skewY(-2deg); border-radius: 0.1rem; box-shadow: -0.15rem 0 0 $house; &:after { width: 7rem; height: 0.7rem; background: $grass; transform: translate3d(0.5rem, -0.6rem, 0) skewX(-65deg); } &:before { width: 0.25rem; height: 1rem; background: $grass; transform: translate3d(1.75rem, -1rem, 0); border-radius: 0.1rem; box-shadow: 0 -0.25rem 0 -0.1rem $grass, // -0.75rem 0.1rem 0 -0.05rem $grass, // -1.5rem 0.1rem 0 -0.1rem $grass, // 0.75rem 0.1rem 0 $grass, // 3rem -0.1rem 0 $grass, // 3rem -0.4rem 0 -0.1rem $grass, // 3.5rem -0.1rem 0 $grass, // 3.74rem -0.1rem 0 $grass, // 3.5rem -0.5rem 0 -0.1rem $grass, // 3.74rem -0.5rem 0 -0.1rem $grass, // 4.15rem 0.1rem 0 -0.1rem $grass, // 5rem 0 0 $grass, // 5.24rem 0 0 $grass, // 5.175rem -0.25rem 0 -0.1rem $grass, // 6.25rem -0.5rem 0 $grass, // 6rem -0.5rem 0 $grass, // 6.25rem -0.75rem 0 -0.1rem $grass, // 6rem -0.75rem 0 -0.1rem $grass; //; } } & > x:nth-of-type(5) { width: 0.4rem; height: 1rem; background: $house; transform: translate3d(9rem, 19.2rem, 0) skewY(-2deg); border-radius: 0.25rem 0.25rem 0 0; box-shadow: -0.45rem 0 0 $house, // -1rem 0 0 $house, // -1.4rem 0 0 $house, // -1.8rem 0 0 $house, // -2rem 0 0 $house, // -2.2rem 0 0 $house, // -2.7rem 0 0 $house, // -3rem 0 0 $house, // -3.5rem 0 0 $house, // -4rem 0 0 $house, // -4.4rem 0 0 $house, // -4.8rem 0 0 $house, // -5rem 0 0 $house, // -5.2rem 0.4rem 0 $house, // -5.7rem 0.4rem 0 $house, // -6rem 0 0 $house, // -6.5rem 0 0 $house, // -7rem 0 0 $house, // -7.7rem 0 0 $house, // -8rem 0 0 $house, // -8.5rem 0 0 $house; &:before { width: 1.5rem; height: 0.75rem; background: $house2; transform: translate3d(0.3rem, 0.25rem, 0) skewY(2deg); } &:after { width: 7rem; height: 7rem; background: $grass4; transform: translate3d(0, 0, 0) rotate(60deg); box-shadow: inset 0 0 0.5rem rgba($lightsea, 0.1); } } & > x:nth-of-type(6) { width: 5rem; height: 0.75rem; background: $house2; transform: translate3d(13.5rem, 16rem, 0); border-radius: 0.15rem; &:before { height: 0.85rem; width: 0.75rem; background: $house2; transform: translate3d(-1rem, 0.25rem, 0); border-radius: 50% 50% 0 0; box-shadow: 0.5rem 0.25rem 0 $grass, // 2rem 0.35rem 0 $grass, // 2.5rem 0.1rem 0 $grass, // 3.3rem 0.35rem 0 $grass, // 5rem -1.5rem 0 $grass; } &:after { width: 4.35rem; border: 0.75rem solid $none; border-bottom-color: $house2; border-left-width: 1rem; transform: translate3d(4.75rem, -3rem, 0) skewY(-3deg); } } & > x:nth-of-type(7) { width: 0.25rem; height: 1rem; background: $house2; transform: translate3d(18.5rem, 13.75rem, 0) skewY(-3deg); border-radius: 0.1rem; box-shadow: 0.1rem 0 0 $house2, // 0.5rem 0 0 $house2, // 2.5rem -0.15rem 0 $house2, // 3rem -0.15rem 0 -0.1rem $house2, // 3.25rem -0.15rem 0 -0.05rem $house2, // 3.75rem -0.1rem 0 0 $house2, // 3.75rem 0.25rem 0 0.15rem $house2; &:before { width: 4rem; height: 2.25rem; background: $house; transform: translate3d(0.25rem, 0.75rem, 0); box-shadow: -0.5rem 0 0 $grass, // -1rem 0.5rem 0 $grass; // } &:after { width: 0.25rem; height: 0.35rem; background: $house2; transform: translate3d(0.75rem, 0.75rem, 0); box-shadow: 1rem 0 0 $house2, // 2rem 0 0 $house2, // // 0rem 1rem 0 $house2, // 1rem 1rem 0 $house2, // 2rem 1rem 0 $house2, // // 0rem 1.75rem 0 $house2; // } } & > x:nth-of-type(3) { width: 19rem; height: 0.75rem; background: linear-gradient( to right, $house, $house2, $none, $beach2, $beach ); transform: translate3d(13rem, 17rem, 0) skewY(-3deg); box-shadow: 0 0.25rem 0.5rem $shadow, 0 0.25rem 1rem $shadow; border-radius: 0 0 0.75rem 0; &:before { width: 7rem; height: 7rem; border: 2rem solid $none; border-left: 5rem solid $grass4; transform: translate3d(-1rem, 0rem, 0) rotate(5deg); box-shadow: -1rem 0 0 $grass4; } &:after { width: 3rem; height: 2rem; background: linear-gradient($shadow, rgba($shadow, 0.2)); transform: translate3d(2rem, 0rem, 0) rotate(-45deg); border-radius: 0.5rem; box-shadow: -2rem -0.75rem 0.5rem rgba($shadow, 0.8); } } & > x:nth-of-type(8) { width: 0.5rem; height: 1.5rem; background: $house; transform: translate3d(21rem, 18.5rem, 0) skewY(-3deg) skewX(3deg); border-radius: 50% 50% 0 0; box-shadow: 0.6rem 0 0 $house, // 1rem 0 0 $house, // 1.4rem 0 0 $house; &:before { width: 1rem; height: 0.5rem; background: $house2; transform: translate3d(0.5rem, 0.5rem, 0); } &:after { width: 1.25rem; height: 1rem; background: $house2; transform: translate3d(1.9rem, 0.5rem, 0); } } & > x:nth-of-type(9) { border: 1.5em solid $none; border-bottom: 1rem solid $grass; transform: translate3d(22.5rem, 11.5rem, 0) skewY(-5deg); width: 4rem; box-shadow: 0 2.4rem 0 $grass; &:before { width: 0.25rem; height: 0.5rem; background: $grass; border-radius: 0.15rem; transform: translate3d(0, -0.3rem, 0); box-shadow: 1rem 0 0 $grass; } &:after { width: 0.75rem; height: 0.5rem; background: $house; opacity: 0.2; transform: translate3d(-0.5rem, 1rem, 0) rotate(65deg) skewX(45deg); box-shadow: 1rem -0.7rem 0 $house, // 1.7rem -0.2rem 0 $house, // 0.5rem 0.5rem 0 $house; // } } & > x:nth-of-type(10) { border: 1.5em solid $none; border-bottom: 1.2rem solid $grass; transform: translate3d(25rem, 11rem, 0) skewY(-5deg); width: 5rem; box-shadow: 0 2.4rem 0 $grass; &:before { width: 0.5rem; height: 4rem; background: $grass; border-radius: 0.15rem; transform: translate3d(0, -0.5rem, 0); box-shadow: 1rem 0 0 $grass, // -0.5rem 0 0 $grass, // -0.2rem -0.3rem 0 $grass; //; } &:after { width: 0.15rem; height: 0.75rem; opacity: 0.6; background: $house; transform: translate3d(-1rem, 1.25rem, 0); box-shadow: 1rem 0 0 $house, // 1rem 1rem 0 $house, // 0rem 1rem 0 $house, // -1rem 1rem 0 $house, // -2rem 1rem 0 $house, // -2.5rem 1rem 0 $house; //; } } & > x:nth-of-type(11) { width: 0.5rem; height: 1.5rem; background: $grass; border-radius: 0.15rem; transform: translate3d(30.75rem, 10.75rem, 0) skewY(-5deg); box-shadow: 1.8rem 0 0 $grass, // 2.2rem 0 0 $grass, // 2.4rem 0 0 $grass, // 1.9rem -0.2rem 0 $grass, // 2.4rem -0.2rem 0 $grass, // // -0.5rem 0 0 $grass, // -0.4rem -0.3rem 0 $grass, // 6.25rem 0.4rem 0 $grass, // 6.25rem 0rem 0 -0.1rem $grass, // 7.5rem 1.25rem 0 $grass; &:before { border: 2.5em solid $none; border-bottom: 1.5rem solid $house2; border-top-width: 4rem; transform: translate3d(-2.25rem, -3.5rem, 0); width: 7rem; box-shadow: 0 3.5rem 0 $grass; } &:after { width: 0.15rem; height: 0.75rem; opacity: 0.6; background: $house; transform: translate3d(-2rem, 2.25rem, 0); box-shadow: 0.4rem 0 0 $house, // 1rem 0 0 $house, // 1.5rem 0 0 $house, // 2.2rem 0 0 $house, // // 0 1rem 0 $house, // 1rem 1rem 0 $house, // 1.5rem 1rem 0 $house, // 2rem 1rem 0 $house, // // 0 2rem 0 $house, // 1rem 2rem 0 $house, // 2rem 2rem 0 $house; //; } } & > x:nth-of-type(12) { border: 2.3em solid $none; border-bottom: 1.5rem solid $shadow; border-top-width: 4rem; transform: translate3d(31.5rem, 6.9rem, 0) skewY(-5deg); width: 7.75rem; box-shadow: -0.25rem 3.5rem 0 $house2; &:before { height: 1.1rem; width: 3rem; transform: translate3d(-0.5rem, 0, 0) skewX(-50deg); background: $house; opacity: 0.8; box-shadow: 0 0.25rem 0.5rem $house; } &:after { width: 0.15rem; height: 0.75rem; opacity: 0.6; background: $house; transform: translate3d(-1rem, 1.75rem, 0); box-shadow: 0.4rem 0 0 $house, // 1rem 0 0 $house, // 1.5rem 0 0 $house, // 2.2rem 0 0 $house, // -1rem 0 0 $house, // // 0 1rem 0 $house, // 1rem 1rem 0 $house, // 1.5rem 1rem 0 $house, // 2rem 1rem 0 $house; //; } } & > x:nth-of-type(13) { width: 0.35rem; height: 0.75rem; background: $grass; transform: translate3d(36.5rem, 12.5rem, 0); box-shadow: 1.5rem 0 0 $grass, // 1.5rem 1rem 0 $grass, // 1.1rem 1rem 0 -0.1rem $grass, // 0 1rem 0 $grass, // 0 1.5rem 0 $grass; // &:before { height: 1.5rem; width: 17rem; transform: translate3d(-15rem, 2.5rem, 0) skewY(-2deg); background: $grass; border-radius: 100% 0.25rem 0 0; box-shadow: 0 0 0.25rem $shadow; } &:after { height: 1rem; width: 0.5rem; transform: translate3d(-0.5rem, 2.35rem, 0) skewY(-5deg); background: $house2; border-radius: 0.25rem; box-shadow: -0.5rem 0 0 $house2, // -1.6rem 0 0 $house2, // 1rem 0 0 rgba($house2, 0.5), // 1.5rem 0 0 rgba($house2, 0.2), // -2rem 0 0 rgba($house2, 0.5), // -2.5rem 0 0 $house2, // -2.9rem 0 0 rgba($house2, 0.9), // -3.5rem 0 0 rgba($house2, 0.5), // -3.9rem 0 0 -0.1rem rgba($house2, 0.2); } } & > x:nth-of-type(14) { border: 2.5em solid $none; border-bottom: 1rem solid $house2; transform: translate3d(29rem, 16.25rem, 0); width: 12rem; opacity: 0.5; &:before { height: 1rem; width: 0.25rem; background: $house; transform: translate3d(-0.75rem, 0, 0) skewX(-50deg); box-shadow: 0.35rem 0.25rem 0.1rem $shadow; } &:after { height: 2rem; width: 0.25rem; background: $sea1; transform: translate3d(0rem, -2rem, 0) skewX(-10deg); box-shadow: 0.35rem 0.25rem 0.1rem $shadow; } } } //light house & > x:nth-of-type(1) { & > x:nth-of-type(1) { background: $house; width: 2rem; height: 5rem; transform: translate3d(43.75rem, 8rem, 0) skewX(-3deg) skewY(-2deg); box-shadow: inset 0.25rem 0 0.25rem rgba($shadow, 0.5), // inset 0.75rem 0 0.75rem rgba($sun1, 0.1), // inset 0.5rem 0 0.5rem rgba($sun1, 0.1), // inset 0 1.25rem 0.5rem rgba($sun1, 0.1); &:before { background: $house; width: 1rem; height: 5rem; transform: translate3d(1.5rem, 0, 0) skewX(7deg); box-shadow: inset -0.1rem 0 0.1rem $sun1, // inset -0.5rem 0 0.5rem rgba($sun1, 0.1), // inset -0.25rem 1rem 0.5rem rgba($sun1, 0.1); } &:after { width: 0.4rem; height: 0.75rem; border-radius: 50% 50% 0 0; box-shadow: inset -0.25rem 0.25rem 0.5rem $shadow; transform: translate3d(1.3rem, 0.5rem, 0) skewX(3deg) skewY(2deg); opacity: 0.75; } } & > x:nth-of-type(2) { width: 3.25rem; height: 1.15rem; border-radius: 50%; border: 0.4rem solid $none; border-bottom-color: $house2; transform: translate3d(43.3rem, 7rem, 0) skewY(-3deg); box-shadow: 0 0.5rem 0.25rem -0.4rem $house2; &:before { width: 1.75rem; border: 0.15rem solid $none; border-bottom: 0.5rem solid $house2; transform: translate3d(0.3rem, -0.3rem, 0); } &:after { width: 1.5rem; height: 1.7rem; border-top: 0.15rem solid $house2; border-right: 0.25rem solid $house2; transform: translate3d(0.4rem, -1.5rem, 0); border-radius: 0.5rem 1rem 0.5rem 0.5rem / 0.5rem 0.5rem 0.5rem 0.5rem; box-shadow: inset 0.15rem -0.3rem 0 -0.15rem $house2; background: linear-gradient( to top right, rgba($house, 0.2), $none, $none ); } } & > x:nth-of-type(3) { width: 0.65rem; height: 0.5rem; border-radius: 0.25rem 0.3rem 0 0; background: $house2; transform: translate3d(44.5rem, 5.5rem, 0) skewY(-3deg); &:before { width: 0.35rem; height: 0.5rem; border-radius: 100% 0 0 0; background: $house2; transform: translate3d(0.4rem, 0.7rem, 0); } &:after { width: 1rem; height: 1rem; border-top: 0.35rem solid $house2; border-left: 0.5rem solid $house2; transform: translate3d(0.1rem, 1.1rem, 0); border-radius: 0.15rem; } } & > x:nth-of-type(4) { border: 1.25em solid $none; border-bottom: 1.25rem solid $shadow; transform: translate3d(42.75rem, 11.2rem, 0) skewY(-2deg); width: 5rem; box-shadow: 0 2rem 0 $shadow; &:before { width: 0.2rem; height: 1.25rem; background: $house2; transform: translate3d(3.5rem, -0.75rem, 0); border-radius: 0.1rem; box-shadow: 0.5rem 0.15rem 0 $house2, // 1rem 0rem 0 $house2; } } & > x:nth-of-type(5) { border: 1.25em solid $none; border-bottom: 1.25rem solid $shadow; transform: translate3d(37rem, 11rem, 0) skewY(-2deg); width: 9rem; box-shadow: 0 2rem 0 rgba($shadow, 0.2), 0 2rem 0 $house2; &:before { width: 0.4rem; height: 1rem; background: $shadow; border-radius: 0.1rem; transform: translate3d(4rem, -0.65rem, 0); box-shadow: 0.3rem 0 0 $shadow, // 0.1rem -0.3rem 0 -0.05rem $shadow, // 0.2rem -0.3rem 0 -0.05rem $shadow, // -2rem 0.1rem 0 -0.05rem $shadow, // 2rem 0.1rem 0 $shadow, // 2.3rem 0.1rem 0 $shadow, // 2.1rem -0.3rem 0 -0.05rem $shadow, // 2.2rem -0.3rem 0 -0.05rem $shadow; // } &:after { width: 0.5rem; height: 1.25rem; background: $house; border-radius: 0.2rem; transform: translate3d(1rem, 1.25rem, 0); opacity: 0.5; box-shadow: 0.5rem 0 0 $house, // 1.4rem 0 0 $house, // 1.9rem 0 0 $house, // 2.6rem 0 0 $house, // 3.6rem 0 0 $house, // 4rem 0 0 $house; // } } & > x:nth-of-type(6) { border: 1.25em solid $none; border-bottom: 1.25rem solid $shadow; transform: translate3d(46rem, 10.75rem, 0) skewY(-2deg); width: 5rem; box-shadow: 0 2rem 0 $shadow; &:before { width: 0.4rem; height: 1.25rem; background: $house2; transform: translate3d(-0.5rem, 0.75rem, 0); border-radius: 0.1rem; box-shadow: 0.3rem 0 0 $house2, // 1.25rem 0 0 $house2, // 1.6rem 0 0 $house2; } &:after { width: 2rem; height: 2rem; background: $shadow; transform: translate3d(-3.4rem, 1rem, 0) skewX(-5deg); border-radius: 0.1rem; box-shadow: 0 0 0.5rem $shadow; } } & > x:nth-of-type(7) { transform: translate3d(46rem, 14.75rem, 0) skewY(-2deg); width: 4rem; height: 1rem; background: $shadow; border-radius: 50% 50% 0 0; box-shadow: -1rem -0.5rem 0 $house2, // 1rem -0.5rem 0 $house2, // -0.1rem -0.1rem 0.1rem $lightsea, // -2rem -0.25rem 0 $shadow, // -2.1rem -0.26rem 0.1rem $lightsea, // -3rem -0.5rem 0 $house2, // -4rem -0.25rem 0 $shadow, // -4.1rem -0.26rem 0.1rem $lightsea, // -5rem -0.25rem 0 $house, // -6rem -0.5rem 0 $shadow, // -6rem -0.5rem 0.5rem $shadow, // -7rem -0.25rem 0 $house, // -7.5rem -0.5rem 0 $shadow, // -7.5rem -0.5rem 0.5rem $shadow; &:before { width: 3rem; height: 3rem; background: linear-gradient( to bottom right, $shadow, rgba($grass, 0.5) ); transform: translate3d(-1rem, 0.25rem, 0); border-radius: 50%; box-shadow: -1rem 1rem 0 -0.5rem $grass, // -2rem 2rem 0 -1rem $grass, // // -1rem -0.25rem 0 $grass5, // -2rem 0.75rem 0 -0.5rem $grass5, // -2.5rem 1.5rem 0 -1rem $grass5, // // -3rem 0 0 $grass5, // -5rem -0.2rem 0 $grass, // -6rem 1rem 0 -0.5rem $grass, // // -7rem -0.2rem 0 $grass5, // -8rem 1rem 0 -0.5rem $grass5; //; } &:after { width: 1.6rem; height: 0.5rem; background: $sun1; transform: translate3d(-5.4rem, -2.75rem, 0); border-radius: 0 0 0.5rem 0.5rem; box-shadow: -2rem 0 0 $sun1; opacity: 0.2; } } & > x:nth-of-type(8) { transform: translate3d(49.5rem, 4rem, 0) skewY(-3deg); width: 0.1rem; height: 2rem; border: 3rem solid $none; border-bottom: 1.5rem solid $house2; box-sizing: content-box; box-shadow: 0 5rem 0 $house; &:after { transform: translate3d(-0.5rem, -1.5rem, 0); width: 0.1rem; height: 2rem; border: 1.5rem solid $none; border-bottom-color: $grass; box-sizing: content-box; box-shadow: 0 5rem 0 $house2; } &:before { width: 0.5rem; height: 2rem; background: $house2; border-radius: 0.1rem; transform: translate3d(-0.5rem, 1.25rem, 0); box-shadow: 0.4rem 0 0 $house2, // 0.7rem 0.75rem 0 $house2, // 1rem 0.75rem 0 $house2, // 0.2rem -0.25rem 0 $house2, // // 1.5rem 0 0 $house2, // 1.5rem -0.5rem 0 -0.15rem $house2; // } } & > x:nth-of-type(9) { transform: translate3d(49.75rem, 9.75rem, 0) skewX(-20deg); width: 1rem; height: 0.75rem; background: $grass; box-shadow: 0.75rem -0.2rem 0 $grass, // 1.5rem -0.4rem 0 $grass; // &:before { width: 0.35rem; height: 1.5rem; background: $house3; border-radius: 50% 50% 0 0; transform: translate3d(0.25rem, 0.25rem, 0) skewX(20deg); box-shadow: 0.75rem -0.1rem 0 $house3, // 1.5rem -0.2rem 0 $house3, // 0 2rem 0 $house3, // 0.75rem 2rem 0 $house3; } &:after { } } & > x:nth-of-type(11) { background: $grass; width: 2.5rem; height: 5.5rem; transform: translate3d(53rem, 10rem, 0) skewY(-6deg); box-shadow: 6rem 0 0 $grass, // 4rem 0 0 $house3, // 2.4rem 0 0 $beach; &:after { width: 4.5rem; height: 1.6rem; transform: translate3d(0.9rem, -1.26rem, 0) skewY(-4deg) skewX(-60deg); background: linear-gradient( to top right, $house, $house2, $house, $house2, $house2, $house2 ); border-radius: 0.1rem; box-shadow: 0.5rem 0.5rem 0.5rem -0.5rem $shadow, 0.5rem 0.5rem 0.5rem -0.5rem $shadow; } &:before { width: 5rem; height: 1.7rem; transform: translate3d(4.9rem, -1.6rem, 0) skewY(-4deg) skewX(-60deg); background: linear-gradient(to top right, $house, $house2, $house); border-radius: 0.1rem; box-shadow: 0 0.5rem 0.5rem -0.5rem $shadow, 0.5rem 0.5rem 0.5rem -0.5rem $shadow; } } & > x:nth-of-type(10) { transform: translate3d(56rem, 7.5rem, 0); width: 1.75rem; height: 1.5rem; border: 0.15rem solid $none; border-top-color: $grass; box-shadow: inset 0 0 0 1rem $grass, // 3rem -0.5rem 0 $grass, // 7.5rem -1.1rem 0 $grass; border-radius: 0.1rem; &:after { width: 0.2rem; height: 1rem; background: $grass; border-radius: 0.1rem; transform: translate3d(0.15rem, -0.65rem, 0); box-shadow: 0.2rem 0 0 $grass, // 0.45rem 0 0 $grass, // 0.65rem 0 0 $grass, // 0.85rem 0 0 $grass, // // 3rem -0.5rem 0 $grass, // 3.2rem -0.5rem 0 $grass, // 3.45rem -0.5rem 0 $grass, // 3.65rem -0.5rem 0 $grass, // 3.85rem -0.5rem 0 $grass, // 4rem -0.5rem 0 $grass, // // 7.3rem -1rem 0 $grass, // 7.5rem -1rem 0 $grass, // 7.75rem -1rem 0 $grass, // 7.95rem -1rem 0 $grass, // 8.15rem -1rem 0 $grass, // 8.3rem -1rem 0 $grass; // } &:before { } } & > x:nth-of-type(12) { transform: translate3d(53.75rem, 10.7rem, 0) skewY(-4deg); width: 0.3rem; height: 0.8rem; background: $house; border-radius: 0.1rem; opacity: 0.8; box-shadow: 1rem -0.1rem 0 $house, // 2rem -0.2rem 0 $house, // 2.5rem -0.25rem 0 $house, // // 3.5rem -0.3rem 0 $house, // 4rem -0.35rem 0 $house, // // 5.5rem -0.3rem 0 $house, // 6.5rem -0.35rem 0 $house, // 5.6rem -0.5rem 0 $house, // 6.6rem -0.55rem 0 $house; &:before { transform: translate3d(-0.2rem, 1.2rem, 0); width: 0.3rem; height: 1rem; background: $grass; border-radius: 0.1rem; opacity: 0.8; box-shadow: -0.1rem 0.1rem 0 $house, // // 0.6rem -0.05rem 0 $grass, // 0.5rem 0.05rem 0 $house, // // 1.2rem -0.1rem 0 $grass, // 1.1rem 0rem 0 $house, // // 2.2rem -0.2rem 0 $grass, // 2.1rem 0rem 0 $house, // // 2.7rem -0.25rem 0 $grass, // 2.6rem -0.05rem 0 $house, // // 3.7rem -0.2rem 0 $grass, // // 4.4rem -0.25rem 0 $grass, // 4.5rem -0.15rem 0 $grass, // // 5.8rem -0.2rem 0 $house, // 5.9rem -0.25rem 0 $house, // // 6.5rem -0.3rem 0 $house, // 6.6rem -0.35rem 0 $house; //; } &:after { transform: translate3d(-0.2rem, 3rem, 0); width: 0.3rem; height: 1rem; background: $grass; border-radius: 0.1rem; opacity: 0.8; box-shadow: -0.1rem 0.1rem 0 $house, // // 0.6rem -0.05rem 0 $grass, // 0.5rem 0.05rem 0 $house, // // 1.2rem -0.1rem 0 $grass, // 1.1rem 0rem 0 $house, // // 2.2rem -0.2rem 0 $grass, // 2.1rem 0rem 0 $house, // // 2.7rem -0.25rem 0 $grass, // 2.6rem -0.05rem 0 $house, // // 3.7rem -0.2rem 0 $grass, // // 4.4rem -0.25rem 0 $grass, // 4.5rem -0.15rem 0 $grass, // // 5.8rem -0.2rem 0 $house, // 5.9rem -0.25rem 0 $house, // // 6.5rem -0.3rem 0 $house, // 6.6rem -0.35rem 0 $house; //; } } } } & > x:nth-of-type(1) { & > x:nth-of-type(2) { background: $grass; width: 16rem; height: 6rem; transform: translate3d(115.5rem, 53rem, 0) skewY(-6deg); &:before { background: $grass; width: 16rem; height: 6rem; transform: translate3d(0, 1rem, 0) skewY(6deg); } &:after { width: 15.5rem; height: 2rem; transform: translate3d(0.9rem, -1.7rem, 0) skewY(-1deg) skewX(-60deg); border-radius: 0.1rem; background: $shadow; box-shadow: 0 0.5rem 0.5rem -0.5rem $shadow, 0.5rem 0.5rem 0.5rem -0.5rem $shadow; } } & > x:nth-of-type(1) { transform: translate3d(125.5rem, 50rem, 0); width: 2rem; height: 1.5rem; border: 0.15rem solid $none; border-top: 0.25rem solid $shadow; box-shadow: inset 0 0 0 1rem $shadow, // 4.5rem -0.4rem 0 $shadow, // 7rem -1.1rem 0 $shadow; border-radius: 0.2rem; &:after { width: 0.2rem; height: 1rem; background: $shadow; border-radius: 0.1rem; transform: translate3d(0.15rem, -0.65rem, 0); box-shadow: 0.3rem 0.2rem 0 $shadow, // 0.6rem 0 0 $shadow, // 0.9rem 0 0 $shadow, // 1.2rem 0 0 $shadow, // // 6.8rem -1rem 0 $shadow, // 7.1rem -1rem 0 $shadow, // 7.4rem -1rem 0 $shadow, // 7.7rem -1.25rem 0 $shadow, // 8rem -1.25rem 0 $shadow, // 8.3rem -1.25rem 0 $shadow; // } } & > x:nth-of-type(3) { transform: translate3d(115.8rem, 55.75rem, 0) skewY(-6deg); width: 1.4rem; height: 4rem; background: $beach; border-radius: 0.2rem; border-top: 0.35rem solid $house2; opacity: 0.6; box-shadow: 3rem 0 0 $house, // 3rem 1rem 0 $house, // 3rem -1rem 0 rgba($house, 0.5), // 10rem 0.5rem 0 rgba($house, 0.75), // 10rem 2rem 0 rgba($house, 0.75); &:before { transform: translate3d(0.8rem, -2rem, 0); width: 0.5rem; height: 1.5rem; background: $house; border: 0.15rem solid $shadow; border-bottom-color: $house; border-right-color: $house; border-radius: 0.2rem; box-shadow: 0.9rem -0.1rem 0 -0.1rem $grass, 1rem 0 0 $house, // 2.8rem 0 0 rgba($house, 0.5), // 4.6rem -0.1rem 0 -0.1rem rgba($grass, 0.8), 4.8rem 0 0 -0.05rem $house, // 5.6rem -0.1rem 0 -0.1rem rgba($grass, 0.8), 5.8rem 0 0 -0.05rem $house, // // 0rem 1.9rem 0 -0.05rem $shadow, // 0rem 4rem 0 $shadow, // // 0.9rem 1.9rem 0 -0.1rem $grass, 1rem 2rem 0 $house, // 0.9rem 3.9rem 0 -0.1rem $grass, 1rem 4rem 0 $house, // // 2.4rem 2rem 0 -0.1rem $grass, // 2.4rem 4rem 0 -0.1rem $grass, // // 3rem 2.1rem 0 -0.05rem $grass, // 3rem 4.1rem 0 -0.05rem $grass; //; } &:after { width: 1.5rem; height: 0.25rem; background: $shadow; transform: translate3d(3rem, -0.4rem, 0) skewY(4deg); box-shadow: 0 1.9rem 0 $shadow, // 9.4rem -0.5rem 0 $house3, // 6.9rem -0.4rem 0 $house3; //; } } & > x:nth-of-type(4) { transform: translate3d(121rem, 55.75rem, 0) skewY(-4deg); width: 0.4rem; height: 1.4rem; background: $house; border-radius: 0.2rem; opacity: 0.3; box-shadow: 0.5rem 0 0 $house2, // 1.5rem 0 0 $house, // // 2.3rem 0.2rem 0 $house, // 3.6rem 0.2rem 0 -0.1rem $house, // 4.2rem 0.2rem 0 $house, // // 5rem 0.2rem 0 $house, // 5.8rem 0.2rem 0 $shadow, // 5.8rem 0.2rem 0 $shadow, // 5.8rem 0.2rem 0 $shadow, // 5.8rem 0.2rem 0 $shadow, // // -0.4rem 2rem 0 -0.1rem $house2, // 0 2rem 0 $house2, // 0.5rem 2rem 0 $house2, // 1.5rem 2rem 0 $house, // // 2.3rem 2.2rem 0 $house, // 3rem 2.6rem 0 0.1rem $house3, // 3rem 2.2rem 0 0.1rem $shadow, // 3.6rem 2.2rem 0 -0.1rem $house, // 4.2rem 2.2rem 0 $house, // // 5rem 2.2rem 0 $house, // 5.8rem 2.2rem 0 $shadow; &:before { transform: translate3d(-0.1rem, 1.2rem, 0); width: 0.5rem; height: 0.3rem; background: $house3; border-radius: 0.1rem; box-shadow: 0.5rem 0 0 $house3, // 1.5rem 0 0 $house3, // // 2.3rem 0.2rem 0 $house3, // 3rem 0.2rem 0 $house3, // 3.6rem 0.2rem 0 $house3, // 4.2rem 0.2rem 0 $house3, // // 5rem 0.2rem 0 $house3, // 5.8rem 0.4rem 0 $house3; // } &:after { transform: translate3d(2rem, -2.4rem, 0); width: 0.4rem; height: 1.1rem; background: $shadow; border-radius: 0.1rem; box-shadow: 0.3rem 0.3rem 0 $house, // // 0.8rem 0 0 $shadow, // 1.1rem 0.3rem 0 $house, // // 1.5rem 0 0 $shadow, // 1.8rem 0.3rem 0 $house, // // 2.2rem 0 0 $shadow, // 2.5rem 0.3rem 0 $house, // // 3rem 0 0 $shadow, // 3.3rem 0.3rem 0 $house, // // 3.6rem 0 0 $shadow, // 3.9rem 0.3rem 0 $house; //; } } & > x:nth-of-type(5) { transform: translate3d(127.65rem, 53.2rem, 0) skewY(-4deg); width: 0.4rem; height: 0.6rem; background: $house3; border-radius: 0.1rem; opacity: 0.9; box-shadow: 0 0.3rem 0 $house, // 0 0.5rem 0 $house3, // // 0.8rem 0rem 0 $house3, // 0.8rem 0.3rem 0 $house, // 0.8rem 0.5rem 0 $house3, // // 1.6rem 0rem 0 $house3, // 1.6rem 0.3rem 0 $house, // 1.6rem 0.5rem 0 $house3; &:before { transform: translate3d(0.7rem, 2.2rem, 0); width: 0.5rem; height: 0.7rem; background: $house3; border-radius: 0.1rem; opacity: 0.9; box-shadow: 0 0.6rem 0 $house2, // 0 0.9rem 0 $house3, // // -0.8rem 0rem 0 -0.1rem $house, // -0.8rem 0.6rem 0 -0.1rem $house2, // -0.8rem 0.9rem 0 -0.1rem $house, // // 0.8rem 0rem 0 $house, // 0.8rem 0.6rem 0 $house2, // 0.8rem 0.9rem 0 $house3, // // 0 2.5rem 0 $house2, // // -0.8rem 2.5rem 0 -0.1rem $house, // // 0.8rem 2.5rem 0 $house, // // -1.5rem 0rem 0 -0.1rem $house3, // -1.5rem 0.6rem 0 -0.1rem $shadow, // -1.5rem 0.7rem 0 -0.1rem $house2, // // -1.6rem 2.4rem 0 -0.1rem $shadow, // -1.6rem 3.1rem 0 -0.1rem $grass, // -1.6rem 3.3rem 0 -0.1rem $house2; //; } &:after { width: 8rem; height: 8rem; transform: translate3d(2.5rem, -0.4rem, 0) skewY(8deg) skewX(2deg); background: $side; border-radius: 0.2rem; } } & > x:nth-of-type(6) { transform: translate3d(130rem, 39.5rem, 0) skewY(-1deg) skewX(2deg); width: 1.7rem; height: 8rem; border: 2.75rem solid rgba(255, 255, 255, 0); border-bottom: 2rem solid $side; border-radius: 0.1rem; box-sizing: content-box; box-shadow: 0 8rem 0 $side; &:before { width: 3rem; height: 2rem; background: $grass3; border-radius: 1rem; transform: translate3d(-8rem, 16.5rem, 0); box-shadow: 2rem -0.5rem 0 $grass3, // 4rem 0.3rem 0 $grass3, // 0 2rem 0 2rem $shadow; } &:after { height: 0.35rem; width: 1.5rem; border-radius: 0.35rem 100% 0 0; background: $house; opacity: 0.9; transform: translate3d(-4.2rem, 17.2rem, 0) skewY(-4deg); box-shadow: 0.5rem 0.5rem 0 $house, // -0.5rem 0.2rem 0 $house2, // -0.3rem 0.1rem 0 $house2, // 0 0.5rem 0 rgba($sky1, 0.1); // } } //house roof & > x:nth-of-type(7) { transform: translate3d(131.75rem, 43rem, 0) skewY(-5deg) skewX(2deg); width: 4.5rem; height: 8rem; border: 0.75rem solid $none; border-bottom: 1rem solid $house4; border-radius: 0.1rem; box-sizing: content-box; box-shadow: 0 8rem 0 $house4, // 0 14rem 5rem $shadow, // 0 12rem 2rem $shadow; &:before { background: $house4; width: 3rem; height: 2rem; transform: translate3d(-0.1rem, 7.75rem, 0) skewX(-30deg) skewY(5deg); box-shadow: -0.25rem 0 0 $shadow, // -0.5rem 0 0 $house, // -0.65rem 0 0 $shadow, // inset 0 1.25rem 0 $house, // inset 0.2rem 0 0 $shadow; } &:after { background: $shadow; width: 3rem; height: 2rem; transform: translate3d(0.8rem, 7.6rem, 0) skewX(30deg) skewY(5deg); box-shadow: -0.25rem 0 0 $house; } } & > x:nth-of-type(8) { transform: translate3d(137rem, 49.25rem, 0) skewY(-1deg); width: 0.5rem; height: 2rem; background: $shadow; border-radius: 0.2rem; box-shadow: 0.4rem 0 0 $shadow, // 0.8rem 0 0 $shadow, // -0.2rem 0.4rem 0 $shadow, // -0.4rem 0.8rem 0 $shadow, // 0rem -0.5rem 0 -0.1rem $shadow, // 0.4rem -0.5rem 0 -0.1rem $shadow, // 0.8rem -0.5rem 0 -0.1rem $shadow; &:before { background: $house4; width: 3rem; height: 2.5rem; transform: translate3d(-1.45rem, 1.6rem, 0) skewX(-30deg); box-shadow: -0.25rem 0 0 $shadow, // -0.5rem 0 0 $house, // -0.65rem 0 0 $shadow, // inset 0 1.5rem 0 $house, // inset 0.25rem 0 0 $shadow; } &:after { background: linear-gradient(to right, $shadow, $grass); width: 5.5rem; height: 2.5rem; transform: translate3d(-0.2rem, 1.5rem, 0) skewX(35deg); box-shadow: -0.25rem 0 0 $house; } } & > x:nth-of-type(9) { transform: translate3d(132.75rem, 53rem, 0) skewY(-1deg) skewX(2deg); width: 0.75rem; height: 1rem; background: $house2; border-radius: 0.1rem; box-shadow: 0 0.25rem 0 $house, // 3rem -0.25rem 0 $house2, // 3rem 0 0 $house; // &:before { width: 2.5rem; height: 5rem; border-radius: 0.5rem; transform: translate3d(-1.25rem, 1.65rem, 0); background: $house4; box-shadow: inset -2rem 0 0 $grass, // 0.5rem 0 0.5rem $shadow, // // 3.25rem 0 0 $house4, // 3.75rem 0 0.5rem $shadow; //; } &:after { transform: translate3d(-1rem, 2.25rem, 0); width: 0.75rem; height: 1.5rem; background: $house2; border-radius: 0.1rem; box-shadow: 0 0.25rem 0 $house, // 3.15rem -0.15rem 0 $house2, // 3.15rem 0.15rem 0 $house, // // 1.25rem 0rem 0 -0.1rem $shadow, // 1.25rem 0.25rem 0 $house2, // 4.35rem -0.15rem 0 -0.1rem $shadow, // 4.35rem 0.15rem 0 $house2, // // 1.25rem 2.5rem 0 -0.1rem $shadow, // 1.25rem 2.75rem 0 $house2, // 4.35rem 2.35rem 0 -0.1rem $shadow, // 4.35rem 2.55rem 0 $house2, // // 0 2.5rem 0 $house2, // 3.15rem 2.35rem 0 $house2; // } } & > x:nth-of-type(10) { transform: translate3d(137.75rem, 53.1rem, 0) skewY(-1deg) skewX(2deg); width: 10rem; height: 10rem; background: $shadow; box-shadow: inset 0 0 1rem #000; &:before { width: 2.5rem; height: 0.25rem; border-radius: 0.1rem; transform: translate3d(-2.75rem, 1.5rem, 0); background: $house; box-shadow: 0 2.5rem 0 $house, // -3.5rem 2.65rem 0 $house, // -3.5rem 0.15rem 0 $house; opacity: 0.8; } &:after { background: $shadow; width: 6rem; height: 8rem; transform: translate3d(20rem, 2rem, 0) skewY(20deg); } } //here & > x:nth-of-type(11) { transform: translate3d(146.5rem, 49.6rem, 0) skewY(2deg) skewX(2deg); width: 0.2rem; height: 1rem; background: $shadow; box-shadow: 0.2rem 0 0 $shadow, // 0.4rem 0 0 $shadow, // 0.65rem 0 0 $shadow, // 0.9rem 0 0 $shadow, // 1.1rem 0 0 $shadow, // 1.4rem 0 0 $shadow, // 1.6rem 0 0 $shadow, // // 3.8rem 0 0 0.025rem $shadow, // 4.1rem 0.1rem 0 0.025rem $shadow, // 4.4rem 0.1rem 0 0.025rem $shadow, // // -5rem 0.8rem 0 0.025rem $shadow, // -5.3rem 0.8rem 0 0.025rem $shadow, // -5.6rem 0.7rem 0 0.025rem $shadow, // -5.9rem 0.8rem 0 0.025rem $shadow; border-radius: 0.1rem; &:before { transform: translate3d(-4.5rem, 0.5rem, 0) skewY(-6deg); width: 1.75rem; height: 3rem; border: 0.25rem solid $none; border-top: 0.25rem solid $shadow; border-radius: 0.3rem; box-shadow: inset 0 0 0 1rem $shadow, // 0 -0.75rem 0 -0.25rem $shadow, // 0 -1.35rem 0 -0.5rem $shadow; // } &:after { width: 20rem; height: 3.25rem; transform: translate3d(-7.3rem, 4rem, 0) skewY(-4deg); background: linear-gradient(to right, $house4, $shadow); box-shadow: 0 3rem 0 $shadow, 0 5.5rem 0 $shadow; border-radius: 0.2rem; } } & > x:nth-of-type(12) { transform: translate3d(146rem, 50.2rem, 0) skewY(2deg) skewX(2deg); width: 2.75rem; height: 2rem; box-shadow: inset -0.1rem 0 0.1rem rgba($sun1, 0.5), // inset 1rem 0 1rem rgba($shadow, 0.25), // inset 0.25rem 0 0 $house3, // inset 1rem 0 1rem rgba($shadow, 0.3), // inset 0 0 0 2rem $house3; border: 0.3rem solid $none; border-top: 0.3rem solid $house2; border-radius: 0.3rem; &:before { transform: translate3d(-6.15rem, 0.5rem, 0) skewY(2deg); width: 2.15rem; height: 2rem; box-shadow: inset 0 -1rem 1rem rgba($shadow, 0.25), // inset 0.25rem 0 0 $house3, // inset 1rem 0 1rem rgba($shadow, 0.25), // inset 0 0 0 2rem $house3; border: 0.3rem solid $none; border-top: 0.3rem solid $house2; border-radius: 0.3rem; } &:after { transform: translate3d(3.25rem, -0.25rem, 0) skewY(-2deg); width: 2rem; height: 2rem; box-shadow: inset 0 1rem 1rem rgba($shadow, 0.25), // inset 0 0 0 2rem $house3; border: 0.3rem solid $none; border-top: 0.3rem solid $house2; border-radius: 0.3rem; } } & > x:nth-of-type(13) { width: 3rem; height: 2.7rem; transform: translate3d(140rem, 51.5rem, 0) skewY(-4deg) skewX(-40deg); background: linear-gradient(to right top, $house2, $shadow); border-radius: 0.3rem; box-shadow: 0.5rem 0.3rem 0 $house2; &:before { background: $shadow; width: 3rem; height: 2.85rem; border-radius: 0.2rem; transform: translate3d(2.75rem, 0rem, 0) skewY(2deg) skewX(24deg); box-shadow: -0.25rem 0 0 $house, // -0.35rem 0 0 $shadow; } &:after { background: linear-gradient(rgba($sun1, 0.1), $shadow); width: 3rem; height: 2.85rem; border-radius: 0.1rem; transform: translate3d(3.9rem, 0.1rem, 0) skewY(2deg) skewX(51deg); box-shadow: -0.2rem 0 0 $house; } } & > x:nth-of-type(14) { width: 3rem; height: 3.1rem; transform: translate3d(145.2rem, 51.1rem, 0) skewY(0deg) skewX(-18deg); background: $shadow; border-radius: 0.2rem; box-shadow: -0.2rem 0 0 $house, // -0.3rem 0 0 $shadow; &:before { background: linear-gradient(rgba($sun1, 0.05), $shadow); width: 3rem; height: 2.85rem; border-radius: 0.1rem; transform: translate3d(1.1rem, 0.1rem, 0) skewX(38deg); box-shadow: -0.2rem 0 0 $house; } &:after { width: 4rem; height: 2.7rem; transform: translate3d(2.5rem, 0rem, 0) skewY(-4deg) skewX(-20deg); background: $shadow; border-radius: 0.2rem; box-shadow: 0.5rem 0.3rem 0 $house2, 2rem 0.3rem 0 darken($house2, 2%); } } & > x:nth-of-type(15) { transform: translate3d(148.25rem, 52rem, 0) skewY(-4deg); width: 1.5rem; height: 1rem; background: $house; border-radius: 0.2rem; box-shadow: inset 0.15rem 0.15rem 0 $house, // inset -0.15rem -0.15rem 0 $house, // inset 0 0 0.8rem $shadow; &:before { width: 1rem; height: 0.75rem; transform: translate3d(1.5rem, -0.5rem, 0) skewY(-50deg); background: $house2; border-radius: 0 100% 0 0; } &:after { width: 1.75rem; height: 0.65rem; transform: translate3d(0.5rem, -0.65rem, 0) skewX(-60deg); background: $shadow; border-radius: 0.1rem; box-shadow: inset 0 0.2rem 0.3rem rgba($sun1, 0.05); } } & > x:nth-of-type(16) { transform: translate3d(140rem, 52.5rem, 0) skewY(-4deg); width: 1.5rem; height: 1rem; background: $house; border-radius: 0.2rem; box-shadow: inset 0.15rem 0.15rem 0 $house, // inset -0.15rem -0.15rem 0 $house, // inset 0.1rem 0.1rem 0.8rem $shadow; &:before { width: 1rem; height: 0.75rem; transform: translate3d(1.5rem, -0.5rem, 0) skewY(-50deg); background: $shadow; border-radius: 0 100% 0 0; } &:after { width: 1.75rem; height: 0.65rem; transform: translate3d(0.5rem, -0.65rem, 0) skewX(-60deg); background: $house2; border-radius: 100% 0.1rem 0.1rem 0.1rem; box-shadow: inset 0 0.2rem 0.3rem rgba($sun1, 0.05); } } & > x:nth-of-type(17) { transform: translate3d(142.5rem, 54rem, 0) skewY(-4deg); width: 1.75rem; height: 3rem; background: $house; border-radius: 0.2rem 0.5rem 0.2rem 0.2rem; box-shadow: inset 0 0.2rem 0.2rem rgba($shadow, 0.8), // inset 0.15rem 0.15rem 0 $house, // inset -0.15rem -0.15rem 0 $house, // inset 0.1rem 0.1rem 0.8rem $shadow; &:before { transform: translate3d(0.15rem, 0.75rem, 0) skewY(-1deg); width: 1.45rem; height: 1.5rem; box-shadow: inset 0.15rem 0.15rem 0 $house, // inset -0.15rem -0.15rem 0 $house, // inset 0.15rem 0.1rem 0.5rem $shadow, // 0 0.2rem 0.2rem rgba($shadow, 0.8); // } &:after { transform: translate3d(3.5rem, 0.5rem, 0) skewY(-1deg); border-radius: 0.1rem; width: 1.45rem; height: 1.75rem; background: $house2; box-shadow: inset 0 0.25rem 0.5rem $shadow, // inset 0.25rem 0 0 rgba($shadow, 0.2), // inset 0.5rem 0 0 $house, // inset 1rem 0 0 rgba($shadow, 0.3), // inset 1.25rem 0 0 $house2; //; } } & > x:nth-of-type(18) { transform: translate3d(144.75rem, 53.75rem, 0) skewY(-4deg); width: 2rem; height: 3.15rem; border: 0.25rem solid $none; border-bottom-color: $house; border-top-color: rgba($house, 0.3); border-right-color: rgba($house, 0.5); border-radius: 0.15rem; box-shadow: inset 0.25rem 0 0 $house; opacity: 0.8; &:before { transform: translate3d(-0.25rem, 0.9rem, 0); width: 3rem; height: 0.25rem; background: linear-gradient(to right, $none, $none, $house3); opacity: 0.8; box-shadow: -0.5rem 1rem 0 rgba($house, 0.5); } &:after { transform: translate3d(0.5rem, -0.15rem, 0); width: 0.2rem; height: 3rem; background: $house; opacity: 0.2; box-shadow: 2rem 0 0 $house; } } & > x:nth-of-type(19) { transform: translate3d(140.5rem, 54.75rem, 0) skewY(-4deg); width: 1rem; height: 1rem; border-radius: 0.1rem; background: $house; box-shadow: inset -0.1rem -0.1rem 0 $house, // inset 0.1rem 0.1rem 0.5rem $shadow, // -0.2rem 0 0 rgba($shadow, 0.5), // -0.2rem 0.75rem 0 rgba($shadow, 0.5), // 0 0.75rem 0 $house2, // 0 -0.25rem 0 $shadow, // 0 1rem 0 $house; opacity: 0.8; &:before { transform: translate3d(8rem, 0.15rem, 0); width: 1rem; height: 1rem; border-radius: 0.1rem; background: $house; box-shadow: inset -0.1rem -0.1rem 0 $house, // inset 0.1rem 0.1rem 0.5rem $shadow, // -0.2rem 0 0 rgba($shadow, 0.5), // -0.2rem 0.75rem 0 rgba($shadow, 0.5), // 0 0.75rem 0 $house2, // 0 -0.25rem 0 $shadow, // 0 1rem 0 $house; opacity: 0.8; } } //door & > x:nth-of-type(20) { transform: translate3d(141.5rem, 58.25rem, 0) skewY(-4deg) skewX(1deg); width: 1rem; height: 2rem; background: $house2; box-shadow: -0.25rem 0 0 $shadow, // -0.5rem 0 0 $house2, // 0.25rem 0 0 $house, // inset 0 0 0.5rem $shadow; opacity: 0.8; &:before { transform: translate3d(-0.75rem, -0.5rem, 0); width: 1.5rem; height: 1rem; border-radius: 100% 100% 0 0; box-shadow: inset 0 0.25rem 0 $house, // 0.5rem 0 0 rgba($sun1, 0.1), // 0.5rem 0 0 rgba($shadow, 0.8); } &:after { transform: translate3d(1.5rem, -1rem, 0); width: 1.15rem; height: 2.5rem; background: $house; border-radius: 0.2rem; opacity: 0.8; box-shadow: inset 0.2rem 0.2rem 0 rgba($house3, 0.8), // inset -0.25rem -0.25rem 0 rgba($house3, 0.8), // inset 0.5rem 0.5rem 0 $house2, // inset 0.15rem 0.15rem 0.5rem $shadow, // 0.25rem 0 0 $house2; //; } } & > x:nth-of-type(21) { transform: translate3d(145rem, 57.5rem, 0) skewY(-3deg) skewX(1deg); width: 1.75rem; height: 2rem; background: linear-gradient(to bottom right, $grass, $house); opacity: 0.8; border-radius: 0.2rem; &:after { transform: translate3d(0.5rem, -0.5rem, 0); width: 1.15rem; height: 2.5rem; background: $house; border-radius: 0.2rem; opacity: 0.8; box-shadow: inset 0.2rem 0.2rem 0 rgba($house3, 0.8), // inset -0.25rem -0.25rem 0 rgba($house3, 0.8), // inset 0.5rem 0.5rem 0 $house2, // inset 0.15rem 0.15rem 0.5rem $shadow, // 0.25rem 0 0 $house2; //; } &:before { transform: translate3d(2.5rem, -0.25rem, 0) skewY(1deg); width: 4.5rem; height: 2.25rem; background: $house; border-radius: 0.2rem; opacity: 0.8; } } & > x:nth-of-type(22) { transform: translate3d(151.35rem, 58rem, 0) skewY(-3deg) skewX(1deg); width: 0.5rem; height: 1rem; background: $shadow; border-radius: 0.2rem; box-shadow: -0.65rem 0 0 $shadow, // -1.3rem 0 0 $shadow, // -2.75rem 0 0 rgba($grass, 0.5), // -2.4rem 0 0 rgba($grass, 0.3), // -2.75rem -1rem 0 rgba($grass, 0.8), // -2.4rem -1rem 0 rgba($grass, 0.5), // -5rem -1rem 0 rgba($grass, 0.5), // -4rem -1rem 0 rgba($grass, 0.5); &:before { transform: translate3d(-6.5rem, -0.25rem, 0); width: 7rem; height: 0.25rem; background: $house2; box-shadow: 0 0.15rem 0 $shadow, // 0 1rem 0 $shadow; opacity: 0.3; } &:after { transform: translate3d(1rem, -7.8rem, 0) skewX(20deg) skewY(3deg); background: $shadow; width: 4rem; height: 1rem; border-radius: 0.2rem 0.2rem 0 0; } } & > x:nth-of-type(23) { transform: translate3d(154rem, 47.5rem, 0); width: 0.15rem; height: 2rem; background: $grass; border-radius: 0.1rem; &:before { transform: translate3d(-1.825rem, 1.75rem, 0) rotate(50deg) skewX(10deg); width: 3.75rem; height: 3.75rem; background: linear-gradient( to top right, $none, $none 50%, rgba($sun1, 0.03) 50% ) $shadow; border-radius: 0.3rem; } &:after { transform: translate3d(-2.65rem, 3.5rem, 0); width: 5.15rem; height: 10rem; box-shadow: inset 0 0 0 3rem $shadow; border: 0.3rem solid $none; border-top-color: $house4; border-radius: 0.2rem; } } & > x:nth-of-type(24) { transform: translate3d(151.6rem, 49.5rem, 0) skewX(-2deg); border: 0.5rem solid $none; border-bottom: 1rem solid $house2; &:before { width: 0.5rem; height: 1.5rem; background: $house2; transform: translate3d(0.05rem, 1.25rem, 0) skewX(2deg); border-radius: 0.2rem; box-shadow: inset -0.15rem -0.15rem 0 $house, // -0.4rem 0 0 -0.1rem $house2, // -0.4rem 0 0 $house, // // 2.5rem 0 0 -0.1rem $house2, // 2.5rem 0 0 $house, // // 2.95rem 0 0 -0.1rem $house2, // 2.95rem 0 0 $house; //; } &:after { transform: translate3d(2.3rem, -0.65rem, 0) skewX(2deg); border: 0.6rem solid $none; border-bottom: 1rem solid $house2; } } & > x:nth-of-type(25) { transform: translate3d(157.4rem, 50rem, 0) skewX(0deg) skewY(-4deg); width: 2rem; border: 0.3rem solid $none; border-top: 0.5rem solid $house; height: 10rem; box-shadow: inset 0 0 0 2rem $house, 0 -1rem 0 -0.5rem $house2; border-radius: 0.4rem; &:before { transform: translate3d(-0.75rem, -7rem, 0) skewX(1deg) skewY(8deg); border: 0.9rem solid $none; border-left-width: 1rem; border-bottom: 2rem solid $house4; height: 9rem; box-shadow: 0 9rem 0 $house2, // -1rem 10.5rem 0 $house2; } &:after { width: 0.5rem; height: 1.5rem; background: $house2; transform: translate3d(-4rem, 3.5rem, 0) skewX(2deg) skewY(4deg); border-radius: 0.2rem; box-shadow: inset -0.15rem -0.15rem 0 $house, // -0.4rem 0 0 -0.1rem $house2, // -0.4rem 0 0 $house; //; } } & > x:nth-of-type(26) { transform: translate3d(156rem, 50.65rem, 0) skewX(-20deg) skewY(-4deg); width: 1.5rem; height: 3rem; border-radius: 0.1rem; background: $shadow; &:after { transform: translate3d(-1rem, 1rem, 0) skewX(20deg) skewY(10deg); border: 3.5rem solid $none; border-bottom: 3rem solid $house2; height: 5rem; box-shadow: 0 5rem 0 $house2; } &:before { transform: translate3d(-4.6rem, 6rem, 0) skewX(-55deg) skewY(2deg); width: 5rem; height: 0.75rem; background: linear-gradient(to right, $shadow, $house4); box-shadow: 1rem 0.25rem 0 $house4, 2rem 0.75rem 0.75rem $shadow; } } & > x:nth-of-type(27) { transform: translate3d(155rem, 58rem, 0) skewY(-7deg); width: 0.75rem; height: 5rem; border-radius: 0.5rem; background: $shadow; box-shadow: 0.25rem 0 0 rgba($shadow, 0.5), // 0.15rem -0.15rem 0 $house, // 0.15rem -0.5rem 0 rgba($shadow, 0.7); opacity: 0.7; &:before { transform: translate3d(1.25rem, 0rem, 0) skewY(11deg); width: 0.6rem; height: 1rem; border-radius: 0.1rem; background: $house2; box-shadow: 0 -0.15rem 0 $house, // 0 -0.25rem 0 $house4, // 0 0.75rem 0 $house4, // 0 0.9rem 0 $house, // 0 1.25rem 0 rgba($house4, 0.7), // inset -0.15rem 0.15rem 0 $house4, // // 0 -3.5rem 0 -0.2rem rgba($shadow, 0.2), // 0 -3rem 0 -0.2rem rgba($shadow, 0.2), // 0 -3.5rem 0 $house4, // 0 -3rem 0 rgba($shadow, 0.5), // 0 -3.65rem 0 $house, // 0 -3.8rem 0 $house4, // 0 -3.35rem 0 $house, // 0 -3.2rem 0 rgba($house4, 0.7); // } &:after { transform: translate3d(2.75rem, 0.25rem, 0) skewY(11deg); width: 0.65rem; height: 1rem; border-radius: 0.1rem; background: $house2; box-shadow: 0 -0.15rem 0 $house, // 0 -0.25rem 0 $house4, // 0 1rem 0 $house4, // 0 0.15rem 0 $house, // 0 0.35rem 0 rgba($house4, 0.7), // inset -0.15rem 0.15rem 0 $house4, // // 0 -3.5rem 0 $house4, // 0 -2.5rem 0 $shadow, // 0 -3.65rem 0 $house, // 0 -3.8rem 0 $house4, // 0 -2.35rem 0 $house, // 0 -2.2rem 0 rgba($house4, 0.7); // } } } & > x:nth-of-type(3) { & > x:nth-of-type(1) { width: 3rem; height: 2rem; transform: translate3d(104.25rem, 58.5rem, 0) skewY(2deg); background: $shadow; border-radius: 1rem; box-shadow: 5rem 0.25rem 0 $shadow, // 7rem 0rem 0.5rem $shadow, // 9rem 0.25rem 0.5rem $shadow, // 12rem 0.5rem 0.5rem $shadow, // 14rem 0.75rem 0.5rem $shadow, // 16rem 0.25rem 0.5rem $shadow, // 18rem 0.5rem 0.5rem $shadow; &:after { width: 30rem; height: 5rem; transform: translate3d(-1rem, 1rem, 0); background: $shadow; border-radius: 0 0 0 100%; } &:before { width: 3rem; height: 2rem; transform: translate3d(27rem, 0rem, 0) skewY(2deg); background: $shadow; border-radius: 1rem; box-shadow: 0rem -0.5rem 0.5rem $shadow, // 2rem -0.25rem 0.5rem $shadow, // 4rem -1rem 0.75rem $shadow, // 6rem -1.5rem 0.75rem $shadow, // 9rem -0.75rem 0.25rem $shadow, // 11rem -0.75rem 0.5rem $shadow, // 13rem -0.75rem 0.5rem $shadow, // 15rem -0.5rem 0.5rem $shadow, // 21rem -0.75rem 0.5rem $shadow, // 22rem -0.75rem 0.5rem $shadow, // 25rem -0.75rem 0.5rem $shadow, // 29rem -1.5rem 0.5rem $shadow, // 28rem -0.75rem 0.5rem $shadow; //; } } & > x:nth-of-type(2) { transform: translate3d(125rem, 60.5rem, 0) skewY(0deg); width: 10rem; height: 0.15rem; background: $house; opacity: 0.5; box-shadow: 0 0.5rem 0 $house; &:before { transform: translate3d(-13rem, 1.75rem, 0) skewY(-28deg); width: 7rem; height: 0.15rem; background: $house; opacity: 0.8; box-shadow: 0 0.5rem 0 $house; } } & > x:nth-of-type(3) { transform: translate3d(135rem, 60.5rem, 0); width: 7rem; height: 3rem; background: $grass; border-radius: 2rem; box-shadow: 0 -0.15rem 0 $house; } &:after { width: 30rem; height: 6rem; transform: translate3d(102rem, 60.5rem, 0) skewY(2deg); background: linear-gradient(to bottom right, $grass5, $none); border-radius: 0 100% 0 100%; border: 0.5rem dashed $shadow; box-shadow: 0 -0.15rem 0 rgba($house, 0.5); } } & > x:nth-of-type(4) { width: 60rem; height: 20rem; transform: translate3d(112.5rem, 46rem, 0) skewY(2deg); overflow: hidden; &:before { width: 60rem; height: 4rem; transform: translate3d(3rem, 16rem, 0) skewX(-60deg) skewY(-1deg); background: $grass; box-shadow: inset 0 0 2rem $shadow; border-radius: 1rem; } &:after { width: 1rem; height: 2rem; transform: translate3d(5rem, 17rem, 0) skewY(-1deg); background: $grass2; border-radius: 50%; box-shadow: 0.5rem -1rem 0 $grass2, // 1.25rem -2rem 0 $grass2, // 1.75rem -2.5rem 0 $grass2; } & > x:nth-of-type(1), & > x:nth-of-type(2), & > x:nth-of-type(3), & > x:nth-of-type(4), & > x:nth-of-type(5), & > x:nth-of-type(6) { background: $grass2; border-radius: 50%; filter: blur(0.05rem); } & > x:nth-of-type(1) { width: 1rem; height: 2rem; transform: translate3d(6rem, 17.1rem, 0) skewY(-1deg); box-shadow: 0.5rem -1rem 0 $grass2, // 1.25rem -2rem 0 $grass2, // 1.75rem -2.4rem 0 -0.2rem $grass2, // 1rem 0.1rem 0 $grass2, // 1.5rem -0.8rem 0 -0.2rem $grass2, // 2.3rem -1.75rem 0 $grass2, // 2.7rem -2.3rem 0 -0.1rem $grass2; &:before { width: 1rem; height: 2rem; transform: translate3d(1.9rem, -0.2rem, 0) skewY(-1deg); background: $grass3; border-radius: 50%; box-shadow: 0.5rem -1rem 0 $grass2, // 1.25rem -2rem 0 0.1rem $grass3, // 1.75rem -2.4rem 0 $grass2, // 1rem 0.1rem 0 $grass3, // 1.5rem -0.8rem 0 -0.2rem $grass3, // 2.3rem -1.75rem 0 $grass2, // 2.7rem -2.3rem 0 -0.1rem $grass2; } &:after { width: 1.1rem; height: 1.9rem; transform: translate3d(4rem, -0.2rem, 0) skewY(-1deg); background: $grass3; border-radius: 50%; box-shadow: 0.5rem -1rem 0 $grass3, // 1.25rem -2rem 0 0.1rem $grass2, // 1.75rem -2.4rem 0 $grass2, // 1rem 0.1rem 0 $grass3, // 1.5rem -0.8rem 0 -0.2rem $grass3, // 2.3rem -1.75rem 0 $grass2, // 2.7rem -2rem 0 -0.1rem $grass2; } } & > x:nth-of-type(2) { width: 1rem; height: 2rem; transform: translate3d(15rem, 17rem, 0) skewY(-1deg); box-shadow: 0.75rem -1rem 0 $grass2, // 1.5rem -1.25rem 0 $grass3, // 2rem -1.7rem 0 -0.2rem rgba($grass2, 0.8), // 1rem 0.1rem 0 $grass2, // 2rem -0.8rem 0 -0.2rem $grass2, // 2.5rem -1.75rem 0 $grass2; &:before { width: 1rem; height: 2rem; transform: translate3d(2rem, 0.3rem, 0) skewY(-1deg); background: $grass2; border-radius: 50%; box-shadow: 0.75rem -1rem 0 $grass2, // 1.5rem -1.25rem 0 $grass3, // 2rem -1.7rem 0 -0.2rem rgba($grass2, 0.8), // 1rem -0.5rem 0 $grass2, // 2rem -0.8rem 0 -0.2rem $grass2, // 2.5rem -1.75rem 0 $grass2; } &:after { width: 1.1rem; height: 1.9rem; transform: translate3d(4rem, -0.6rem, 0) skewY(-1deg); background: $grass3; border-radius: 50%; box-shadow: 0.5rem -1rem 0 $grass3, // 1.25rem -2rem 0 0.1rem $grass2, // 1.75rem -2.4rem 0 $grass2, // 1rem 0.1rem 0 $grass3, // 1.5rem -0.8rem 0 -0.2rem $grass3, // 2.3rem -1.75rem 0 $grass3, // 2.7rem -2rem 0 -0.1rem $grass2; } } & > x:nth-of-type(3) { width: 1rem; height: 2rem; transform: translate3d(21.5rem, 17rem, 0) skewY(-1deg); box-shadow: 0.75rem -0.5rem 0 $grass2, // 1.5rem -1.1rem 0 $grass3, // 2rem -1.6rem 0 0 $grass2, // 0.5rem -1.5rem 0 0 $grass2, // 1rem -2.1rem 0 0 $grass2, // 1.5rem -2.5rem 0 0 $grass2; &:before { width: 1rem; height: 2rem; transform: translate3d(4rem, 0rem, 0) skewY(-1deg); background: $grass2; border-radius: 50%; box-shadow: 1rem -0.5rem 0 $grass2, // 1.6rem -1rem 0 $grass3, // 2.1rem -1.5rem 0 0 $grass3, // 0.6rem -1.6rem 0 -0.1rem $grass2, // 1.1rem -2rem 0 0 $grass2, // 1.5rem -2.4rem 0 -0.2rem $grass2; // } &:after { width: 1rem; height: 2rem; transform: translate3d(6rem, -1rem, 0) skewY(2deg); background: $grass3; border-radius: 50%; box-shadow: 0.75rem -0.5rem 0 $grass3, // 1.5rem -1.1rem 0 $grass3, // 2.2rem -1.6rem 0 0 $grass3, // 0.6rem -1.5rem 0 0 $grass3, // 1.3rem -2.1rem 0 0 $grass2, // 1.6rem -2.5rem 0 -0.2rem $grass2; // } } & > x:nth-of-type(4) { width: 1rem; height: 2rem; transform: translate3d(27rem, 17.5rem, 0) skewY(-1deg); box-shadow: 0.75rem -0.5rem 0 $grass2, // 1.5rem -1.1rem 0 $grass3, // 2rem -1.6rem 0 0 $grass2, // 2.6rem -2rem 0 0 $grass3, // 3rem -2.5rem 0 0 $grass2, // 3.5rem -2.4rem 0 0 $grass3, // 4rem -3.1rem 0 0 $grass2, // 1.75rem -0.4rem 0 $grass2, // 2.5rem -1.3rem 0 $grass3, // 3rem -1.5rem 0 0 $grass2, // 3.6rem -1.9rem 0 0 $grass3, // 4rem -2.3rem 0 0 $grass2, // 4.5rem -3rem 0 0 $grass3, // 5rem -3.5rem 0 0 $grass2; &:before { width: 1rem; height: 2rem; transform: translate3d(2rem, 0.1rem, 0) skewY(-1deg); background: $grass2; border-radius: 50%; box-shadow: 0.75rem -0.5rem 0 $grass2, // 1.5rem -1.1rem 0 $grass3, // 2rem -1.6rem 0 0 $grass2, // 2.6rem -2rem 0 0 $grass3, // 3rem -2.5rem 0 0 $grass2, // 3.5rem -2.4rem 0 0 $grass3, // 4rem -3.1rem 0 0 $grass2, // 1.75rem -0.4rem 0 $grass2, // 2.5rem -1.3rem 0 $grass3, // 3rem -1.5rem 0 0 $grass2, // 3.6rem -1.9rem 0 0 $grass3, // 4rem -2.3rem 0 0 $grass2, // 4.5rem -3rem 0 0 $grass3, // 5rem -3.5rem 0 0 $grass2; //; } &:after { width: 1rem; height: 2rem; transform: translate3d(4rem, 0.3rem, 0) skewY(-1deg); background: $grass2; border-radius: 50%; box-shadow: 0.75rem -0.5rem 0 $grass2, // 1.5rem -1.1rem 0 $grass3, // 2rem -1.6rem 0 0 $grass2, // 2.6rem -2rem 0 0 $grass3, // 3rem -2.5rem 0 0 $grass2, // 3.5rem -2.4rem 0 0 $grass3, // 4rem -3.1rem 0 0 $grass3, // 1.75rem -0.4rem 0 $grass2, // 2.5rem -1.3rem 0 $grass3, // 3rem -1.5rem 0 0 $grass3, // 3.6rem -1.9rem 0 0 $grass3, // 4rem -2.3rem 0 0 $grass3, // 4.5rem -3rem 0 0 $grass3, // 5rem -3.2rem 0 0 $grass2; //; } } & > x:nth-of-type(5) { width: 1rem; height: 2rem; transform: translate3d(39rem, 17.5rem, 0) skewY(-1deg); box-shadow: 0.75rem -0.5rem 0 $grass2, // 1.5rem -1.1rem 0 $grass3, // 2rem -1.6rem 0 0 $grass2, // 2.6rem -2rem 0 0 $grass3, // 3rem -2.5rem 0 0 $grass2, // 3.5rem -2.4rem 0 0 $grass3, // 4rem -3.1rem 0 0 $grass2, // 1.75rem -0.4rem 0 $grass2, // 2.5rem -1.3rem 0 $grass3, // 3rem -1.5rem 0 0 $grass2, // 3.6rem -1.9rem 0 0 $grass3, // 4rem -2.3rem 0 0 $grass2, // 4.5rem -3rem 0 0 $grass3, // 5rem -3.5rem 0 0 $grass2; &:before { width: 1rem; height: 2rem; transform: translate3d(2rem, 0.1rem, 0) skewY(-1deg); background: $grass2; border-radius: 50%; box-shadow: 0.75rem -0.5rem 0 $grass2, // 1.5rem -1.1rem 0 $grass3, // 2rem -1.6rem 0 0 $grass2, // 2.6rem -2rem 0 0 $grass3, // 3rem -2.5rem 0 0 $grass2, // 3.5rem -2.4rem 0 0 $grass3, // 4rem -3.1rem 0 0 $grass2, // 1.75rem -0.4rem 0 $grass2, // 2.5rem -1.3rem 0 $grass3, // 3rem -1.5rem 0 0 $grass2, // 3.6rem -1.9rem 0 0 $grass3, // 4rem -2.3rem 0 0 $grass2, // 4.5rem -3rem 0 0 $grass3, // 5rem -3.5rem 0 0 $grass2; //; } &:after { width: 1rem; height: 2rem; transform: translate3d(4rem, 0.3rem, 0) skewY(-1deg); background: $grass2; border-radius: 50%; box-shadow: 0.75rem -0.5rem 0 $grass2, // 1.5rem -1.1rem 0 $grass3, // 2rem -1.6rem 0 0 $grass2, // 2.6rem -2rem 0 0 $grass3, // 3rem -2.5rem 0 0 $grass2, // 3.5rem -2.4rem 0 0 $grass3, // 4rem -3.1rem 0 0 $grass3, // 1.75rem -0.4rem 0 $grass2, // 2.5rem -1.3rem 0 $grass3, // 3rem -1.5rem 0 0 $grass3, // 3.6rem -1.9rem 0 0 $grass3, // 4rem -2.3rem 0 0 $grass3, // 4.5rem -3rem 0 0 $grass3, // 5rem -3.2rem 0 0 $grass2; //; } } & > x:nth-of-type(6) { width: 1rem; height: 2rem; transform: translate3d(34rem, 16.5rem, 0) skewY(-1deg); box-shadow: 0.75rem -0.3rem 0 $grass2, // 1.35rem -0.7rem 0 $grass3, // 2rem -1.5rem 0 $grass3, // 1.75rem -0.3rem 0 $grass3, // 2.35rem -0.7rem 0 $grass3, // 3rem -1.5rem 0 $grass3; &:before { opacity: 0.5; width: 1rem; height: 0.5rem; transform: translate3d(-26rem, 2rem, 0) skewX(-30deg); background: $shadow; border-radius: 50%; box-shadow: 0.75rem -0.2rem 0 $shadow, // 1.75rem -0.7rem 0 $shadow, // 2.5rem -0.2rem 0 $shadow, // 2.75rem -1rem 0 $shadow, // 3.75rem -0.1rem 0 $shadow, // 4.75rem -0.7rem 0 $shadow, // 5.5rem -0.2rem 0 $shadow, // 4.25rem -1.2rem 0 $shadow, // 3.75rem -2rem 0 $shadow, // 4.5rem -2.5rem 0 $shadow; //; } &:after { width: 1rem; height: 2rem; transform: translate3d(-15rem, -1rem, 0) skewY(4deg); background: $grass3; border-radius: 50%; box-shadow: 0.75rem -0.3rem 0 $grass2, // 1.35rem -0.7rem 0 $grass3, // 2rem -1.5rem 0 $grass2, // 1.75rem -0.3rem 0 $grass2, // 2.35rem -0.7rem 0 $grass3, // 3rem -1.5rem 0 $grass3; } } & > x:nth-of-type(7) { opacity: 0.5; width: 1rem; height: 0.5rem; transform: translate3d(19.5rem, 19rem, 0) skewX(-30deg); background: $shadow; border-radius: 50%; box-shadow: -0.75rem -0.2rem 0 $shadow, // 1.75rem -0.7rem 0 $shadow, // 2.5rem -0.2rem 0 $shadow, // 2.75rem -1rem 0 $shadow, // 3.75rem -0.1rem 0 $shadow, // 4.75rem -0.7rem 0 $shadow, // 5.5rem -0.2rem 0 $shadow, // 4.25rem -1.2rem 0 $shadow, // 3.75rem -2rem 0 $shadow, // 4.5rem -2.5rem 0 $shadow; &:before { width: 1rem; height: 0.5rem; transform: translate3d(12rem, 0rem, 0) skewX(-30deg); background: $shadow; border-radius: 50%; box-shadow: 0.75rem -0.2rem 0 $shadow, // 1.75rem -0.7rem 0 $shadow, // 2.5rem -0.2rem 0 $shadow, // 2.75rem -1rem 0 $shadow, // 3.75rem -0.1rem 0 $shadow, // 4.75rem -0.7rem 0 $shadow, // 5.5rem -0.2rem 0 $shadow, // 4.25rem -1.2rem 0 $shadow, // 3.75rem -2rem 0 $shadow, // 4.5rem -2.5rem 0 $shadow; } &:after { width: 20rem; height: 0.15rem; background: linear-gradient( to right, $beach, rgba($beach, 0.5), $beach ); transform: translate3d(9rem, 0, 0) skewY(-1.5deg); box-shadow: 0 0.5rem 0 $beach; opacity: 0.5; } } } & > x:nth-of-type(5) { width: 50rem; height: 50rem; transform: translate3d(70rem, 23rem, 0); border-radius: 50%; background: radial-gradient($none, $sun3 20%, $none, $none); filter: blur(1rem); opacity: 0.3; &:before { width: 13rem; height: 13rem; transform: translate3d(19rem, 19rem, 0); border-radius: 50%; background: $light; box-shadow: -2rem -10rem 0 8rem rgba($sky2, 0.2), // -20rem -30rem 0 12rem rgba($light, 0.2); //; } &:after { width: 70rem; height: 2rem; border-radius: 50%; transform: translate3d(-11rem, 25rem, 0) rotate(-50deg); background: linear-gradient( to right, $sun1, $sun1 24%, $red 25%, $red 35%, $green2 36%, #fff 45%, $sun1 ); } } } seasun { transform: translate3d(74rem, 63.5rem, 0) skewY(1deg) rotateX(52deg); width: 50rem; height: 50rem; &:before { transform: translate3d(19.5rem, -0.5rem, 0); width: 7.5rem; height: 6rem; background: $sky2; border-radius: 50%; opacity: 0.75; box-shadow: // 0 0 1rem $sky2, // // circle2 0.5rem 3rem 1rem -1rem $sky2, // // circle3 0.5rem 6rem 1rem 0.5rem $sky2, // //4 0 8rem 1rem -0.5rem $sky2, // //35 1rem 10rem 1rem -1rem $sky2, // //5 -0.5rem 12rem 1rem -0.7rem $sky2, // //6 0 22rem 1rem -1rem $sky2; // } &:after { transform: translate3d(20rem, 0, 0); width: 6.5rem; height: 5rem; background: $light; border-radius: 50%; box-shadow: 0 0 1rem $light, // // circle22 0.5rem 3rem 0 -1rem $light, // 0.5rem 3rem 1rem -1rem $light, // // circle2 0.5rem 6rem 0 0.5rem $light, // 0.5rem 6rem 1rem 0.5rem $light, // //3 0 8rem 0 -0.5rem $light, // 0 8rem 1rem -0.5rem $light, // //35 1rem 10rem 0 -1.5rem $light, // 1rem 10rem 1rem -1.5rem $light, // //4 -0.5rem 12rem 0 -1.25rem $light, // -0.5rem 12rem 1rem -1.25rem $light, // //5 0 22rem 0 -1rem $light, // 0 22rem 1rem -1rem $light; } & > x:nth-of-type(4), & > x:nth-of-type(2), & > x:nth-of-type(3) { transform-origin: 50% 0; transform: translate3d(21rem, 1rem, 0) skewX(-2deg); & > x:nth-of-type(1) { transform: translate3d(1rem, 8rem, 0) scaleY(0.6); } & > x:nth-of-type(2) { transform: translate3d(-1rem, 15rem, 0) scaleY(0.7); } & > x:nth-of-type(3) { transform: translate3d(3rem, 19rem, 0) scaleY(0.8); } & > x:nth-of-type(4) { transform: translate3d(-2rem, 24rem, 0) scaleY(0.9); } & > x:nth-of-type(5) { transform: translate3d(-1rem, 28rem, 0) scaleY(1); } & > x:nth-of-type(6) { transform: translate3d(-2.5rem, 32rem, 0) scaleY(1.1); } &, *, *:before, *:after { color: $light; background: currentColor; border-radius: 0 0 100% 100%; width: 2rem; height: 0.3rem; } &, *:before, *:after, * { box-shadow: 1.5rem 0 0.15rem currentColor, // // 6.2rem 2rem 0.25rem currentColor, // 2.4rem 2.2rem 0 currentColor, // 4rem 2.9rem 0.15rem currentColor, // // -0.5rem 4.2rem 0.25rem currentColor, // 1.5rem 5rem 0.15rem currentColor, // 2.75rem 4.5rem 0 currentColor, // // 5.7rem 7.3rem 0.25rem currentColor, // 0.75rem 6.1rem 0 currentColor, // 3.5rem 6.6rem 0.15rem currentColor, // // 8rem 8.4rem 0.15rem currentColor, // 2.5rem 8.3rem 0.25rem currentColor, // 2.2rem 9.1rem 0 currentColor; // //; } *:before { transform: translate3d(-4rem, 1rem, 0) skewY(5deg); color: $sun2; } *:after { transform: translate3d(3rem, -1rem, 0) skewY(-5deg); color: $sun2; } } & > x:nth-of-type(2) { transform: translate3d(27rem, 2rem, 0) scaleX(-1) skewX(10deg); &, *, *:before, *:after { color: $sky2; width: 1rem; height: 0.5rem; } } & > x:nth-of-type(4) { transform: translate3d(19rem, -1rem, 0); &, *, *:before, *:after { color: $sun3; width: 2rem; height: 0.2rem; } } & > x:nth-of-type(5) { transform: translate3d(20rem, 16rem, 0); &, &:before, &:after { color: $light; width: 5rem; height: 1rem; background: currentColor; border-radius: 50%; box-shadow: // 0 0 1rem currentColor, // 0 1rem 0 -0.25rem currentColor, // 0 1rem 1rem -0.25rem currentColor, // -1rem 2rem 0 currentColor, // -1rem 2rem 1rem currentColor, // 1rem 3rem 0 0.15rem currentColor, // 1rem 3rem 1rem 0.15rem currentColor, // -1rem 5rem 0 0.15rem currentColor, // -1rem 5rem 1rem 0.15rem currentColor, // -1.5rem 11rem 0 0.2rem currentColor, // -1.5rem 11rem 1rem 0.2rem currentColor, // 1rem 13rem 0 -0.1rem currentColor, // 1rem 13rem 1rem -0.1rem currentColor, // -2rem 14rem 0 -0.1rem currentColor, // -2rem 14rem 1rem -0.1rem currentColor, // -2.5rem 15rem 0 0rem currentColor, // -2.5rem 15rem 1rem 0rem currentColor, // -1rem 17rem 0 0.2rem currentColor, // -1rem 17rem 1rem 0.2rem currentColor, // -3rem 20rem 0 0.15rem currentColor, // -3rem 20rem 1rem 0.15rem currentColor, // -1rem 22rem 0 0.1rem currentColor, // -1rem 22rem 1rem 0.1rem currentColor, // // -2rem -8rem 0 0.5rem currentColor, // 3rem -7.5rem 0 0.5rem currentColor, // -2rem -8rem 1rem 0.5rem currentColor, // 3rem -7.5rem 1rem 0.5rem currentColor, // // -2rem -13.25rem 0 currentColor, // 2rem -14.25rem 0 currentColor, // -2rem -13.25rem 1rem currentColor, // 2rem -14.25rem 1rem currentColor; //; } & { color: rgba($sky2, 0.8); width: 7rem; height: 1rem; } &:before { transform: translate3d(-1rem, 0, 0); color: $sky2; width: 9rem; height: 1.5rem; opacity: 0.5; } &:after { transform: translate3d(1rem, 0, 0); } } & > x:nth-of-type(1) { width: 30rem; border-radius: 50%; height: 50rem; background: linear-gradient(to right, $none, $none, $sun3, $none, $none); transform: translate3d(7rem, -1rem, 0) skewX(-4deg); opacity: 0.8; } } sky { height: 100%; width: 100%; & > x:nth-of-type(1) { &:after { width: 11rem; height: 11rem; border-radius: 50%; transform: translate3d(90rem, 42.5rem, 0); background: $light; box-shadow: 0 0 1rem $light, 0 0 2rem $light, 0 0 2rem $light; } & > x:nth-of-type(3) { width: 13rem; height: 1rem; background: $light; box-shadow: 0 0 1rem $light; border-radius: 50%; transform: translate3d(90rem, 52.5rem, 0) skewY(-5deg); &:before { width: 19rem; height: 2rem; background: $light; border-radius: 50%; transform: translate3d(-4rem, -4rem, 0) skewY(5deg); box-shadow: 0 0 1rem $light, // 0 1rem 0.5rem -0.5rem $light; } &:after { width: 16rem; height: 2rem; background: $light; border-radius: 50%; transform: translate3d(-2rem, -7rem, 0) skewY(3deg); box-shadow: 0 0 1rem $light, // 0 5rem 0.5rem -0.5rem $light, // 0 1rem 1rem -0.5rem $light; // } } & > x:nth-of-type(2) { width: 80rem; height: 10rem; border-radius: 50%; background: rgba($beach, 0.1); transform: translate3d(-20rem, 58rem, 0) skewY(-2deg) skewX(10deg); box-shadow: 0 0 1rem rgba($beach, 0.05), // -7rem -6rem 1rem rgba($beach, 0.1), // -9rem -12rem 1rem rgba($beach, 0.1), // 25rem -17rem 1rem rgba($beach, 0.1), // 10rem -12rem 1rem rgba($beach, 0.05), // 70rem -7rem 1rem rgba($beach, 0.08), // 140rem -9rem 1rem rgba($beach, 0.08), // // 50rem -22rem 1rem rgba($beach, 0.05), // 110rem -18rem 1rem rgba($beach, 0.05), // 130rem -25rem 1rem rgba($beach, 0.05), // // 5rem -25rem 1rem rgba($beach, 0.07), // 40rem -29rem 1rem rgba($beach, 0.05), // 100rem -20rem 1rem rgba($beach, 0.06), // 110rem -30rem 1rem rgba($beach, 0.05), // // -4rem -35rem 1rem rgba($beach, 0.08), // 60rem -37rem 1rem rgba($beach, 0.05), // 140rem -30rem 1rem rgba($beach, 0.06), // 150rem -40rem 1rem rgba($beach, 0.05), // // -10rem -45rem 1rem rgba($beach, 0.05), // 40rem -48rem 1rem rgba($beach, 0.05), // 110rem -42rem 1rem rgba($beach, 0.06), // 130rem -50rem 1rem rgba($beach, 0.05), // // -8rem -56rem 1rem rgba($beach, 0.07), // 50rem -58rem 1rem rgba($beach, 0.08), // 90rem -55rem 1rem rgba($beach, 0.07), // 120rem -64rem 1rem rgba($beach, 0.05); &:before { width: 40rem; height: 2rem; background: $sky2; border-radius: 60% 40%; transform: translate3d(45rem, 0, 0); opacity: 0.2; box-shadow: 0 0 1rem $sky2, // -30rem 0 1rem rgba($beach, 0.4), // 1rem 1rem 1rem rgba($beach, 0.5), // -33rem -2rem 1rem rgba($beach, 0.5), // -32rem -3rem 1rem $sky2, // 6rem -1rem 1rem rgba($beach, 0.5), // 5rem -2rem 1rem $sun3, // inset 0 1rem 1rem $sun3; //; } &:after { width: 70rem; height: 3rem; background: radial-gradient( rgba($light, 0.8) 40%, rgba($sky2, 0.5), $none ), $light; border-radius: 50%; transform: translate3d(85rem, -7rem, 0) skewY(-2deg); box-shadow: 0 0 1rem $sun2, // 0 0 2rem $sky2, // 0 0 1rem $sun2, // -30rem 0 1rem rgba($sun1, 0.2), // // -6rem 2.5rem 1rem -0.5rem rgba($light, 0.3), // -6rem 2.5rem 1rem -0.5rem $sky2, // // // -5rem -4rem 1rem -1.1rem rgba($light, 0.5), // -5rem -4rem 1rem rgba($sun2, 0.5); //; } } & > x:nth-of-type(1) { width: 30rem; height: 30rem; border-radius: 50%; transform: translate3d(83rem, 35rem, 0); background: radial-gradient($light, $light, $sun2, $none, $none, $none); &:before { width: 80rem; height: 2rem; transform: translate3d(-65rem, 15rem, 0) skewY(-4deg) skewX(10deg); background: linear-gradient(to right, $sky2, $light); border-radius: 50%; box-shadow: -1rem 0 1rem $sun2, // 10rem 0 1rem $light, // 80rem 0 1rem $sun2, // 85rem 2rem 1rem rgba($sun2, 0.5), // 85rem 4rem 1rem rgba($sun2, 0.2), // 30rem -1rem 2rem $light, // 32rem -2rem 2rem $sun2, // 40rem -4rem 2rem $light; //; } &:after { opacity: 0.25; width: 20rem; height: 0.5rem; border-radius: 50%; background: $sea1; transform: translate3d(-34rem, 22rem, 0) skewY(-2deg) skewX(20deg); box-shadow: -5rem -2rem 0.25rem $sea1, // -1rem -6rem 0.25rem $sea1, // 10rem -5.5rem 0.25rem $sea1, // 4rem -4rem 0.25rem $sea1, // -25rem -0.5rem 0.25rem $sea1, // // 10rem -3rem 0.25rem $sea1, // 20rem -1rem 0.25rem $sea1, // 25rem -0.5rem 0.25rem $sea1, // // 6rem -10rem 0.25rem $sea1, // 20rem -9rem 0.25rem $sea1, // 35rem -8.25rem 0.25rem $sea1, // // 21rem -4rem 0.25rem $sea1; // } } } & > x:nth-of-type(2) { // background & > x:nth-of-type(1) { opacity: 0.3; width: 20rem; height: 1rem; border-radius: 50%; transform: translate3d(20rem, 61.5rem, 0); background: $sea2; box-shadow: 15rem 0 0 $sea2; &:before { width: 4rem; height: 4rem; border-radius: 1rem; background: $sea2; transform: translate3d(9rem, -0.25rem, 0); box-shadow: -0.5rem -1.5rem 0 -1.25rem $sea2; } &:after { width: 0.5rem; height: 0.75rem; border-radius: 50% 50% 0 0; background: $sea2; transform: translate3d(11.5rem, -0.75rem, 0); } } //clouds & > x:nth-of-type(2), & > x:nth-of-type(3), & > x:nth-of-type(4), & > x:nth-of-type(5), & > x:nth-of-type(6), & > x:nth-of-type(7), & > x:nth-of-type(8), & > x:nth-of-type(9) { &, &:after, &:before { font-size: 1rem; filter: blur(0.2rem); color: $cloud; transform: translate3d(115em, 47em, 0) rotate(-5deg) skewX(-100deg); width: 10em; height: 1em; background: rgba($cloud, 0.3); border-radius: 50%; box-shadow: // 5em -1em 0.25em 2em currentColor, // 14em -0.5em 0.25em 1em currentColor, // 20em -0.25em 0.25em 0.5em currentColor, // 23em 0 0.25em currentColor, // // -1em 1em 0.25em 0.5em currentColor, // 5em 0.5em 0.25em 1em currentColor, // 15em 0em 0.25em currentColor, // 17em 0em 0.25em -0.5em currentColor; //; } &:before { transform: translate3d(25rem, -5rem, 0); height: 3em; } &:after { transform: translate3d(-40rem, -3rem, 0); font-size: 0.75rem; width: 20em; opacity: 0.7; } } & > x:nth-of-type(3) { transform: translate3d(80rem, 43rem, 0) rotate(-5deg) skewX(-100deg); width: 5rem; } & > x:nth-of-type(4) { transform: translate3d(138rem, 38rem, 0) rotate(-5deg) skewX(-100deg); width: 5rem; height: 3rem; } & > x:nth-of-type(5) { transform: translate3d(60rem, 39rem, 0) rotate(-5deg) skewX(-100deg); &, &:after, &:before { width: 10rem; height: 3rem; color: darken($cloud, 5%); } } & > x:nth-of-type(6) { transform: translate3d(-15rem, 50rem, 0) rotate(-5deg) skewX(-100deg); &, &:after, &:before { width: 20rem; height: 1rem; color: darken($cloud, 15%); } &:before { transform: translate3d(25rem, 0, 0); } } & > x:nth-of-type(7) { transform: translate3d(60rem, 30rem, 0) rotate(-5deg) skewX(-100deg) scale(1.5); &, &:after, &:before { width: 30rem; height: 1rem; color: darken($cloud, 10%); } &:before { transform: translate3d(-31rem, -7rem, 0); } &:after { transform: translate3d(19rem, 4rem, 0); } } & > x:nth-of-type(8) { transform: translate3d(100rem, 20rem, 0) rotate(-5deg) skewX(-100deg) scale(2); &, &:after, &:before { width: 30rem; height: 1rem; color: darken($cloud, 5%); } &:before { transform: translate3d(-34rem, -6rem, 0); } &:after { transform: translate3d(20rem, -10rem, 0); } } & > x:nth-of-type(9) { transform: translate3d(116rem, 51rem, 0) rotate(-5deg) skewX(-100deg); &:before { transform: translate3d(-22rem, -9rem, 0); } } } } sig { &, * { height: 9.25em; overflow: hidden; border-radius: 0.5em; } font-size: 0.5rem; width: 10em; top: auto; left: auto; bottom: 1em; right: 1em; transform: skewX(10deg) scaleY(0.45) rotate(2deg); &:before, *:before { width: 5em; height: 5em; background: #000; transform: translate3d(-2.5em, 0, 0) rotate(-45deg); box-shadow: -3em 3em 0 0 #000; border-radius: 0.5em 2em 0.5em 2em; } * { width: 5em; transform: translate3d(3.75em, 0, 0) scaleY(0.95); &:before { transform: translate3d(-3em, -2em, 0) rotate(-45deg); box-shadow: -3em 3em 0 0 #000, -6em 6em 0 0 #000; border-radius: 0.5em; } } }

!