<landscape>
<sky>
<x>
<x></x>
<x></x>
<x></x>
</x>
<x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
</x>
</sky>
<sea>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
</sea>
<beach>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
</beach>
<groins>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
</x>
<x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
</x>
<x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
</x>
<x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
</x>
</groins>
<seasun>
<x></x>
<x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
</x>
<x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
</x>
<x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
</x>
<x></x>
</seasun>
<houses>
<x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
</x>
<x>
<x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
</x>
<x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
</x>
</x>
<x>
<x></x>
<x></x>
<x></x>
</x>
<x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
<x></x>
</x>
<x></x>
</houses>
<sig>
<x></x>
</sig>
</landscape>// 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;
}
}
}
// A Pure CSS Landscape
// No images, just CSS
// <- Choose your own sunset and change the light source
// www.instagram.com/ivorjetski
// twitter.com/ivorjetski
// The final part to my pointless trilogy
// Still Life = https://codepen.io/ivorjetski/pen/xMJoYO
// Portrait = https://codepen.io/ivorjetski/pen/dBYWWZ
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.