HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<grid></grid>
<grid></grid>
<grid></grid>
<landscape>
<flip>
<pyramid>
<p1>
<i>
<i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i>
</i>
<i>
<i>
<i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i>
</i>
</i>
</p1>
<g1></g1>
<g2></g2>
</pyramid>
</flip>
<litter>
<i></i><i></i><i></i><i></i><i></i>
<layer2>
<i></i>
<i></i>
<i></i>
</layer2>
<layer3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<lg1>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l3><i></i></l3>
</lg1>
<lg2>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l3><i></i></l3>
</lg2>
<lg25>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l3><i></i></l3>
</lg25>
<lg3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l3><i></i></l3>
</lg3>
<lg4>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l3><i></i></l3>
</lg4>
<lg5>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l3><i></i></l3>
</lg5>
<lg6>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l3><i></i></l3>
</lg6>
<lg7>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l3><i></i></l3>
</lg7>
</layer3>
</litter>
<flip>
<pyramid>
<p2>
<i>
<i>
<i>
<i>
<i>
<i></i><i></i><i></i>
</i>
</i>
<i>
<i>
<i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i>
</i>
</i>
</i>
<i>
<i>
<i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i>
</i>
<i>
<i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</i>
</i>
</i>
</i>
</p2>
</pyramid>
</flip>
<vacuum>
<thrust>
<i></i><i></i><i></i><i></i>
</thrust>
<leg1>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</leg1>
<leg2>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</leg2>
<leg3>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</leg3>
<leg4>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</leg4>
<llegb4>
<i></i><i></i>
</llegb4>
<llegb3>
<i></i><i></i><i></i>
</llegb3>
<llegb2>
<i></i><i></i>
</llegb2>
<llegb1>
<i></i><i></i> <i></i>
</llegb1>
<litter>
<layer4>
<i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i> <i></i>
</layer4>
<layer3>
<lg8>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
<l1><i></i></l1>
<l2><i></i></l2>
<l3><i></i></l3>
</lg8>
</layer3>
</litter>
<front-left><i></i><i></i><i></i></front-left>
<middle-left-bg></middle-left-bg>
<right><i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i>
<x></x>
</i><i></i><i></i><i></i><i></i><i></i></right>
<bottom><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></bottom>
<front-middle>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i>
</front-middle>
<front-right>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i>
</front-right>
<middle-left>
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i>
<x></x>
</i> <i></i><i></i><i></i><i></i><i></i>
</middle-left>
<ctrl1><i></i><i></i></ctrl1>
<ctrl2><i></i><i><i></i></i></ctrl2>
<ctrl3><i></i><i><i></i></i></ctrl3>
<ctrl4><i></i><i><i></i></i></ctrl4>
<ctrl5><i></i></ctrl5>
<ctrl6><i></i></ctrl6>
<leg4f>
<i></i><i></i><i></i>
</leg4f>
<llegf4>
<i></i><i></i>
</llegf4>
<llegf3>
<i></i>
</llegf3>
<llegf2>
<i></i><i></i>
</llegf2>
<upthrust><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></upthrust>
<llegf42>
<i></i><i></i><i></i><i></i>
<x></x>
<i></i>
<x>
<x></x>
<x></x>
</x>
</llegf42>
<llegf32>
<i></i><i></i><i></i><i></i>
<x></x>
<i></i>
<x>
<x></x>
</x>
</llegf32>
<ctrl7><i></i></ctrl7>
<llegf22>
<i></i><i></i><i></i>
<x>
<x></x>
</x>
<i></i>
<x>
<x></x>
<x></x>
</x>
</llegf22>
<ctrl8><i></i><i></i></ctrl8>
<litter>
<layer5>
<l1>
<i></i><i></i><i></i><i></i><i></i>
</l1>
<i></i><i></i><i></i><i></i><i></i> <i></i><i></i><i></i><i></i><i></i>
<i></i><i></i><i></i><i></i><i></i> <i></i>
</layer5>
</litter>
<dust></dust>
<llegf12>
<i></i><i></i><i></i><i></i>
<x>
<x></x>
</x>
<i></i>
<x>
<x></x>
<x></x>
</x>
</llegf12>
<hilites>
<i></i><i></i>
</hilites>
<lights><i></i></lights>
<shadow>
<i></i>
</shadow>
</vacuum>
<bits><i></i></bits>
<sig>
<x></x>
</sig>
</landscape>
// v Change the colour of the sun! v
$sun: yellow;
// $sun: orange; // uncomment for example
// ^ Change the colour of the sun! ^
$dsun: darken($sun, 25);
$lsun: lighten($sun, 28);
$gsun: desaturate($sun, 30);
$sky1: adjust-hue($gsun, -200deg);
$sky1: desaturate($sky1, 50);
$sky1: lighten($sky1, 10);
$sky2: adjust-hue($gsun, -90deg);
$sky2: desaturate($sky2, 70);
$sky2: lighten($sky2, 30);
$sky3: adjust-hue($sun, -190deg);
$sky3: desaturate($sky3, 50);
$sky4: $lsun;
$sky5: darken($sky1, 20);
$sky6: darken($sky1, 40);
$db: adjust-hue($dsun, -60deg);
$db: desaturate($db, 85);
$blk: darken($db, 20);
$red: adjust-hue($sun, -60deg);
$r1: rgba($red, 0.15);
$green: adjust-hue($sun, 40deg);
$g1: rgba($green, 0.15);
$yellow: desaturate($sun, 60);
$yellow: adjust-hue($yellow, -10deg);
$y2: darken($sun, 22);
$y2: adjust-hue($y2, -25deg);
$orange: adjust-hue($red, 25deg);
$y3: adjust-hue($yellow, -40deg);
$y3: lighten($y3, 10);
$litter1: adjust-hue($lsun, -60deg);
$litter1: lighten($litter1, 15);
$litter2: lighten($sky6, 20);
$litter3: darken($litter1, 10);
$litter4: darken($litter2, 15);
$litter5: darken($sun, 40);
$bgl1: rgba($sun, 0.25);
$bgl2: rgba($db, 0.25);
$bgl3: rgba($litter3, 0.25);
$bgl4: $bgl1;
$bgl1: lighten($gsun, 40);
$bgl2: lighten($db, 35);
$bgl3: desaturate($litter3, 30);
$bgl3: darken($bgl3, 5);
$bgl4: $bgl1;
$blue3: adjust-hue($sun, -180deg);
$blue3: desaturate($blue3, 50);
$blue3: darken($blue3, 20);
$blue2: adjust-hue($sun, -190deg);
$blue2: desaturate($blue2, 60);
$blue: desaturate($blue3, 25);
$blue: darken($blue, 5);
$bin1: mix($green, $blue3, 45);
$bin1: darken($bin1, 29);
$bin2: desaturate($bin1, 30);
$bin2: lighten($bin2, 10);
$bin3: mix($green, $blue3, 40);
$bin3: darken($bin3, 10);
$bin4: darken($bin3, 5);
$bs: rgba($bin1, 0.25);
$ls: rgba(#fff, 0.25);
$p1: darken($sun, 35);
$p1: desaturate($p1, 70);
$p1: adjust-hue($p1, -35deg);
$p2: adjust-hue($p1, -20deg);
$p2: darken($p2, 10);
$p3: adjust-hue($p1, -5deg);
$p3: darken($p3, 5);
$p4: lighten($p1, 20);
$p5: darken($p2, 30);
$p42: lighten($p1, 10);
$p6: darken($p2, 30);
$rp1: adjust-hue($p1, -20deg);
$rp1: darken($rp1, 5);
$rp2: darken($p1, 15);
$rp3: lighten($p1, 10);
$rp4: adjust-hue($p1, -20deg);
$rp4: darken($rp4, 3);
$sand1: adjust-hue($yellow, -30deg);
$sand1: desaturate($sand1, 10);
$sand1: darken($sand1, 10);
$sand2: lighten($p1, 35);
$sand3: $sky6;
$sand4: darken($sand1, 10);
//vacuum
$bodyd: darken($sand4, 14);
$metald: $db;
$metall: darken($sky2, 15);
$shadow: $bodyd;
$bodyl: darken($yellow, 2);
$bodyl: desaturate($bodyl, 30);
$legsd: darken($shadow, 25);
$legsl: $metald;
$legs: $legsl;
$legsd: darken($legsl, 10);
$light: adjust-hue($sun, -20deg);
$light: darken($light, 5);
$light2: lighten($y2, 10);
$li2: adjust-hue($light, -20deg);
$tooo: darken($y3, 30);
$tooo: desaturate($tooo, 5);
$inside: $shadow;
$blk2: darken($legs, 10%);
$blk3: darken($legs, 12%);
$rust: darken($orange, 30);
$rustd: darken($rust, 10%);
$bodyl2: darken($bodyl, 30%);
$bodyl2: mix($bodyl2, $light, 60%);
$this: $legsl;
$footd: rgba($legsd, 0.85);
$footl: rgba(#fff, 0.7);
$footl2: darken($metall, 51);
$rp4: adjust-hue($sun, -110deg);
$rp4: desaturate($rp4, 60);
$rp4: darken($rp4, 39);
$none: rgba($bodyd, 0);
// @import "setup";
html {
font-size: 0.97vmin;
height: 100%;
}
@media (orientation: portrait) {
html {
font-size: 0.6vmin;
}
}
body {
margin: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: $rp4;
* {
transform-style: preserve-3d;
}
*,
*:before,
*:after {
display: block;
top: 0;
left: 0;
box-sizing: border-box;
position: absolute;
content: "";
}
}
@media not all and (min-resolution: 0.001dpcm) {
llegf12 *,
llegf22 * {
transform-style: flat;
}
}
landscape {
filter: contrast(1.1);
height: 98rem;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 161rem;
overflow: hidden;
perspective: 29rem;
border-radius: 2rem;
background: linear-gradient($blk, $blue3, $orange, $sky1);
&:after {
width: 100%;
height: 100%;
box-shadow: inset 0 0 1rem $rp4, 0 0 2rem $rp4;
pointer-events: none;
}
&:before {
filter: contrast(2);
width: 200%;
height: 158%;
opacity: 0.75;
background: conic-gradient(
from 90deg,
$blk2 90deg,
$sky5,
$litter4,
rgba($litter3, 0.25),
$sky1,
rgba($litter3, 0.5),
$metall,
rgba($litter2, 0.5),
$litter2
);
}
& > * {
top: -2rem;
}
}
pyramid,
litter,
vacuum {
&,
* {
transition: transform 0.5s ease-in;
}
}
grid {
width: 100%;
max-width: calc(161rem / 1.5);
height: 98rem;
position: relative;
z-index: 999;
&:nth-of-type(1),
&:nth-of-type(3) {
width: 25%;
max-width: calc(161rem / 6);
}
&:nth-of-type(2) {
pointer-events: none;
}
$x1: 0.5rem;
$x2: 1rem;
$x3: 1.5rem;
$x4: 2rem;
$x5: 2.5rem;
$x6: 3rem;
$x7: 5rem;
&:nth-of-type(1):hover {
& ~ landscape > {
flip > pyramid {
transform: translate3d((-21rem + 4rem), -2rem, 0) scale(1.3);
}
flip:nth-of-type(2) > pyramid {
transform: translate3d((-21rem + $x5), -2rem, 0) scale(1.3);
}
litter {
transform: translate3d((6rem - $x4), 88rem, 0) scale(1.1) rotate(-2deg);
> i:nth-of-type(1) {
transform: translate3d((-30rem + $x3) -34rem, 0) rotate(-1deg)
rotateX(77deg) scale(0.8);
}
> i:nth-of-type(3) {
transform: translate3d($x2, -18rem, 0) rotate(-1deg) rotateX(45deg)
scale(0.8);
}
layer2 {
transform: translate3d($x1, 0, 0);
}
> i:nth-of-type(4) {
transform: translate3d($x2, -5rem, 0) rotate(-22deg);
}
layer3 {
transform: translate3d((-1rem + $x3) -2rem, 0);
}
}
vacuum {
transform: translate3d($x4, 0, 0);
//mid litter
> litter:nth-of-type(1) {
transform: translate3d((-1rem + $x1), 87rem, 0) rotate(2deg);
}
//near litter
> litter:nth-of-type(2) {
transform: translate3d($x7, 84rem, 0);
}
}
}
}
&:nth-of-type(3):hover {
& ~ landscape > {
flip > pyramid {
transform: translate3d((-21rem - $x7), -2rem, 0) scale(1.3);
}
flip:nth-of-type(2) > pyramid {
transform: translate3d((-21rem - $x5), -2rem, 0) scale(1.3);
}
litter {
transform: translate3d((6rem + $x4), 88rem, 0) scale(1.1) rotate(-2deg);
> i:nth-of-type(1) {
transform: translate3d((-30rem + $x3), -34rem, 0) rotate(-1deg)
rotateX(77deg) scale(0.8);
}
> i:nth-of-type(3) {
transform: translate3d(-$x2, -18rem, 0) rotate(-1deg) rotateX(45deg)
scale(0.8);
}
layer2 {
transform: translate3d($x1, 0, 0);
}
> i:nth-of-type(4) {
transform: translate3d(-$x2, -5rem, 0) rotate(-22deg);
}
layer3 {
transform: translate3d((-1rem + $x3), -2rem, 0);
}
}
vacuum {
transform: translate3d(-$x4, 0, 0);
//mid litter
> litter:nth-of-type(1) {
transform: translate3d((-1rem - $x1), 87rem, 0) rotate(2deg);
}
//near litter
> litter:nth-of-type(2) {
transform: translate3d(-$x7, 84rem, 0);
}
}
}
}
}
// @import "pyramids";
@mixin stripes {
background: repeating-linear-gradient(
to right,
//
$rp3,
$rp3 0.25rem,
$rp1 0.25rem,
$rp1 0.5rem,
$none 0.5rem,
$none 0.75rem,
$rp3 0.75rem,
$rp3 1rem,
//
$rp1 1rem,
$rp1 1.25rem,
$none 1.25rem,
$none 1.5rem,
$rp1 1.5rem,
$rp1 2rem,
$rp1 2.25rem,
//
$rp2 2.25rem,
$rp2 2.5rem,
$none 2.5rem,
$none 2.75rem,
$rp4 2.75rem,
$rp4 3rem,
$rp1 3rem,
//
$rp4 3.25rem,
$rp4 3.5rem,
$rp2 3.5rem,
$rp2 3.75rem,
$none 3.75rem,
$none 4rem
);
}
$starscolour: #fff, $orange;
@function stars($a, $b) {
$value: "#{random(160)}rem #{random(30)}rem "+$b+" "+"#{nth($starscolour, random(length($starscolour)))}";
@for $i from 2 through $a {
$value: "#{$value} , #{random(160)}rem #{random(30)}rem "+$b+" "+"#{nth($starscolour, random(length($starscolour)))}";
}
@return unquote($value);
}
$stars: stars(50, 0);
flip {
transform: scaleX(-1) rotate(3deg);
width: 100%;
height: 100rem;
filter: blur(0.1rem);
&:before,
&:after {
transform: translate3d(0rem, 0rem, 0);
width: 0.05rem;
height: 0.05rem;
background: #fff;
border-radius: 50%;
box-shadow: $stars;
}
}
pyramid {
width: 100%;
transform: translate3d(-21rem, -2rem, 0) scale(1.3);
&:before {
width: 60rem;
height: 50rem;
background: linear-gradient($blk, $none 10%, $none);
transform: translate3d(213rem, 62rem, 0) skewX(77deg);
opacity: 0.6;
}
g1 {
transform: translate3d(0, 62rem, 0);
width: 100%;
background: linear-gradient(179deg, $sand1, $sand2 10%, $sand3);
height: 50rem;
box-shadow: inset 0 1rem 1rem -1rem $sand4,
//
inset 0 0.1rem 0 0 $sand4;
}
p1 {
background: linear-gradient(to right, $none, $p1 2%, $p3, $p1);
transform: translate3d(105rem, 54.5rem, 0) rotate(40deg) skewX(-3deg);
width: 20rem;
height: 20rem;
border-radius: 1.5rem;
overflow: hidden;
box-shadow: inset 0 0 0.5rem $sky3,
//
inset 0 1rem 0.75rem -1rem $sky5,
//
inset 0.5rem 0 0.5rem -0.5rem $p2,
//
inset 0 0.5rem 0.5rem -0.5rem $sky5;
& > i:nth-of-type(1),
& > i:nth-of-type(2) {
transform: translate3d(-5rem, -2rem, 0) rotate(-48deg);
width: 20rem;
height: 20rem;
i {
transform: translate3d(6rem, 6.5rem, 0) skewX(-20deg);
@include stripes;
&:before,
&:after,
& {
width: 20rem;
height: 0.3rem;
@include stripes;
border-left: 0.3rem solid $rp3;
opacity: 0.9;
}
&:before {
transform: translate3d(-1rem, 0.3rem, 0);
}
&:after {
transform: translate3d(-0.3rem, 0.6rem, 0);
}
}
}
& > i:nth-of-type(1) {
i:nth-of-type(1) {
transform: translate3d(-6rem, 7rem, 0);
height: 1rem;
background: $p3;
box-shadow: 0 -0.3rem 0 $rp3;
&:before {
transform: translate3d(0, -1.7rem, 0);
background: $p3;
box-shadow: 0 -0.3rem 0 $rp3;
}
&:after {
transform: translate3d(0, 2rem, 0);
height: 1.5rem;
background: $p3;
box-shadow: 0 -0.3rem 0 $rp3;
}
}
i:nth-of-type(3) {
transform: translate3d(0, 8rem, 0) skewX(-20deg);
}
i:nth-of-type(4) {
transform: translate3d(6rem, 5.75rem, 0) skewX(-20deg);
}
i:nth-of-type(5) {
transform: translate3d(11.75rem, 1.5rem, 0) skewX(-20deg);
}
i:nth-of-type(6) {
transform: translate3d(9.75rem, 2.5rem, 0) skewX(-20deg);
}
i:nth-of-type(7) {
transform: translate3d(9.75rem, 3.5rem, 0) skewX(-20deg);
&:after {
transform: translate3d(-2rem, 0.6rem, 0);
}
}
i:nth-of-type(8) {
transform: translate3d(9.75rem, 4.5rem, 0) skewX(-20deg);
}
i:nth-of-type(9) {
transform: translate3d(5rem, 10rem, 0) skewX(-20deg);
&:before {
transform: translate3d(1rem, 0.3rem, 0);
}
&:after {
transform: translate3d(-2rem, 0.6rem, 0);
}
}
i:nth-of-type(10) {
transform: translate3d(0rem, 11rem, 0) skewX(-20deg);
&:after {
transform: translate3d(-2rem, 0.6rem, 0);
}
}
}
//lightside
& > i:nth-of-type(2) {
transform: translate3d(3rem, -14rem, 0) rotate(-60deg);
width: 20rem;
height: 20rem;
box-shadow: 0 0 0.5rem $p1,
//
inset 0 0 0.5rem $p1,
//
0 0 1.5rem $p4;
background: linear-gradient(90deg, $rp2, $p2);
& > i:nth-of-type(1) {
transform: translate3d(-1rem, 4.5rem, 0) rotate(20deg);
& > i {
transform: translate3d(0, 0, 0) skewX(10deg);
opacity: 0.3;
&:before,
&:after,
& {
border-left: none;
}
}
i:nth-of-type(1) {
transform: translate3d(0, 1rem, 0) skewX(10deg);
}
i:nth-of-type(2) {
transform: translate3d(1rem, 2rem, 0) skewX(10deg);
}
i:nth-of-type(3) {
transform: translate3d(2rem, 3rem, 0) skewX(10deg);
}
i:nth-of-type(4) {
transform: translate3d(1rem, 4rem, 0) skewX(10deg);
opacity: 0.5;
}
i:nth-of-type(5) {
transform: translate3d(3rem, 5rem, 0) skewX(10deg);
}
i:nth-of-type(6) {
transform: translate3d(2rem, 6rem, 0) skewX(10deg);
opacity: 0.5;
}
i:nth-of-type(7) {
transform: translate3d(4rem, 7rem, 0) skewX(10deg);
}
i:nth-of-type(8) {
transform: translate3d(6rem, 8rem, 0) skewX(10deg);
}
i:nth-of-type(9) {
transform: translate3d(3rem, 9rem, 0) skewX(10deg);
opacity: 0.3;
}
i:nth-of-type(10) {
transform: translate3d(5rem, 10rem, 0) skewX(10deg);
opacity: 0.5;
}
}
}
}
p2 {
transform: translate3d(122rem, 47rem, 0) rotate(42deg) skewX(-1deg);
width: 36rem;
height: 36rem;
border-radius: 1.5rem;
overflow: hidden;
& > i {
height: 24rem;
width: 50rem;
transform: translate3d(-15.7rem, -5rem, 0) rotate(-40deg);
overflow: hidden;
& > i {
width: 100%;
height: 107%;
transform: translate3d(1rem, 0, 0) rotate(-9deg);
overflow: hidden;
// thin bit
& > i:nth-of-type(1) {
width: 36rem;
height: 36rem;
transform: translate3d(8.15rem, 4rem, 0) rotate(48deg);
overflow: hidden;
//right side
& > i:nth-of-type(1) {
background: repeating-linear-gradient(
65deg,
$p1,
$none 0.15rem,
$none 0.15rem,
$none 0.2rem
),
//
linear-gradient(102deg, $p2, $p2 82%, $rp2 83%, $rp2) no-repeat;
width: 100%;
height: 100%;
transform: translate3d(-3rem, 6rem, 0) rotate(-89deg);
box-shadow: inset 0 0 1rem $p1;
&:before {
width: 100%;
height: 5rem;
background: repeating-linear-gradient(
$rp2,
$none 0.15rem,
$none 0.15rem,
$none 0.2rem
)
$rust;
transform: translate3d(15rem, -6.6rem, 0) rotate(73deg)
skewX(10deg);
box-shadow: -0.5rem 0 0.5rem $p5, -0.75rem 0 0.75rem $p5,
inset 0 0 1rem $p5, inset 0 -0.15rem 0.15rem $p5;
border-radius: 0 100% 0 0;
}
&:after {
transform: translate3d(33rem, 27rem, 0) rotate(36deg) skewX(21deg);
width: 1rem;
height: 0.5rem;
background: $p5;
opacity: 0.5;
border-radius: 0 0 50% 50%;
box-shadow: 1rem 1rem 0.2rem $p4,
//
1rem 1rem 0.2rem $p4,
//
2rem -0.5rem 0.2rem $p5,
//
0.5rem 2rem 0.2rem $p4,
//
-1rem 3rem 0.2rem $p5,
//
3rem 3rem 0.2rem $p4,
//
-1rem 4rem 0.2rem $p5,
//
-2rem 4.5rem 0.2rem $p4,
//
1rem -3rem 0.2rem $p5,
//
-1rem -4rem 0.2rem $p4,
//
4rem 5rem 0.2rem $p5,
//
1.5rem 4.2rem 0.2rem $p4,
//
-4rem 3.5rem 0.2rem $p5,
//
0.5rem -2rem 0.2rem $p4,
//
0.75rem 3.5rem 0.2rem $p5,
//
9rem 0.2rem 0.2rem $p4,
//
-8rem 5rem 0.2rem $p5;
}
& > i {
width: 100%;
height: 100%;
transform: translate3d(17.5rem, 10rem, 0) rotate(45deg);
&:before {
width: 100%;
height: 11rem;
background: repeating-linear-gradient(
$rp2,
$none 0.15rem,
$none 0.2rem,
$none 0.4rem
),
//
repeating-linear-gradient(
-11deg,
$rp1,
$none 0.15rem,
$none 0.2rem,
$none 0.4rem
);
transform: translate3d(-13.5rem, 10.5rem, 0) rotate(15deg)
skewX(61deg);
box-shadow: 0 0 0 0.2rem $rp3, inset 0 0 0.25rem $rp3,
inset 0 0 1rem $p1, inset 0 0 0.25rem $rp3;
border-radius: 0.25rem;
}
&:after {
width: 1.5rem;
height: 1rem;
background: darken($rp3, 5%);
transform: translate3d(10.5rem, 11.75rem, 0) rotate(7deg)
skewX(5deg);
border-radius: 100% 0 0 100% / 0 50% 50% 100%;
box-shadow: 0 -0.5rem 0.25rem -0.25rem $p4,
//
0.5rem 0 0.25rem -0.25rem darken($rp3, 5%),
//
inset 0 0.25rem 0.25rem -0.25rem $p4,
//
0 0.25rem 0 rgba($p4, 0.5),
//
0.75rem 1rem 0.25rem -0.25rem $p5,
//
;
}
& > i:nth-of-type(1) {
background: linear-gradient(57deg, $p5, $p5 70%, $rp3) no-repeat;
width: 5rem;
height: 5rem;
transform: translate3d(2.5rem, 10rem, 0) skewY(15deg);
box-shadow: 0 0 0.5rem $rp3, -0.15rem 0.75rem 0.5rem $p5;
&:before {
width: 5rem;
height: 0.5rem;
transform: translate3d(-1.3rem, -4.9rem, 0) skewY(15deg)
skewX(15deg);
background: $p5;
border-radius: 1rem 1rem 0 0;
box-shadow: 0 0 0.5rem $p5;
}
&:after {
width: 0.25rem;
height: 1rem;
transform: translate3d(9rem, 2rem, 0) skewX(50deg);
background: $p5;
border-radius: 0 0 0 100%;
opacity: 0.3;
box-shadow: 1rem 1rem 0 $p5,
//
1rem 1rem 0 $p5,
//
2rem -0.5rem 0 $p5,
//
0.5rem 2rem 0 $p5,
//
-1rem 3rem 0 $p5,
//
3rem 3rem 0 $p5,
//
-1rem 4rem 0 $p5,
//
-2rem 4.5rem 0 $p5,
//
1rem -3rem 0 $p5,
//
-1rem -4rem 0 $p5,
//
4rem 5rem 0 $p5,
//
1.5rem 4.2rem 0 $p5,
//
-4rem 3.5rem 0 $p5,
//
0.5rem -2rem 0 $p5,
//
0.75rem 3.5rem 0 $p5,
//
9rem 0.2rem 0 $p5,
//
-8rem 5rem 0 $p5;
}
}
& > i:nth-of-type(2) {
transform: translate3d(12rem, 16rem, 0) skewX(15deg);
width: 1rem;
height: 0.5rem;
opacity: 0.5;
background: $p4;
border-radius: 0 0 50% 50%;
box-shadow: 1rem 1rem 0.2rem $p5,
//
1rem 1rem 0.2rem $p4,
//
2rem -0.5rem 0.2rem $p5,
//
0.5rem 2rem 0.2rem $p4,
//
-1rem 3rem 0.2rem $p5,
//
3rem 3rem 0.2rem $p4,
//
-1rem 4rem 0.2rem $p5,
//
-2rem 4.5rem 0.2rem $p4,
//
1rem -3rem 0.2rem $p5,
//
-1rem -4rem 0.2rem $p4,
//
4rem 5rem 0.2rem $p5,
//
1.5rem 4.2rem 0.2rem $p4,
//
-4rem 3.5rem 0.2rem $p5,
//
0.5rem -2rem 0.2rem $p4,
//
0.75rem 3.5rem 0.2rem $p4,
//
9rem 0.2rem 0.2rem $p4,
//
-8rem 5rem 0.2rem $p4;
&:before {
transform: translate3d(4rem, 3rem, 0) skewX(0deg);
width: 1rem;
height: 1rem;
opacity: 0.5;
background: $p4;
border-radius: 0 0 50% 50%;
box-shadow: 1rem 1rem 0.2rem $p4,
//
1rem 1rem 0.2rem $p4,
//
2rem -0.5rem 0.2rem $p4,
//
0.5rem 2rem 0.2rem $p4,
//
-1rem 3rem 0.2rem $p4,
//
3rem 3rem 0.2rem $p4,
//
-1rem 4rem 0.2rem $p4,
//
-2rem 4.5rem 0.2rem $p4,
//
1rem -3rem 0.2rem $p4,
//
-1rem -4rem 0.2rem $p4,
//
4rem 5rem 0.2rem $p4,
//
1.5rem 4.2rem 0.2rem $p4,
//
-4rem 3.5rem 0.2rem $p4,
//
0.5rem -2rem 0.2rem $p4,
//
0.75rem 3.5rem 0.2rem $p4,
//
9rem 0.2rem 0.2rem $p4,
//
-8rem 5rem 0.2rem $p4;
}
&:after {
transform: translate3d(-2rem, -1rem, 0) skewX(0deg);
width: 1rem;
height: 1rem;
opacity: 0.5;
background: $p4;
border-radius: 0 0 50% 50%;
box-shadow: 1rem 1rem 0.2rem $p4,
//
1rem 1rem 0.2rem $p4,
//
2rem -0.5rem 0.2rem $p4,
//
0.5rem 2rem 0.2rem $p4,
//
-1rem 3rem 0.2rem $p4,
//
3rem 3rem 0.2rem $p4,
//
-1rem 4rem 0.2rem $p4,
//
-2rem 4.5rem 0.2rem $p4,
//
1rem -3rem 0.2rem $p4,
//
-1rem -4rem 0.2rem $p4,
//
4rem 5rem 0.2rem $p4,
//
1.5rem 4.2rem 0.2rem $p4,
//
-4rem 3.5rem 0.2rem $p4,
//
0.5rem -2rem 0.2rem $p4,
//
0.75rem 3.5rem 0.2rem $p4,
//
9rem 0.2rem 0.2rem $p4,
//
-8rem 5rem 0.2rem $p4;
}
}
& > i:nth-of-type(3) {
transform: translate3d(4rem, 3rem, 0) rotate(23deg) skewX(50deg)
scale(0.8);
width: 1rem;
height: 0.5rem;
opacity: 0.5;
background: $p4;
border-radius: 0 0 50% 50%;
box-shadow: 1rem 1rem 0.2rem $p5,
//
1rem 1rem 0.2rem $p4,
//
2rem -0.5rem 0.2rem $p5,
//
0.5rem 2rem 0.2rem $p4,
//
-1rem 3rem 0.2rem $p5,
//
3rem 3rem 0.2rem $p4,
//
-1rem 4rem 0.2rem $p5,
//
-2rem 4.5rem 0.2rem $p4,
//
1rem -3rem 0.2rem $p5,
//
-1rem -4rem 0.2rem $p4,
//
4rem 5rem 0.2rem $p5,
//
1.5rem 4.2rem 0.2rem $p4,
//
-4rem 3.5rem 0.2rem $p5,
//
0.5rem -2rem 0.2rem $p4,
//
0.75rem 3.5rem 0.2rem $p4,
//
9rem 0.2rem 0.2rem $p4,
//
-8rem 5rem 0.2rem $p4;
&:before {
transform: translate3d(4rem, 3rem, 0) skewX(0deg);
width: 1rem;
height: 1rem;
opacity: 0.5;
background: $p4;
border-radius: 0 0 50% 50%;
box-shadow: 1rem 1rem 0.2rem $p4,
//
1rem 1rem 0.2rem $p4,
//
2rem -0.5rem 0.2rem $p5,
//
0.5rem 2rem 0.2rem $p4,
//
-1rem 3rem 0.2rem $p5,
//
3rem 3rem 0.2rem $p5,
//
-1rem 4rem 0.2rem $p4,
//
-2rem 4.5rem 0.2rem $p5,
//
1rem -3rem 0.2rem $p4,
//
-1rem -4rem 0.2rem $p5,
//
4rem 5rem 0.2rem $p4,
//
1.5rem 4.2rem 0.2rem $p4,
//
-4rem 3.5rem 0.2rem $p5,
//
0.5rem -2rem 0.2rem $p4,
//
0.75rem 3.5rem 0.2rem $p5,
//
9rem 0.2rem 0.2rem $p4,
//
-8rem 5rem 0.2rem $p5;
}
&:after {
transform: translate3d(-2rem, -1rem, 0) skewX(0deg);
width: 1rem;
height: 1rem;
opacity: 0.5;
background: $p4;
border-radius: 0 0 50% 50%;
box-shadow: 1rem 1rem 0.2rem $p4,
//
1rem 1rem 0.2rem $p5,
//
2rem -0.5rem 0.2rem $p4,
//
0.5rem 2rem 0.2rem $p5,
//
-1rem 3rem 0.2rem $p5,
//
3rem 3rem 0.2rem $p5,
//
-1rem 4rem 0.2rem $p4,
//
-2rem 4.5rem 0.2rem $p5,
//
1rem -3rem 0.2rem $p4,
//
-1rem -4rem 0.2rem $p5,
//
4rem 5rem 0.2rem $p4,
//
1.5rem 4.2rem 0.2rem $p5,
//
-4rem 3.5rem 0.2rem $p4,
//
0.5rem -2rem 0.2rem $p5,
//
0.75rem 3.5rem 0.2rem $p4,
//
9rem 0.2rem 0.2rem $p4,
//
-8rem 5rem 0.2rem $p4;
}
}
}
}
& > i:nth-of-type(2) {
width: 100%;
height: 100%;
transform: translate3d(-10rem, 9rem, 0) rotate(-76deg);
overflow: hidden;
background: linear-gradient(to right, $p2, $rp3);
box-shadow: inset 0 0 2rem $p5, inset 0 0 2rem $p5;
& > i {
width: 100%;
height: 100%;
transform: translate3d(6rem, 1.5rem, 0) rotate(28deg);
background-image: radial-gradient(rgba($p1, 0.2) 20%, $none 20%),
//
radial-gradient(rgba($p2, 0.2) 20%, $none 20%),
//
radial-gradient(rgba($p3, 0.2) 20%, $none 20%),
//
radial-gradient(rgba(#fff, 0.05) 20%, $none 20%),
//
radial-gradient(rgba($p42, 0.2) 40%, $none 40%),
//
repeating-linear-gradient(
$p1,
$p1 0.25rem,
$none 0.25rem,
$none 0.5rem
);
background-position: 0 0;
background-size: 2rem 4rem, 3rem 2rem, 2.8rem 0.8rem,
4.2rem 1.2rem, 3.2rem 0.8rem;
& > i:nth-of-type(1) {
width: 10rem;
height: 10rem;
transform: translate3d(11rem, -2rem, 0) rotate(-10deg);
overflow: hidden;
&:before {
width: 10rem;
height: 10rem;
background: linear-gradient(
202deg,
$p2,
$p2 87%,
$p5 92%,
$p5
);
transform: translate3d(0rem, 0rem, 0) rotate(-17deg);
box-shadow: 0 0 0.25rem $p5;
}
}
//stones
i:nth-of-type(2),
i:nth-of-type(3),
i:nth-of-type(4),
i:nth-of-type(5),
i:nth-of-type(6) {
transform: translate3d(16rem, 7.5rem, 0);
&:before,
&:after,
& {
width: 2rem;
height: 0.15rem;
box-shadow: inset 0 0.1rem 0.1rem $p5;
border-radius: 0.2rem 0.1rem;
}
&:before {
transform: translate3d(2.1rem, 0.25rem, 0);
}
&:after {
transform: translate3d(2rem, 0, 0) rotate(2deg);
}
}
i:nth-of-type(3) {
transform: translate3d(10.5rem, 9rem, 0);
}
i:nth-of-type(4) {
transform: translate3d(12rem, 9.5rem, 0);
}
i:nth-of-type(5) {
transform: translate3d(20rem, 10.5rem, 0);
}
i:nth-of-type(6) {
transform: translate3d(20.5rem, 11rem, 0);
}
}
}
}
//fat bit
& > i:nth-of-type(2) {
width: 36rem;
height: 36rem;
transform: translate3d(-3rem, 5.5rem, 0) rotate(62deg);
overflow: hidden;
&:before {
width: 11rem;
height: 10rem;
background: linear-gradient(to right, $none, $p42 1%, $p3);
transform: translate3d(-2rem, -10rem, 0) rotate(-71deg)
skewX(-61deg);
box-shadow: 1.5rem 0.5rem 0.5rem $p5,
//
inset 0 0 0.5rem $p42,
//
0 0.5rem 0.5rem $p1,
//
inset 0 -0.1rem 0.2rem $p5;
}
&:after {
width: 1.5rem;
height: 2.75rem;
box-shadow: 0.4rem 0.1rem 0.2rem -0.1rem rgba($p5, 0.7),
//
0.6rem 0.2rem 0.2rem -0.1rem $p1,
//
inset -0.2rem -0.1rem 0.2rem -0.1rem rgba($p5, 0.5);
background: linear-gradient(
120deg,
$none,
$none 40%,
$p42 45%,
$p42
);
transform: translate3d(3.2rem, 7.8rem, 0) rotate(-9deg);
border-radius: 0 0 100% 0.5rem;
}
& > i:nth-of-type(1) {
transform: translate3d(-6rem, -13rem, 0) rotate(-63deg)
skewX(-20deg);
width: 110%;
height: 110%;
background-image: radial-gradient(rgba($p1, 0.2) 20%, $none 20%),
//
radial-gradient(rgba($p2, 0.2) 20%, $none 20%),
//
radial-gradient(rgba($p3, 0.2) 20%, $none 20%),
//
radial-gradient(rgba(#fff, 0.05) 20%, $none 20%),
//
radial-gradient(rgba($p42, 0.2) 40%, $none 40%);
background-position: 0 0;
background-size: 1rem 2rem, 1.6rem 1rem, 1.9rem 0.4rem,
2.1rem 0.6rem, 1.8rem 0.4rem;
&:before {
width: 5rem;
height: 11rem;
transform: translate3d(12rem, 5rem, 0) skewX(-20deg);
background: radial-gradient($none, rgba(#000, 0.2), $none, $none);
border-radius: 50%;
opacity: 0.75;
}
&:after {
width: 0.1rem;
height: 2rem;
transform: translate3d(17rem, 7rem, 0) rotate(-45deg)
skewY(-85deg);
background: lighten($p42, 10%);
border-radius: 50%;
box-shadow: 0 0 0.25rem lighten($p42, 10%),
0 0 0.25rem lighten($p42, 10%);
}
//stones
i {
transform: translate3d(13.5rem, 8.25rem, 0);
opacity: 0.5;
&:before,
&:after,
& {
width: 2rem;
height: 0.25rem;
border-radius: 0.2rem 0.1rem;
box-shadow: inset -0.1rem 0.05rem 0.1rem $p5,
//
inset -0.5rem 0.05rem 0.5rem $p2,
//
-0.1rem -0.1rem 0 rgba($p4, 0.3);
}
&:before {
transform: translate3d(1.1rem, 0, 0);
background: rgba($p1, 0.2);
border-radius: 0.2rem 0.25rem 0 0;
width: 1.9rem;
height: 0.15rem;
box-shadow: inset -0.1rem 0.1rem 1rem $p5,
//
0 0 0.7rem $p1,
//
0 -0.1rem 0.2rem $p4,
//
-1rem 0 0 -0.05rem $p5;
}
&:after {
transform: translate3d(2.2rem, 0, 0) rotate(2deg);
width: 1.8rem;
height: 0.2rem;
}
}
i:nth-of-type(2) {
transform: translate3d(13rem, 7.75rem, 0);
}
i:nth-of-type(3) {
transform: translate3d(13.5rem, 7.25rem, 0);
&:after {
display: none;
}
}
i:nth-of-type(4) {
transform: translate3d(12.5rem, 6.75rem, 0);
}
i:nth-of-type(5) {
transform: translate3d(14.2rem, 9rem, 0);
box-shadow: 0 0.1rem 0.1rem $p2,
//
-1.1rem 0 0 rgba($p42, 0.5),
//
-1rem 0.1rem 0 $p2,
//
-1rem 0 0 -0.05rem $p5;
}
i:nth-of-type(6) {
transform: translate3d(13rem, 9.5rem, 0);
box-shadow: 0 0.1rem 0.1rem $p2,
//
3.1rem 0 0 rgba($p42, 0.5),
//
3rem 0.1rem 0 $p2,
//
-1rem 0 0 -0.05rem $p5;
}
i:nth-of-type(7) {
transform: translate3d(12rem, 9.9rem, 0);
box-shadow: 0 0.1rem 0.1rem $p2,
//
3.1rem 0 0 rgba($p42, 0.5),
//
3rem 0.1rem 0 $p2,
//
-0.75rem 0 0 -0.05rem $p5,
//
0.75rem 0 0 -0.1rem $p5;
}
i:nth-of-type(8),
i:nth-of-type(9),
i:nth-of-type(10) {
transform: translate3d(13.2rem, 10.5rem, 0);
box-shadow: 0 0.1rem 0.1rem $p2,
//
3.1rem 0 0 rgba($p42, 0.5),
//
3rem 0.1rem 0 $p2,
//
-0.75rem 0 0 -0.05rem $p5,
//
0.75rem 0 0 -0.1rem $p5;
border-radius: 0.5rem;
height: 0.2rem;
&:before {
transform: translate3d(1rem, 0, 0) rotate(-1deg);
box-shadow: -0.2rem 0.1rem 0.1rem $p2;
border-radius: 0.5rem 0.2rem 50% 0.3rem;
background: rgba($p2, 0.5);
}
&:after {
transform: translate3d(2rem, 0, 0) rotate(2deg);
background: $p3;
}
}
i:nth-of-type(9) {
transform: translate3d(11rem, 11rem, 0);
}
i:nth-of-type(10) {
transform: translate3d(12rem, 11.4rem, 0);
&:before {
width: 3rem;
height: 0.75rem;
background: linear-gradient($none, $none 20%, $p42 30%, $p42);
transform: translate3d(1.75rem, -0.25rem, 0) rotate(-8deg)
skew(-20deg);
border-radius: 0.25rem;
box-shadow: 0 0.25rem 0.25rem $p5, -0.5rem 0.5rem 0.5rem $p42;
}
&:after {
box-shadow: 0 0.1rem 0.1rem $p2,
//
3.1rem 0 0 rgba($p42, 0.5),
//
3rem 0.1rem 0 $p2,
//
-0.75rem 0 0 -0.05rem $p5,
//
0.75rem 0 0 -0.1rem $p5,
//
0 0.5rem 0 $p42,
//
0 0.65rem 0.15rem $p42;
}
}
}
& > i:nth-of-type(2) {
width: 50rem;
height: 20rem;
transform: translate3d(-3rem, -1rem, 0) rotate(-60deg);
background: repeating-linear-gradient(
5deg,
$none,
$p42 0.15rem,
$none 0.25rem,
$none 0.5rem
);
&:before {
width: 50rem;
height: 20rem;
background-image: radial-gradient(rgba($p42, 0.5) 14%, $none 15%),
//
radial-gradient(rgba($p4, 0.5) 5%, $none 6%),
//
radial-gradient(rgba($p3, 0.5) 9%, $none 10%),
//
radial-gradient(rgba(#fff, 0.1) 14%, $none 15%),
//
radial-gradient(rgba($p42, 0.5) 10%, $none 11%),
//
radial-gradient(circle at top, $none 1rem, rgba($p1, 0.6) 1rem);
background-position: 0 0;
background-size: 4rem 3rem, 3.6rem 1rem, 2.9rem 1rem,
4.1rem 0.6rem, 1.8rem 0.4rem;
transform: translate3d(0, 1rem, 0) rotate(-5deg) skewX(-30deg);
}
& > i:nth-of-type(2) {
width: 8rem;
height: 20rem;
box-shadow: 0 -0.5rem 0.1rem -0.1rem $p42, inset 0 1.5rem 1rem $p1;
border-radius: 2rem;
transform: translate3d(8.6rem, 0, 0) rotate(0deg);
&:before {
width: 3.5rem;
height: 20rem;
box-shadow: 0.25rem 5rem 0.1rem -0.1rem $p5,
//
inset 0 2rem 2rem $p1;
border-radius: 2rem;
transform: translate3d(-9.5rem, 0, 0) skew(-44deg);
}
&:after {
width: 5rem;
height: 5rem;
box-shadow: 0.2rem -0.5rem 0.1rem -0.1rem $p42,
inset 0 0.1rem 0.1rem -0.1rem $p42;
border-radius: 2rem;
transform: translate3d(8rem, 1.5rem, 0) rotate(-10deg);
}
}
& > i:nth-of-type(1) {
width: 3rem;
height: 2rem;
box-shadow: 0 -0.4rem 0.1rem -0.1rem $p42, inset 0 1rem 1rem $p1;
border-radius: 2rem;
transform: translate3d(18rem, 0.5rem, 0) rotate(-10deg);
&:before {
width: 5rem;
height: 2rem;
box-shadow: 0 -0.4rem 0.1rem -0.1rem $p42,
inset 0 0.5rem 1rem $p1;
border-radius: 2rem;
transform: translate3d(-8rem, 1.25rem, 0) rotate(20deg);
}
&:after {
width: 4rem;
height: 0.5rem;
background: $p42;
transform: translate3d(-12rem, 3.5rem, 0) rotate(10deg);
border-radius: 0.5rem 0.5rem 0 0;
box-shadow: 8rem 0.5rem 0 $p42, 15rem 1rem 0 $p42;
}
}
& > i:nth-of-type(3) {
width: 1.5rem;
height: 0.4rem;
background: $p42;
border-radius: 0.5rem 0.5rem 0 0;
transform: translate3d(15rem, 2rem, 0) rotate(-15deg);
box-shadow: -3rem 7rem 0 $p42, 3rem 7rem 0 $p42, 9rem 7rem 0 $p42,
12rem 8rem 0 $p42;
&:before {
width: 1.4rem;
height: 0.4rem;
background: $p42;
border-radius: 0.5rem 0.5rem 0 0;
transform: translate3d(1rem, 2rem, 0) rotate(30deg);
box-shadow: 4.5rem -3em 0 $p42,
//
7rem -3.5rem 0 $p42,
//
9rem 3rem 0 $p42,
//
12rem 4rem 0 $p42,
//
8rem 3.5rem 0 $p42,
//
11rem 3rem 0 $p42,
//
10rem 2rem 0 $p42,
//
13rem 2.5rem 0 $p42,
//
14rem 1rem 0 $p42,
//
13.5rem 2.5rem 0 $p42,
//
12.5rem 3.25rem 0 $p42,
//
11.5rem 4.5rem 0 $p42,
//
10.3rem 4rem 0 $p42,
//
15rem 2rem 0 $p42;
}
&:after {
width: 0.25rem;
height: 1rem;
background: $rp2;
border-radius: 0.2rem;
transform: translate3d(-1.5rem, 0.5rem, 0) skewY(30deg);
box-shadow: 4.5rem -2em 0 $rp2,
//
2rem -3.5rem 0 $rp2,
//
4rem 5rem 0 $rp2,
//
8rem 4rem 0 $rp2,
//
6rem 6.5rem 0 $rp2,
//
5rem 8rem 0 $rp2,
//
4rem 2rem 0 $rp2,
//
1rem 4.5rem 0 $rp2,
//
4rem 1rem 0 $rp2,
//
7.5rem 2.5rem 0 $rp2,
//
8.5rem 3.25rem 0 $rp2,
//
3.5rem 4.5rem 0 $rp2,
//
10.3rem 4rem 0 $rp2,
//
15rem 2rem 0 $rp2;
opacity: 0.5;
}
}
& > i:nth-of-type(4), & > i:nth-of-type(5), & > i:nth-of-type(6), //
& > i:nth-of-type(7), & > i:nth-of-type(8), & > i:nth-of-type(9), & > i:nth-of-type(10),
& > i:nth-of-type(11), & > i:nth-of-type(12), & > i:nth-of-type(13), & > i:nth-of-type(14),
& > i:nth-of-type(15), & > i:nth-of-type(16) {
//stones
transform: translate3d(15rem, 5rem, 0);
opacity: 0.7;
&:before,
&:after,
& {
width: 2rem;
height: 0.75rem;
border-radius: 0.5rem 0.75rem 0.25rem 0.1rem;
box-shadow: inset -0.25rem 0.25rem 0.1rem $p42,
//
inset 0.25rem -0.25rem 0.1rem $p3,
//
2rem -0.25rem 0 -0.35rem $p1,
//
1.5rem -0.25rem 0 -0.35rem $p4,
//
-4rem -0.25rem 0.2rem -0.25rem $p1,
//
-4.5rem -0.25rem 0.2rem -0.25rem $p5;
background: $p1;
}
&:before {
transform: translate3d(-2.1rem, -0.5rem, 0);
border-radius: 0.25rem 0.5rem 0.25rem 0.75rem;
box-shadow: inset -0.25rem 0.25rem 0.1rem $p42,
//
inset 0.25rem -0.25rem 0.1rem $p3,
//
2.5rem -0.25rem 0 -0.35rem $p1,
//
2.75rem -0.25rem 0 -0.35rem $p4,
//
4rem -0.25rem 0.2rem -0.35rem $p1,
//
4.5rem -0.25rem 0.3rem -0.35rem $p5;
}
&:after {
transform: translate3d(-3.2rem, 0.2rem, 0) rotate(2deg);
border-radius: 50%;
box-shadow: inset -0.25rem 0.25rem 0.1rem $p42,
//
inset 0.25rem -0.25rem 0.1rem $p3,
//
2rem -0.25rem 0 -0.35rem $p1,
//
2.75rem -0.25rem 0 -0.35rem $p4,
//
4rem -0.25rem 0.1rem -0.25rem $p1,
//
4.5rem -0.25rem 0.2rem -0.25rem $p5;
}
}
& > i:nth-of-type(5) {
transform: translate3d(17rem, 2rem, 0);
}
& > i:nth-of-type(6) {
transform: translate3d(24rem, 3rem, 0);
}
& > i:nth-of-type(7) {
transform: translate3d(28rem, 6rem, 0);
}
& > i:nth-of-type(8) {
transform: translate3d(27rem, 10rem, 0);
}
& > i:nth-of-type(9) {
transform: translate3d(35rem, 9rem, 0);
}
& > i:nth-of-type(10) {
transform: translate3d(22rem, 6rem, 0);
}
& > i:nth-of-type(11) {
transform: translate3d(7rem, 5rem, 0);
}
& > i:nth-of-type(12) {
transform: translate3d(4rem, 8rem, 0);
}
& > i:nth-of-type(13) {
transform: translate3d(9rem, 3rem, 0);
}
& > i:nth-of-type(14) {
transform: translate3d(12rem, 1rem, 0);
}
& > i:nth-of-type(15) {
transform: translate3d(2.5rem, 6rem, 0);
}
& > i:nth-of-type(16) {
transform: translate3d(3rem, 7rem, 0);
}
}
}
}
}
}
g2 {
transform: translate3d(0, 62.5rem, 0) rotate(-1deg) skewX(85deg);
width: 190rem;
background: linear-gradient(182deg, $sand4, $sand2 20%, $sand2);
height: 10rem;
}
}
// @import "litter";
litter {
transform: translate3d(6rem, 88rem, 0) scale(1.1) rotate(-2deg);
width: 100%;
filter: contrast(1.1);
& > i {
width: 150%;
height: 60rem;
transform: translate3d(0, -20rem, 0) rotate(-1deg) rotateX(65deg);
opacity: 0.9;
&:before,
&:after {
background-image: radial-gradient($litter2 20%, $none 21%),
//
radial-gradient($litter4 20%, $none 21%),
//
radial-gradient($litter1 20%, $none 21%),
//
radial-gradient(rgba(#fff, 0.5) 20%, $none 21%),
//
radial-gradient($litter3 20%, $none 21%);
background-position: 0 0;
background-size: 10rem 5rem, 6rem 3rem, 9rem 4rem, 11rem 6rem, 8rem 4rem,
100% 100%;
width: 110%;
height: 100%;
transform: skewX(-30deg) translate3d(-10rem, 0, 0);
}
&:after {
transform: skewX(30deg) translate3d(-9rem, 1rem, 0) scaleX(-1);
}
&:nth-of-type(3) {
transform: translate3d(0, -18rem, 0) rotate(-1deg) rotateX(45deg)
scale(0.8);
opacity: 0.7;
}
&:nth-of-type(2) {
transform: translate3d(-30rem, -32.5rem, 0) rotate(-1deg) rotateX(77deg);
background: radial-gradient(
at 33% 29%,
$none,
rgba($light, 0.5),
$blk 30%,
$blk
);
opacity: 0.5;
&:before,
&:after {
display: none;
}
}
&:nth-of-type(1) {
transform: translate3d(-30rem, -34rem, 0) rotate(-1deg) rotateX(77deg)
scale(0.8);
opacity: 0.7;
}
&:nth-of-type(4) {
transform: translate3d(0, -5rem, 0) rotate(-22deg);
background-color: $blue;
}
&:nth-of-type(5) {
filter: brightness(0.6);
}
}
//actual stuff
layer5 {
i:nth-of-type(1) {
width: 6rem;
height: 4rem;
background: $litter2;
transform: translate3d(53.5rem, 12.5rem, 0) rotate(10deg) skewX(40deg);
border-radius: 0.15rem;
border: 0.5rem solid $blk;
border-left-width: 0.25rem;
box-shadow: inset 0 0 0.5rem $litter1,
//
-0.5rem 0.75rem 0 $litter2,
//
-0.75rem 0.25rem 0 $blk,
//
-1rem 0.5rem 0 $y2,
//
-3rem 0.5rem 0 $yellow,
//
-4rem 0.75rem 0 $y2;
&:before {
width: 12rem;
height: 5rem;
background: linear-gradient(to right, $bin3, $blk);
transform: translate3d(41rem, -8rem, 0) skewY(-23deg) skewX(-17deg);
border-radius: 0.25rem;
box-shadow: inset 0 0.1rem 0.15rem #fff;
}
&:after {
width: 2rem;
height: 5rem;
border: 0.5rem solid $none;
border-bottom-color: $litter1;
border-right-width: 0;
transform: translate3d(49rem, -14.2rem, 0) skewY(-23deg) skewX(10deg);
box-shadow: 1rem 4.5rem 0 $litter1;
border-radius: 0.25rem;
filter: drop-shadow(0 0 0.5rem $blk);
}
}
i:nth-of-type(2) {
width: 6rem;
height: 4rem;
background: linear-gradient($yellow, $y2);
transform: translate3d(43rem, 9rem, 0) rotate(-15deg);
border-radius: 0.5rem 1.5rem 0.25rem 0.25rem;
box-shadow: //
inset 2rem -1rem 1rem $bs,
//
inset -0.25rem 0.25rem 0.25rem rgba(#fff, 0.5),
//
inset 0.25rem -0.25rem 0.25rem $blk,
//
inset 0.5rem -0.5rem 0.25rem rgba($red, 0.2),
//
inset 0 -3.5rem 1rem $bs,
//
inset -2rem 0 1rem rgba($red, 0.2),
//
inset 0 1rem 0.25rem rgba(#fff, 0.5),
//
inset 0.25rem 0.25rem 0.25rem $y2,
//
inset -0.25rem 0.25rem 0.25rem $y2,
//
inset -0.5rem 0 0.15rem $yellow,
//
inset 0 0.6rem 0.15rem $blk,
//
inset 0 0.75rem 0.15rem $db,
//
//
0 0 1rem $blk,
//
-0.25rem 0.25rem 0.25rem $blk;
&:before {
width: 10rem;
height: 2rem;
background: linear-gradient($litter1, $litter2);
transform: translate3d(1.5rem, 5.5rem, 0) rotate(35deg);
border-radius: 0.15rem;
box-shadow: //
-1rem 0.5rem 0 $litter2,
//
-1rem 0.75rem 0.5rem $blk,
//
1.15rem -0.5rem 0 $blk,
//
1rem -0.6rem 0 $litter2,
//
1rem -0.6rem 0.5rem $blk,
//
4rem -1.25rem 0 $litter4,
//
-0.75rem 2rem 0 $blk,
//
-10rem 5rem 0 $litter2,
//
-10rem 5rem 0 $blk,
//
inset 1rem 1rem 0 $litter2;
}
&:after {
width: 5rem;
height: 7rem;
background: linear-gradient(
to right,
//
$litter1 0.15rem,
//
$litter4 0.15rem,
//
$litter2 1rem,
//
$none 1rem,
//
$none 1.5rem,
//
$litter1 1.5rem,
//
$litter1 1.65rem,
//
$litter2 1.65rem,
//
$litter2 2.5rem,
//
$none 2.5rem
);
transform: translate3d(-4rem, 0.5rem, 0) rotate(35deg) skewY(5deg);
border-radius: 0.15rem;
}
}
i:nth-of-type(3) {
width: 13rem;
height: 6rem;
background: linear-gradient(
40deg,
$yellow,
rgba(#fff, 0.7) 50%,
$litter2 55%,
$litter2
),
$litter1;
transform: translate3d(20rem, 12.5rem, 0) rotate(-15deg);
border-radius: 0 50% 0 0;
box-shadow: 0 0 1rem $blk,
//
inset 0 -3.5rem 1rem $bs,
//
inset -2rem -4rem 1rem rgba($red, 0.2);
&:before {
width: 8rem;
height: 5rem;
border-radius: 50%;
transform: translate3d(7rem, 1rem, 0) skewX(-15deg);
background: $litter2;
box-shadow: 0 0 1rem $db,
//
inset 0.25rem 0 0.25rem $litter1;
}
&:after {
width: 8rem;
height: 4rem;
background: linear-gradient(to right, $blue, $blue, $db);
transform: translate3d(1rem, 2.5rem, 0) rotate(5deg) skew(-15deg);
border-radius: 0.25rem;
box-shadow: -8rem -3rem 0 $db;
}
}
i:nth-of-type(4) {
width: 10rem;
height: 5rem;
background: linear-gradient($yellow, $y2);
transform: translate3d(-1rem, 12.5rem, 0) rotate(5deg);
box-shadow: 0 0 1rem $blk,
//
inset 0 0.5rem 0.5rem $y2,
//
-2rem 2rem 0.5rem $db;
border-radius: 0 0 0 100%;
&:before {
width: 10rem;
height: 5rem;
background: linear-gradient($litter1, $y2);
transform: translate3d(13rem, -1rem, 0) rotate(10deg);
box-shadow: 0 0 1rem $blk,
//
inset 0 0 0.15rem #fff,
//
inset 0 0.5rem 0.5rem $litter2,
//
-2rem 2rem 0.5rem $db;
border-radius: 0 0.5rem 0 100%;
}
&:after {
width: 3rem;
height: 5rem;
background: linear-gradient($sky1, $litter2);
transform: translate3d(21rem, 0rem, 0) skewY(-30deg);
border-radius: 0.5rem 2rem;
box-shadow: 0 0 1rem $blk,
//
inset 0 0 0.25rem #fff,
//
inset 0 0.5rem 0.5rem $litter1,
//
-2rem 0rem 0.5rem $db;
}
}
i:nth-of-type(5) {
width: 8rem;
height: 4rem;
transform: translate3d(5.5rem, 10rem, 0) rotate(-10deg);
border-radius: 50%;
background: $blue;
box-shadow: inset 0 3rem 1rem rgba($blk, 0.5),
//
-0.15rem 0 0.15rem rgba($blk, 0.5),
//
-0.5rem -0.25rem 0.15rem $blue,
//
-0.65rem -0.25rem 0 #fff,
//
0.15rem -0.15rem 0.15rem rgba($blk, 0.5),
//
0 0.15rem 0.15rem #fff,
//
0.5rem 0.25rem 0.15rem $blue,
//
0.3rem -0.15rem 0.15rem $blue,
//
0.4rem -0.15rem 0 #fff;
&:after {
width: 8rem;
height: 4rem;
transform: translate3d(0, 3rem, 0) rotate(20deg) skewX(-20deg);
background: $blue3;
border-radius: 1rem;
box-shadow: inset -0.5rem -2rem 1rem darken($blue3, 10%),
//
inset 0 0.15rem 0.15rem rgba(#fff, 0.7),
//
inset 0.5rem 0.25rem $blue3,
//
inset -1rem 0.25rem $blue3,
//
inset 0 0.5rem 0.05rem darken($blue3, 10%),
//
inset 0 0.5rem 0.15rem rgba(#fff, 0.7),
//
0 0 1rem $blk;
}
&:before {
width: 4rem;
height: 2rem;
background: $blk;
border-radius: 0.25rem;
transform: translate3d(5rem, 2rem, 0) rotate(-10deg);
border-bottom: 0.15rem solid $blk;
box-shadow: inset 0.25rem 0.25rem 0.25rem $db,
//
inset 0 0.5rem 0.5rem $db,
//
inset 0 1rem 0.5rem $db,
//
inset -0.5rem 1.5rem $litter5,
//
3rem 1.75rem 0 $blk,
//
0 1.75rem 0 $blk;
}
}
i:nth-of-type(6) {
width: 4rem;
height: 3rem;
background: $litter5;
border-radius: 100% 0 0.25rem 0.25rem / 0.5rem 0 0.25rem 0.25rem;
transform: translate3d(14.65rem, 13.25rem, 0) rotate(-20deg) skewY(-10deg);
border-bottom: 0.5rem solid $blk;
box-shadow: -3.5rem 0.25rem 0 $litter5;
&:before {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
border: 0.15rem solid $db;
background: $litter2;
transform: translate3d(0.75rem, -0.5rem, 0);
box-shadow: inset 1.3rem -1.3rem 0 -1rem $litter4,
//
inset 1.45rem -1.45rem 0 -1rem $db;
}
&:after {
width: 6rem;
height: 3rem;
transform: translate3d(-3rem, 1.5rem, 0) rotate(18deg);
border-radius: 0.25rem;
background: $sky1;
box-shadow: 0 0 1rem $blk, 0 0 1rem $blk;
}
}
i:nth-of-type(7) {
width: 10rem;
height: 1.5rem;
transform: translate3d(0.5rem, 14.5rem, 0) rotate(17deg);
border-radius: 1rem 0.5rem 0.25rem 100% / 0.5rem 0.5rem 0.25rem 0.5rem;
background: linear-gradient(to right, $none, $blk), $blue;
box-shadow: inset 0 0.5rem 0.15rem rgba($blk, 0.5),
inset 0.25rem -0.25rem 0.25rem rgba($bin1, 0.5);
&:before {
width: 5.25rem;
height: 5.5rem;
border-radius: 0.25rem 1rem;
transform: translate3d(1.75rem, -0.6rem, 0) rotate(-15deg) skewX(-6deg);
box-shadow: inset -0.65rem 0 0 $blue2,
//
inset -0.15rem 0.5rem 0.15rem rgba($blk, 0.75),
//
inset 0.65rem 0 0 rgba($blk, 0.25),
//
inset 0.65rem 0.25rem 0 $blue,
//
inset -0.75rem 0 0 $blue;
}
&:after {
width: 10rem;
height: 1.25rem;
transform: translate3d(4.5rem, -0.75rem, 0) rotate(5deg) skewX(6deg);
border-radius: 0 0 0 100% / 0 0 0 0.5rem;
background: $blue2;
box-shadow: inset 0.15rem 0 0 $blue,
//
inset 0 0.15rem 0.15rem rgba(#fff, 0.5),
//
-1rem -0.45rem 0 -0.5rem $blk,
//
-1rem -0.5rem 0 -0.5rem $blue; //
}
}
i:nth-of-type(8) {
width: 15rem;
height: 1rem;
background: $litter4;
transform: translate3d(37.25rem, 15rem, 0) rotate(25deg);
border-radius: 0.15rem;
box-shadow: inset 0.15rem 0 0.15rem $litter1,
inset 0.35rem 0.15rem 0.15rem $bs,
//
3.5rem -1.5rem 0.15rem $litter2,
3.6rem -1.2rem 0.15rem $litter2, 2rem -1.35rem 0 $litter1;
&:before {
width: 15rem;
height: 5rem;
background: linear-gradient(
$litter1,
$litter1 0.15rem,
$bin3 0.25rem,
$bin3 1rem,
$none 1rem,
$none
),
//
linear-gradient(
to right,
$none,
$none 13rem,
$litter1 13rem,
$litter1 13.15rem,
$bin3 13.25rem,
$bin3 14rem,
$none 14rem,
$none
);
transform: translate3d(-8.5rem, 4.5rem, 0) rotate(-35deg);
border-radius: 0.15rem;
}
&:after {
width: 6rem;
height: 6rem;
background: linear-gradient(
-20deg,
$litter1,
$litter1 50%,
$litter2 55%,
$litter2 65%,
$litter1 70%,
$litter1
);
transform: translate3d(16rem, -8rem, 0) rotate(20deg);
border-radius: 0.5rem;
box-shadow: inset -5rem 0 1rem $litter2;
}
}
i:nth-of-type(9) {
width: 2rem;
height: 4rem;
background: linear-gradient(to right, $y2, $db, $y2, $yellow);
transform: translate3d(51rem, 14rem, 0) rotate(65deg);
border-radius: 1rem 1rem 0 0;
border-top: 0.15rem solid $db;
&:before {
width: 8rem;
height: 8rem;
transform: translate3d(3rem, -9.5rem, 0) skewY(-20deg);
border-radius: 1rem;
background: $blk;
box-shadow: inset 0.25rem 0 0.25rem $sky2,
//
inset 0.5rem 0 0.25rem 0.25rem $litter4,
//
inset 0.5rem 0 0 0.5rem $blue,
//
0 0 1rem $bs;
}
&:after {
width: 2rem;
height: 6rem;
transform: translate3d(12rem, -27rem, 0) skewY(20deg);
border-radius: 50%;
background: $blk;
box-shadow: //
0.25rem -0.35rem 0.25rem #fff,
//
0.25rem -0.45rem 0.15rem $bin2,
//
-0.25rem 0.25rem 0.15rem $blk,
//
-0.5rem 0.5rem 0 $bin2,
//
0.15rem -0.25rem 0 0.35rem $bin2,
//
0.5rem -0.25rem 0 0.35rem $blk,
//
0 0 0 0.5rem $ls; //
}
}
i:nth-of-type(10) {
transform: translate3d(88.5rem, 9.5rem, 0) rotate(10deg) skewY(10deg);
width: 1.25rem;
height: 3rem;
background: $blk;
border-radius: 0.15rem;
&:before {
width: 1.5rem;
height: 3rem;
transform: translate3d(0.75rem, 1.25rem, 0) rotate(-11deg) skewY(10deg);
border-radius: 0.75rem;
background: linear-gradient(rgba($litter2, 0.75), rgba($litter4, 0.75)),
$bin3;
box-shadow: -0.35rem 0.15rem 0 $sky1,
//
-0.65rem 0 0 $bin2,
//
0.5rem 1rem 0 $litter4,
//
inset 0.25rem 0 0.5rem #fff;
}
&:after {
width: 5rem;
height: 3rem;
transform: translate3d(2rem, 2rem, 0) rotate(-10deg) skewY(-10deg);
background: rgba($bin3, 0.5);
box-shadow: inset 0 0.25rem 0.25rem rgba($litter1, 0.75), 0 0 1rem $bs;
}
}
i:nth-of-type(11) {
width: 3.5rem;
height: 3rem;
background: linear-gradient($y2, lighten($y2, 20%));
transform: translate3d(85rem, 11rem, 0) rotate(-10deg) skewX(-10deg);
border-radius: 0.5rem 1rem;
box-shadow: inset 0 0.15rem 0.15rem #fff,
//
inset -1rem 0 0.75rem rgba($yellow, 0.5),
//
0 0 0.5rem $bs,
//
-1rem 0.75rem 0 $litter1,
//
-1rem 0.75rem 1rem $blk;
&:before {
width: 5rem;
height: 3rem;
background: linear-gradient($litter1, $y2, $db);
transform: translate3d(3rem, 2.5rem, 0) rotate(10deg) skewX(10deg)
skewY(20deg);
border-radius: 0 1.5rem 0 0;
box-shadow: -2rem 2rem 0 $db;
}
&:after {
width: 2.6rem;
height: 3rem;
background: linear-gradient($db, $y2);
transform: translate3d(0.75rem, 1.5rem, 0) rotate(5deg) skewX(10deg)
skewY(-30deg);
border-radius: 0.25rem 0.5rem 1rem 0.25rem;
box-shadow: inset 0 0.15rem 0.25rem -0.15rem #fff,
//
inset -0.5rem -0.5rem 0.15rem rgba($yellow, 0.5),
//
inset -0.5rem 0.5rem 0.15rem rgba($yellow, 0.5),
//
0.15rem 0.15rem 0.15rem rgba($yellow, 0.5),
//
-2rem 0.5rem 0 $litter2,
//
-2rem 0.5rem 0.5rem $blk;
}
}
i:nth-of-type(12) {
width: 3rem;
height: 3rem;
transform: translate3d(87rem, 14.5rem, 0) rotate(-30deg) skewX(10deg);
border-radius: 1.5rem / 0.5rem;
background: rgba($litter1, 0.5);
border: 0.15rem solid $none;
border-top-color: #fff;
box-shadow: //
inset 1rem 0 0.5rem $litter1,
//
inset 0 0.15rem 0.15rem $litter2,
//
0 0 1rem $blk,
//
-3rem -1.5rem 0.5rem $litter2,
//
-3rem -1.5rem 0 $litter1,
//
16rem 10rem 0 $litter2,
//
1rem 1.5rem 0 $db,
//
1rem 1.25rem 0.5rem $blk,
//
;
&:before {
width: 2rem;
height: 5rem;
border-radius: 1rem;
background: linear-gradient(
to right,
#fff,
rgba($red, 0.2),
$litter2,
rgba($red, 0.2)
),
$litter2;
transform: translate3d(6rem, 0rem, 0) rotate(60deg);
box-shadow: inset 0 0.15rem 0 rgba($litter2, 0.5),
//
inset 0 0.25rem 0 rgba($litter4, 0.5),
//
0 0 0.25rem $blk,
//
inset 0 -2rem 1rem rgba($blk, 0.5),
inset 0 -1rem 0.5rem rgba($blk, 0.5);
}
&:after {
width: 7rem;
height: 2rem;
background: linear-gradient($litter2, $litter1, $y2, $db);
transform: translate3d(3rem, 3rem, 0) rotate(10deg) skewX(-10deg);
border-radius: 3rem 1rem / 0.5rem 0.5rem;
box-shadow: inset 1rem 0 0.5rem $y2,
//
inset 3rem 0 0.1rem rgba($db, 0.5);
}
}
i:nth-of-type(13) {
width: 5rem;
height: 1.5rem;
transform: translate3d(95.5rem, 12rem, 0);
border-radius: 2rem 0 0 0;
background: linear-gradient(
$litter2,
$litter2 50%,
$litter4 50%,
$litter4 70%,
$litter2 70%,
$litter2
);
box-shadow: inset 0.5rem 0.15rem 0.15rem $litter1, 0 0 0.5rem $blk,
//
0 -1rem 0.5rem rgba($red, 0.1);
&:before {
width: 2rem;
height: 1.15rem;
transform: translate3d(2.5rem, 1.5rem, 0) rotate(45deg) skewX(-20deg);
background: linear-gradient(
35deg,
$litter3,
$litter3 45%,
$litter1 45%,
$litter3
);
border: 0.15rem solid $litter1;
border-radius: 0.15rem;
box-shadow: 0 0 0.5rem $blk,
//
0.2rem 0.1rem 0 $litter3,
//
0.4rem 0.2rem 0 $litter3,
//
0.6rem 0.3rem 0 $litter3,
//
0.8rem 0.4rem 0 $litter3,
//
1rem 0.5rem 0 $litter3,
//
1.2rem 0.6rem 0 $litter3,
//
inset 0 -0.5rem 0.5rem $bs;
}
&:after {
width: 1.5rem;
height: 4rem;
transform: translate3d(4rem, -0.2rem, 0);
background: linear-gradient(
$litter1,
$litter1 0.2rem,
$litter4 0.3rem,
$litter4 0.7rem,
$litter2 0.7rem,
$litter2 1rem,
$litter4 1rem,
$litter2
);
border-radius: 0.5rem / 100%;
box-shadow: inset 0.15rem 0 0.15rem $ls, inset -0.25rem 0 0.25rem $blue,
0 0 0.5rem $bs;
}
}
i:nth-of-type(14) {
width: 8rem;
height: 5rem;
transform: translate3d(101.5rem, 12rem, 0);
border-radius: 50%;
background: radial-gradient($blk, $blue2);
box-shadow: inset 0 0.1rem 0.1rem $litter1;
&:before {
width: 4rem;
height: 2rem;
transform: translate3d(2.5rem, 0rem, 0) rotate(30deg);
border-radius: 0 0 1rem 3rem;
border-bottom: 0.5rem solid $bin3;
border-right: 1.5rem solid $litter2;
border-left: 0.2rem solid $none;
}
&:after {
width: 6rem;
height: 5rem;
transform: translate3d(-4rem, 2rem, 0);
background: linear-gradient(80deg, $litter3, $litter2, $litter2);
border-radius: 2rem;
box-shadow: inset 0.2rem 0.1rem 0.2rem $litter1,
//
2.2rem 0.75rem 0.2rem $litter2,
//
2rem 0.5rem 0 $litter3,
//
4.2rem 1.2rem 0.2rem $litter2,
//
4rem 1rem 0 $litter3;
}
}
i:nth-of-type(15) {
width: 5.5rem;
height: 3rem;
transform: translate3d(107rem, 9.5rem, 0) rotate(-30deg);
border-radius: 0.25rem / 50%;
border-left: 1rem solid $y2;
border-top: 0.5rem solid $none;
border-right: 2rem solid $y2;
box-shadow: inset -0.1rem 0.1rem 0.1rem $yellow,
//
inset 5.5rem 0 0 $y2,
//
-0.5rem 0.15rem 0.5rem -0.15rem $y2,
//
-0.5rem 0 0 $yellow,
//
0 0.5rem 0.5rem $blk;
&:before {
width: 2.5rem;
height: 2rem;
background: linear-gradient($red, $db);
transform: translate3d(-1.5rem, 1rem, 0) rotate(10deg) skewX(30deg);
border-radius: 0.5rem;
box-shadow: 1rem 0 1rem $db,
//
inset 0.5rem 0.5rem 0.5rem rgba($litter1, 0.5),
//
inset 0 1rem 1rem rgba($litter2, 0.5),
//
-0.4rem 1rem 0 $db;
}
&:after {
width: 7rem;
height: 2.5rem;
transform: translate3d(-1.5rem, 1.5rem, 0) rotate(-15deg) skewX(10deg);
border-radius: 1rem 1.5rem;
border: 0.65rem solid lighten($bin4, 30%);
border-right: 1.5rem solid lighten($bin4, 30%);
border-bottom: 0.5rem solid lighten($bin4, 30%);
box-shadow: inset 0.25rem 0.25rem 0 $bin1,
//
inset -0.15rem 0 0 $bin1,
//
inset 0 1rem 1rem rgba($blk, 0.5),
//
0 0.15rem 0.15rem lighten($bin4, 30%),
//
0 1rem 0.25rem $bin3,
//
0.25rem 1rem 0 $bin4,
//
0rem 1.5rem 0 $bin4,
//
0.15rem 1.6rem 0.15rem $blk,
//
0.35rem 1rem 0.15rem $blk; //
}
}
i:nth-of-type(16) {
width: 5rem;
height: 4rem;
transform: translate3d(115rem, 10.5rem, 0) rotate(30deg) skewX(-10deg);
border-radius: 1rem 0.25rem / 2rem 0.25rem;
box-shadow: //
0.25rem 2rem 0.25rem $litter2,
//
-0.25rem 2rem 0.25rem $litter1,
//
-1rem 2rem 0 $litter2,
//
-1rem 2.5rem 0.5rem $blk,
//
inset -0.5rem -0.5rem 0.5rem $blk,
//
inset -1rem -1rem 1rem $litter4,
//
inset -1rem -2rem 0 $db;
&:before {
width: 5rem;
height: 2rem;
transform: translate3d(-2rem, 6rem, 0) rotate(30deg) skewX(0deg);
border-radius: 0.25rem 2rem / 0.25rem 1.25rem;
background: $litter2;
box-shadow: //
1rem 2rem 0 $litter2,
//
1rem 2rem 1rem $blk,
//
0 0 0.5rem $db,
//
0.5rem 4rem 0 $litter2,
//
0.5rem 5rem 1rem $blk,
//
-0.5rem 3rem 0 $litter2,
//
-0.5rem 3rem 1rem $blk,
//
0.25rem 1.75rem 0 #fff,
//
0.25rem 1.75rem 1rem $blk,
//
-3rem 2rem 0 -0.5rem $bin4; //
}
&:after {
width: 6rem;
height: 6rem;
transform: translate3d(2rem, 2rem, 0) rotate(30deg) skewX(0deg);
background: $orange;
border-radius: 50%;
border: 0.15rem solid $orange;
box-shadow: inset 0.15rem -0.15rem 0.15rem $bs,
//
0 0 1rem $blk,
//
inset -5rem 0 0 -2rem rgba($db, 0.2);
}
}
/////
l1 {
transform: translate3d(53rem, -20rem, 0) scale(1.5) rotate(17deg);
i:nth-of-type(1) {
width: 5rem;
height: 4rem;
transform: translate3d(115rem, 10.5rem, 0) rotate(30deg) skewX(-10deg);
border-radius: 1rem 0.25rem / 2rem 0.25rem;
box-shadow: //
0.25rem 2rem 0.25rem $litter2,
//
-0.25rem 2rem 0.25rem $litter1,
//
-1rem 2rem 0 $litter2,
//
-1rem 2.5rem 0.5rem $blk,
//
inset -0.5rem -0.5rem 0.5rem $blk,
//
inset -1rem -1rem 1rem $litter4,
//
inset -1rem -2rem 0 $db;
&:before {
width: 5rem;
height: 2rem;
transform: translate3d(-2rem, 6rem, 0) rotate(30deg) skewX(0deg);
border-radius: 0.25rem 2rem / 0.25rem 1.25rem;
background: $litter2;
box-shadow: //
1rem 2rem 0 $litter2,
//
1rem 2rem 1rem $blk,
//
0 0 0.5rem $db,
//
0.5rem 4rem 0 $litter2,
//
0.5rem 5rem 1rem $blk,
//
-0.5rem 3rem 0 $litter2,
//
-0.5rem 3rem 1rem $blk,
//
0.25rem 1.75rem 0 #fff,
//
0.25rem 1.75rem 1rem $blk,
//
-3rem 2rem 0 -0.5rem $bin4; //
}
&:after {
width: 6rem;
height: 6rem;
transform: translate3d(2rem, 2rem, 0) rotate(30deg) skewX(0deg);
background: $orange;
border-radius: 50%;
border: 0.15rem solid $orange;
box-shadow: inset 0.15rem -0.15rem 0.15rem $bs,
//
0 0 1rem $blk,
//
inset -5rem 0 0 -2rem rgba($db, 0.2);
}
}
i:nth-of-type(2) {
width: 3.5rem;
height: 3.5rem;
background: radial-gradient(at center bottom, $blk, $blk, $blue);
transform: translate3d(57.5rem, 2rem, 0) skew(5deg) scaleY(0.9);
border-radius: 50%;
box-shadow: inset 0 1rem 1rem rgba($blk, 0.5),
//
inset 0 0 0 0.15rem $blue,
//
0 0.5rem 0 $blk,
//
0 1rem 0.5rem $blk,
//
0.5rem 0.5rem 0.5rem $blk;
&:before {
width: 7rem;
border-radius: 50%;
background: radial-gradient(at 30% bottom, rgba($red, 0.5), $none),
$yellow;
height: 3rem;
transform: translate3d(-6.5rem, 2.75rem, 0) rotate(-15deg);
box-shadow: inset 0 0.25rem 0.15rem rgba(#fff, 0.5),
//
inset 0 -1rem 1rem rgba($blk, 0.5),
//
0 0 0.5rem $blk;
}
&:after {
width: 2rem;
height: 4rem;
transform: translate3d(-4rem, 2rem, 0) rotate(-20deg);
box-shadow: inset 0.25rem -0.25rem 0.25rem $db,
//
inset 0.35rem -0.35rem 0 $litter2,
//
inset -0.35rem -0.35rem 0 $litter2;
background: linear-gradient(
$none,
$none 10%,
$litter2 10%,
$litter2 20%,
$none 20%,
$db
);
}
}
i:nth-of-type(3) {
width: 2.5rem;
height: 6rem;
border-radius: 20% 20% 80% 80%;
border-top: 1rem solid $none;
border-left: 0.5rem solid darken($red, 20%);
border-right: 0.25rem solid darken($red, 15%);
border-bottom: 2rem solid $none;
transform: translate3d(63.5rem, 0, 0) rotate(20deg) skewY(20deg);
box-shadow: inset -0.15rem 0 0 $litter1, 0.15rem 0.15rem 0 $blue,
0 1rem 1rem $db;
&:before {
width: 6.5rem;
height: 2rem;
background: repeating-linear-gradient(
45deg,
$blue2,
$blue2 0.2rem,
$none 0.2rem,
$none 0.5rem
),
//
repeating-linear-gradient(
-45deg,
$blue2,
$blue2 0.2rem,
$none 0.2rem,
$none 0.5rem
);
border-radius: 50%;
transform: translate3d(3.5rem, -3.5rem, 0) rotate(-40deg) skewY(0deg);
box-shadow: 0.1rem -0.1rem 0.25rem -0.1rem #fff,
//
-0.25rem 0 0.25rem $blue,
//
0 0 0 0.25rem $blue2,
//
inset 1rem 0 1rem 0 $bs;
}
&:after {
width: 3rem;
height: 2rem;
background: $litter5;
transform: translate3d(3rem, -0.5rem, 0) rotate(-40deg) skewY(0deg);
border-radius: 0.5rem;
box-shadow: 0 0 1rem $blk,
//
inset 1rem 0 1rem $blk,
//
2rem 0.5rem 1rem $blk,
//
2rem 0.5rem 0 $litter5,
//
-3rem 0.2rem 0 $litter1,
//
-3rem 0.2rem 0.5rem $blk,
//
13rem 1.2rem 0 $litter1,
//
13rem 1.2rem 0.5rem $blk,
//
-18rem 2rem 0 $litter2,
//
-18rem 2rem 1rem $blk,
//
-16rem 1.5rem 0 $litter2,
//
-16rem 1.5rem 1rem $blk,
//
-13rem 1rem 0 $litter2,
//
-13rem 1rem 1rem $blk;
}
}
i:nth-of-type(4) {
width: 5rem;
height: 5rem;
background: $blk;
transform: translate3d(55rem, 6rem, 0) skewX(-45deg);
border-radius: 0.2rem;
box-shadow: -2rem 1rem 0 0 $blk;
}
i:nth-of-type(5) {
width: 5rem;
height: 6rem;
background: $red;
box-shadow: inset 0 0.15rem 0.15rem #fff,
inset 0 3rem 1rem rgba($db, 0.5);
transform: translate3d(47.5rem, 4.5rem, 0) skewX(-5deg) rotate(20deg);
border-radius: 50%;
&:before {
width: 10rem;
height: 3rem;
background: $bin4;
box-shadow: inset 0 0 0.15rem #fff;
transform: translate3d(1rem, 2rem, 0);
}
&:after {
width: 0.5rem;
height: 7rem;
transform: translate3d(5rem, -1rem, 0) rotate(10deg);
background: $yellow;
filter: drop-shadow(0 0 0.5rem $blk);
border-radius: 0.1rem;
box-shadow: inset 0 0.25rem 0.1rem rgba(#fff, 0.5),
inset -0.1rem 0.35rem 0.15rem rgba($red, 0.5),
//
6rem -7rem 0 $litter2,
//
9rem -6rem 0 $litter2,
//
9.25rem -6rem 0 $litter4,
//
2rem 0.5rem 0 $red,
//
2.5rem -1rem 0 rgba($red, 0.5),
//
2.5rem -1rem 0 $litter2;
}
}
}
}
}
// @import "litter2";
litter {
//actual stuff
layer4 {
i:nth-of-type(1) {
transform: translate3d(45rem, 2rem, 0) rotate(49deg);
width: 2rem;
height: 2rem;
background: $litter2;
border-radius: 0.2rem;
box-shadow: 1rem 1rem 0 $litter1,
//
2rem 2rem 0 $litter1,
//
19rem -23rem 0 $litter1;
&:before {
width: 3rem;
height: 2rem;
background: $litter2;
transform: translate3d(1rem, -1rem, 0) rotate(-67deg);
border-radius: 50%;
box-shadow: inset -0.5rem 0.2rem 1rem $litter1,
//
1rem 1rem 0 $litter1,
//
-4rem -1rem 0 $litter2,
//
-4rem 0rem 0 $litter1,
//
-4rem 0.5rem 0 $litter3,
//
-4rem 1rem 0 $litter1;
}
}
i:nth-of-type(2) {
width: 7rem;
height: 0.5rem;
background: $litter2;
border-radius: 0.5rem;
transform: translate3d(12rem, 5rem, 0) rotate(5deg) skewX(60deg);
box-shadow: -4rem 0.5rem 1rem $red,
//
1rem 0.5rem 0 $litter3,
//
-1rem 1rem 0 $litter2; //
&:after {
width: 5rem;
height: 5rem;
background: $litter2;
border-radius: 50% / 1rem;
transform: translate3d(10rem, -3.5rem, 0) rotate(-5deg) skewX(-60deg);
}
&:before {
width: 3rem;
height: 1.5rem;
background: $blue;
border-radius: 0.5rem / 50%;
transform: translate3d(22rem, -4.5rem, 0) rotate(-10deg) skewX(-65deg);
box-shadow: inset 0 0.25rem 0.15rem $ls, inset 0 0.5rem 0.25rem $blue2,
inset -0.5rem 0 0.25rem $ls;
}
}
i:nth-of-type(3) {
width: 3rem;
height: 1rem;
border-radius: 50%;
background: $bin3;
box-shadow: 0 0.25rem 0 $bin1;
transform: translate3d(13.5rem, 2.5rem, 0) rotate(-10deg) skewX(5deg);
&:before {
width: 3rem;
height: 1rem;
border-radius: 50%;
background: $litter2;
box-shadow: -2rem -0.5rem 0 $litter1, 1.75rem -0.3rem 0 $litter1;
transform: translate3d(-0.5rem, 1em, 0) rotate(10deg) skewX(-5deg);
}
&:after {
width: 3rem;
height: 3rem;
border-radius: 0.15rem;
background: $db;
transform: translate3d(5.2rem, 1.25em, 0) rotate(-10deg) skewX(5deg);
box-shadow: 6rem 0.6rem 0 $db;
}
}
///////////
i:nth-of-type(4) {
width: 3rem;
height: 2rem;
background: $yellow;
transform: translate3d(51rem, 4rem, 0) rotate(-10deg);
border-radius: 0.25rem;
box-shadow: inset 0 0.5rem 0.25rem rgba(#fff, 0.5),
//
0 0 0.5rem $blk,
//
-6rem 0.5rem 0 $yellow,
//
-12rem 0.5rem 0 $yellow,
//
5rem 0.5rem 0 $yellow,
//
12rem -0.5rem 0 $yellow,
//
14rem -1rem 0 $db;
&:before {
width: 2rem;
height: 3rem;
background: $yellow;
box-shadow: inset 0 0 0.5rem $red,
//
inset 0 -1rem 1rem $db,
//
inset 0 0 0.5rem $db;
transform: translate3d(9rem, 1rem, 0) rotate(43deg) skewY(60deg);
border-radius: 0.25rem;
}
&:after {
width: 2rem;
height: 5rem;
border: 0.5rem solid $litter2;
border-top-width: 1rem;
transform: translate3d(14rem, -2.5rem, 0) rotate(30deg);
border-radius: 50%;
box-shadow: 0.5rem 0 0 $litter4,
//
1rem 0 0 $litter4,
//
1.5rem 0 0 $litter4,
//
2rem 0 0 $litter4,
//
1rem 6rem 0 $litter1;
}
}
i:nth-of-type(5) {
width: 3rem;
height: 6rem;
background: linear-gradient(to right, $none, $ls, $none, $db), $red;
transform: translate3d(49rem, 3rem, 0) rotate(-8deg);
box-shadow: inset 0 0 0.5rem $db;
&:before {
width: 3rem;
height: 0.75rem;
background: linear-gradient(to right, $db, $none, $ls, $none), $red;
transform: translate3d(0, -0.25rem, 0);
box-shadow: inset 0 0 0.5rem $db,
//
0 0 0.1rem 0 $red,
//
-0.2rem 0 0.15rem 0 #fff,
//
0.2rem 0 0.15rem 0 $ls,
//
0 0 0 0.15rem rgba($litter2, 0.5),
//
0 0 0 0.15rem $red,
//
0 0 0.5rem $blk;
border-radius: 50%;
}
&:after {
width: 5rem;
height: 4rem;
border-radius: 1rem;
background: $litter2;
border: 0.25rem solid $db;
box-shadow: 0.25rem 0 0.25rem #fff,
//
0 0 0 0.25rem $litter2,
//
0 0 0.5rem $blk,
//
0.5rem 0.5rem 0 $db;
transform: translate3d(-9rem, 3rem, 0) skewX(-40deg) rotate(10deg);
}
}
i:nth-of-type(6) {
width: 3.5rem;
height: 3.5rem;
background: radial-gradient(at center bottom, $blk, $blk, $blue);
transform: translate3d(57.5rem, 2rem, 0) skew(5deg) scaleY(0.9);
border-radius: 50%;
box-shadow: inset 0 1rem 1rem rgba($blk, 0.5),
//
inset 0 0 0 0.15rem $blue,
//
0 0.5rem 0 $blk,
//
0 1rem 0.5rem $blk,
//
0.5rem 0.5rem 0.5rem $blk;
&:before {
width: 7rem;
border-radius: 50%;
background: radial-gradient(at 30% bottom, rgba($red, 0.5), $none),
$yellow;
height: 3rem;
transform: translate3d(-6.5rem, 2.75rem, 0) rotate(-15deg);
box-shadow: inset 0 0.25rem 0.15rem rgba(#fff, 0.5),
//
inset 0 -1rem 1rem rgba($blk, 0.5),
//
0 0 0.5rem $blk;
}
&:after {
width: 2rem;
height: 4rem;
transform: translate3d(-4rem, 2rem, 0) rotate(-20deg);
box-shadow: inset 0.25rem -0.25rem 0.25rem $db,
//
inset 0.35rem -0.35rem 0 $litter2,
//
inset -0.35rem -0.35rem 0 $litter2;
background: linear-gradient(
$none,
$none 10%,
$litter2 10%,
$litter2 20%,
$none 20%,
$db
);
}
}
i:nth-of-type(7) {
width: 2.5rem;
height: 6rem;
border-radius: 20% 20% 80% 80%;
border-top: 1rem solid $none;
border-left: 0.5rem solid darken($red, 20%);
border-right: 0.25rem solid darken($red, 15%);
border-bottom: 2rem solid $none;
transform: translate3d(63.5rem, 0, 0) rotate(20deg) skewY(20deg);
box-shadow: inset -0.15rem 0 0 $litter1, 0.15rem 0.15rem 0 $blue,
0 1rem 1rem $db;
&:before {
width: 6.5rem;
height: 2rem;
background: repeating-linear-gradient(
45deg,
$blue2,
$blue2 0.2rem,
$none 0.2rem,
$none 0.5rem
),
//
repeating-linear-gradient(
-45deg,
$blue2,
$blue2 0.2rem,
$none 0.2rem,
$none 0.5rem
);
border-radius: 50%;
transform: translate3d(3.5rem, -3.5rem, 0) rotate(-40deg) skewY(0deg);
box-shadow: 0.1rem -0.1rem 0.25rem -0.1rem #fff,
//
-0.25rem 0 0.25rem $blue,
//
0 0 0 0.25rem $blue2,
//
inset 1rem 0 1rem 0 $bs;
}
&:after {
width: 3rem;
height: 2rem;
background: $litter5;
transform: translate3d(3rem, -0.5rem, 0) rotate(-40deg) skewY(0deg);
border-radius: 0.5rem;
box-shadow: 0 0 1rem $blk,
//
inset 1rem 0 1rem $blk,
//
2rem 0.5rem 1rem $blk,
//
2rem 0.5rem 0 $litter5,
//
-3rem 0.2rem 0 $litter1,
//
-3rem 0.2rem 0.5rem $blk,
//
13rem 1.2rem 0 $litter1,
//
13rem 1.2rem 0.5rem $blk,
//
-18rem 2rem 0 $litter2,
//
-18rem 2rem 1rem $blk,
//
-16rem 1.5rem 0 $litter2,
//
-16rem 1.5rem 1rem $blk,
//
-13rem 1rem 0 $litter2,
//
-13rem 1rem 1rem $blk;
}
}
i:nth-of-type(8) {
width: 5rem;
height: 5rem;
background: $blk;
transform: translate3d(55rem, 6rem, 0) skewX(-45deg);
border-radius: 0.2rem;
box-shadow: -2rem 1rem 0 0 $blk;
}
i:nth-of-type(9) {
width: 5rem;
height: 6rem;
background: $red;
box-shadow: inset 0 0.15rem 0.15rem #fff, inset 0 3rem 1rem rgba($db, 0.5);
transform: translate3d(47.5rem, 4.5rem, 0) skewX(-5deg) rotate(20deg);
border-radius: 50%;
&:before {
width: 10rem;
height: 3rem;
background: $bin4;
box-shadow: inset 0 0 0.15rem #fff;
transform: translate3d(1rem, 2rem, 0);
}
&:after {
width: 0.5rem;
height: 7rem;
transform: translate3d(5rem, -1rem, 0) rotate(10deg);
background: $yellow;
filter: drop-shadow(0 0 0.5rem $blk);
border-radius: 0.1rem;
box-shadow: inset 0 0.25rem 0.1rem rgba(#fff, 0.5),
inset -0.1rem 0.35rem 0.15rem rgba($red, 0.5),
//
6rem -7rem 0 $litter2,
//
9rem -6rem 0 $litter2,
//
9.25rem -6rem 0 $litter4,
//
2rem 0.5rem 0 $red,
//
2.5rem -1rem 0 rgba($red, 0.5),
//
2.5rem -1rem 0 $litter2;
}
}
i:nth-of-type(10) {
width: 3rem;
height: 6rem;
background: linear-gradient(to right, $db, $none, $ls, #fff), $blk;
transform: translate3d(48rem, 5rem, 0) rotate(-40deg) scaleY(0.8);
border-radius: 1.5rem;
box-shadow: inset 0 0 0.5rem $db,
//
0 0 0.5rem $db,
//
0 -0.15rem 0 $blk,
//
0 -0.25rem 0 $litter2,
//
0 -0.3rem 0 $blk;
&:before {
width: 3rem;
height: 6rem;
background: $bin1;
transform: translate3d(-4rem, 1rem, 0) rotate(50deg) skewY(65deg);
box-shadow: inset 0.5rem 0 0.15rem $blk,
//
0 -0.5rem 0 $blue;
border-radius: 0.5rem;
}
&:after {
width: 6rem;
height: 6rem;
border: 0.5rem solid $blue3;
border-left-color: $none;
border-right-width: 0.75rem;
transform: translate3d(-4.5rem, -3rem, 0) rotate(50deg) skewX(25deg);
border-radius: 0 0.5rem 0 0;
}
}
i:nth-of-type(11) {
width: 3rem;
height: 3rem;
background: $litter2;
transform: translate3d(67.5rem, 4rem, 0) rotate(5deg);
border-radius: 0.5rem 50%;
box-shadow: inset 0 0 0.5rem #fff, 0 0 0.5rem $blk,
//
-8.5rem 1.5rem 0.5rem $litter2,
//
-8.5rem 1.5rem 0 #fff,
//
-8.5rem 1.5rem 0.5rem $blk,
//
//
-10rem 3rem 0.5rem $litter2,
//
-10rem 3rem 0 #fff,
//
-10rem 3rem 0.5rem $blk,
//
//
5rem -2rem 0.5rem $litter2,
//
5rem -2rem 0 #fff,
//
5rem -2rem 0.5rem $blk,
//
;
&:before {
width: 2rem;
height: 2rem;
background: linear-gradient(
to top right,
$litter5,
$litter5 60%,
$litter2 60%,
$litter2
);
transform: translate3d(3rem, 0rem, 0) rotate(-20deg);
border-radius: 0.5rem;
box-shadow: -1rem 0.5rem 0 $db,
//
-2rem 0.25rem 0 $bin3,
//
-3rem 0.15rem 0 $litter4,
//
-3.5rem 0rem 0 $bin3,
//
-4rem -0.5rem 0 $db,
//
-5rem 0rem 0 $litter4,
//
1rem -0.5rem 0 $blue,
//
1.5rem 0rem 0 $blue,
//
2rem 0.5rem 0 $blue,
//
2.5rem 1rem 0 $blue;
}
//this one
&:after {
width: 2.5rem;
height: 2.5rem;
background: linear-gradient(
to right,
$litter1,
$litter1 40%,
$litter2 50%,
$litter2
);
transform: translate3d(-1.2rem, 1.8rem, 0) rotate(10deg) skew(-5deg);
border-radius: 0.35rem;
box-shadow: inset 0 0 0.25rem 0 $litter1,
//
0 0 0 $blk,
//
-2rem 0.5rem 0 $litter2,
//
-4.75rem 0rem 0.25rem $litter3,
//
-5rem 0rem 0 $litter1,
//
//
5rem -1.5rem 0 $litter1,
//
3rem -1rem 0 $litter3,
//
2.5rem -0.25rem 0 $db,
//
2.25rem -0.5rem 0 $litter1,
//
6rem -2rem 0 $litter2,
//
7.5rem -2.5rem 0 $litter2,
//
9rem -3rem 0 $litter2,
//
10rem -3.5rem 0 $litter2,
//
12rem -4rem 0 $litter2,
//
13rem -4.75rem 0 $litter2; //
}
}
i:nth-of-type(12) {
width: 2rem;
height: 3rem;
transform: translate3d(49.6rem, 7.75rem, 0) rotate(45deg);
background: $blk;
border-radius: 50%;
box-shadow: //
2.5rem -1rem 1rem $litter4,
//
1.25rem -1.5rem 0 $litter1,
//
1.5rem -1.5rem 0 $litter4,
//
5.5rem -6.5rem 0 $litter4,
//
6.5rem -9.5rem 0 $litter4,
//
8.5rem -9.5rem 0 $litter2,
//
;
&:before {
width: 3rem;
height: 3rem;
background: $litter4;
transform: translate3d(3rem, 0rem, 0) rotate(25deg);
box-shadow: inset 0 -2rem 0 $litter4,
//
-0.5rem -2rem 0 $litter2,
//
0rem -2.5rem 0 $litter4,
//
-1.5rem 1rem 0 $litter2,
//
1rem -9rem 0 $sky1,
//
1rem -9rem 1rem $blk,
//
0.5rem -11rem 0 $litter1,
//
-0.5rem -9rem 0 $blue; //
}
&:after {
width: 2.5rem;
height: 2.5rem;
border-radius: 45%;
background: $litter1;
transform: translate3d(7rem, -4.5rem, 0) rotate(0deg);
box-shadow: 0 0 1rem $blk,
//
-1rem 0rem 0 $litter1,
//
-1rem 0rem 1rem $blk,
//
0rem -2rem 0 $litter1,
//
0rem -2rem 1rem $blk,
//
-1rem 2rem 0 $litter2,
//
-1rem 2rem 1rem $blk,
//
2rem -4rem 0 rgba($green, 0.8),
//
2rem -4rem 1rem 0.25rem $blk,
//
4.5rem -6.5rem 0 $litter1,
//
3rem -5rem 0 $blk,
//
4.25rem -7.75rem 0.25rem $litter2,
//
4rem -8rem 0 $litter1,
//
3.25rem -6.75rem 0.25rem $y2,
//
3rem -7rem 0 $yellow,
//
4.5rem -9rem 0 $litter2; //
}
}
i:nth-of-type(13) {
width: 2rem;
height: 2rem;
transform: translate3d(64rem, 9.25rem, 0) rotate(63deg) skew(-45deg);
background: linear-gradient(to bottom left, $litter2, $litter1);
border-radius: 0.25rem;
box-shadow: 0 0 1rem $blk,
//
-3rem -4.5rem 0.5rem $blk,
//
-3rem -4rem 0 $yellow,
//
-2.5rem -3.5rem 0.5rem $blk,
//
1.5rem 2.5rem 0 $litter1,
//
3rem 4rem 0 $litter1,
//
5.5rem 6.5rem 0 $litter1,
//
4.5rem 5rem 0 $litter1,
//
5.5rem 6.5rem 1rem $blk;
}
i:nth-of-type(14) {
width: 4rem;
height: 2rem;
background: $sky1;
transform: translate3d(27.5rem, 3rem, 0) rotate(5deg);
border-radius: 0.5rem;
border-top: 1rem solid $litter2;
border-left: 2rem solid rgba(#fff, 0.5);
border-right: 1rem solid $sky1;
&:before {
width: 4rem;
height: 2rem;
background: $litter2;
transform: translate3d(1.25rem, 0.15rem, 0) rotate(5deg);
border-radius: 0.25rem;
box-shadow: inset 0.15rem 0.15rem 0.1rem $ls,
//
0 -0.15rem 0 #fff,
//
0 0 0.5rem #fff;
border: 0.15rem solid $db;
}
&:after {
width: 4rem;
height: 3rem;
background: $litter2;
transform: translate3d(-1rem, 1rem, 0) rotate(25deg) skewX(-10deg);
border-radius: 0.25rem;
box-shadow: 0 0 1rem $blk,
//
inset 0.15rem 0.15rem 0.15rem #fff;
}
}
i:nth-of-type(15) {
width: 4rem;
height: 6rem;
transform: translate3d(4rem, -1rem, 0) skew(-8deg) rotate(-45deg);
border-radius: 0 0.25rem 5rem 0 / 0 5rem 2rem 0;
box-shadow: 0.5rem 1rem 0 $blue;
border-right: 0.75rem solid $blue;
border-bottom: 1rem solid $blue;
&:before {
width: 0.3rem;
height: 4rem;
border-radius: 50% 0 0 2rem;
transform: translate3d(0, 2rem, 0) skew(25deg) rotate(30deg);
background: $blue;
}
&:after {
width: 4rem;
height: 4rem;
border-radius: 0 0 1rem 1rem / 0 0 40% 40%;
transform: translate3d(4.5rem, 5rem, 0) skew(6deg) rotate(-5deg);
border-left: 0.25rem solid $blue;
}
}
i:nth-of-type(16) {
width: 7rem;
height: 4.5rem;
top: 3.5rem;
left: 5rem;
border-radius: 2.75rem;
transform: rotate(-25deg);
background: linear-gradient(
#fff,
rgba(#fff, 0.5) 10%,
rgba(#fff, 0.25) 50%,
rgba(#fff, 0.15) 55%,
$bin1
),
$bin4;
&:after {
width: 4.5rem;
height: 4.5rem;
top: 0rem;
left: 3rem;
border-radius: 50%;
background: linear-gradient($bin1, $bin2);
box-shadow: inset -3rem 0 0 rgba($blk, 0.25);
border: 0.15rem solid $bin2;
}
&:before {
width: 0.25rem;
height: 1rem;
border-left: 0.15rem solid $bin1;
border-top: 0.15rem solid $bin1;
transform: rotate(25deg) skewY(-45deg);
left: 2.75rem;
top: 0.75rem;
border-radius: 0.15rem;
box-shadow: -0.15rem -0.15rem 0.15rem rgba(#fff, 0.5),
inset 0.15rem 0.15rem 0.15rem rgba($bin1, 0.25);
filter: blur(0.05rem);
}
}
i:nth-of-type(17) {
width: 2rem;
height: 1rem;
border-radius: 0.25rem;
background: $litter4;
box-shadow: inset 0 0.15rem 0.1rem rgba(#fff, 0.25), 0 0 0.5rem 0 $bin1;
transform: translate3d(11rem, 6rem, 0) rotate(5deg) skew(-20deg);
&:before {
width: 2rem;
height: 2rem;
border-radius: 50% 50% 10% 40% / 50% 20% 10% 40%;
background: $litter3;
transform: translate3d(1.25rem, -0.25rem, 0) rotate(45deg);
box-shadow: inset -0.5rem -1.5rem 0.25rem rgba(#fff, 0.25),
inset -0.5rem -1.5rem 0.25rem $litter4,
inset 0 0.25rem 0.25rem rgba(#fff, 0.75);
}
&:after {
width: 2rem;
height: 2rem;
border-radius: 40%;
background: $litter3;
transform: translate3d(4.25rem, 0, 0) rotate(-25deg) skew(20deg);
box-shadow: inset 0 -0.25rem 0.25rem $litter4,
//
inset 0.25rem 0.25rem 0.25rem rgba(#fff, 0.75),
//
inset -0.25rem 0 0.25rem rgba(#fff, 0.75),
//
0 0 0.5rem 0.25rem $litter2;
}
}
i:nth-of-type(18) {
width: 2.25rem;
height: 1.75rem;
transform: translate3d(3.75rem, 5.8rem, 0) rotate(-10deg) skew(35deg);
border-radius: 50% / 0.5rem 0.25rem;
background: linear-gradient(to bottom right, rgba(#fff, 0.5), $litter2)
$litter1;
box-shadow: 0.25rem 0.25rem 0.25rem rgba($bin1, 0.5),
-0.25rem 0.25rem 0 $litter2;
&:before {
width: 1.75rem;
height: 2rem;
border-right: 0.5rem solid $bs;
border-bottom: 0.5rem solid $bs;
border-radius: 0.5rem;
box-shadow: inset -0.25rem -0.25rem 0.25rem $bs,
0.25rem 0.25rem 0.25rem $bs;
transform: translate3d(0.45rem, 0, 0) rotate(20deg) skewY(-45deg);
}
&:after {
width: 0.5rem;
height: 1rem;
border-radius: 50%;
transform: translate3d(0, 0.5rem, 0) rotate(20deg);
background: $red;
filter: blur(0.5rem);
}
}
i:nth-of-type(19) {
width: 1.5rem;
height: 1rem;
transform: translate3d(6rem, 7rem, 0) rotate(-10deg) skew(35deg);
border-radius: 50% / 0.5rem 0.25rem;
background: linear-gradient(to bottom, rgba(#fff, 0.5), $litter2) $litter1;
box-shadow: 0.25rem 0.25rem 0.25rem rgba($bin1, 0.5),
-0.25rem 0.25rem 0 $litter2, 0 0 0.25rem 0 $bin1;
&:before {
width: 2rem;
height: 1rem;
border-radius: 50% / 0.5rem 0.25rem;
background: linear-gradient(to bottom, rgba(#fff, 0.5), $litter4)
$litter3;
box-shadow: 0.25rem 0.25rem 0.25rem rgba($bin1, 0.5),
0.25rem 0 0.25rem 0 $bin1, 0 1rem 0 0 $litter4;
transform: translate3d(1.5rem, 0.25rem, 0) rotate(10deg) skew(-45deg);
}
&:after {
width: 2.25rem;
height: 3rem;
border-radius: 0.5rem;
background: $litter4;
box-shadow: inset 0.15rem 0.75rem 0.1rem rgba(#fff, 0.25),
0 0 0.5rem 0 $bin1;
transform: translate3d(2.75rem, -0.75rem, 0) rotate(40deg) skew(-20deg);
}
}
i:nth-of-type(20) {
width: 2.25rem;
height: 3rem;
border-radius: 0.3rem;
background: $litter4;
box-shadow: inset 0.15rem 0.75rem 0.1rem rgba(#fff, 0.25),
0 0 0.5rem 0 $bin1;
transform: translate3d(8.5rem, 7.25rem, 0) rotate(40deg) skew(-20deg);
&:before {
width: 4rem;
height: 3rem;
border-radius: 50%;
background: linear-gradient(to right, rgba(#fff, 0.5), $none, $none),
$litter4;
box-shadow: inset 0.5rem -0.5rem 0.1rem rgba($litter1, 0.5),
0 0 1rem 0 rgba($bin1, 0.5), inset 0 0 0.5rem $litter1;
transform: translate3d(-3rem, 3rem, 0);
border-left: 0.25rem solid $litter1;
}
&:after {
width: 5rem;
height: 3rem;
border-radius: 1.5rem;
background: linear-gradient(rgba(#fff, 0.5), $none, $none), $litter4;
box-shadow: inset -0.1rem 0.75rem 0.25rem rgba($litter1, 0.25),
0 0 1rem 0 rgba($bin1, 0.5), inset 0 0 0.5rem $litter1;
transform: translate3d(-6rem, 5.5rem, 0) rotate(-60deg);
border-top: 0.25rem solid $litter1;
border-right: 0.15rem solid $litter1;
}
}
i:nth-of-type(21) {
width: 3rem;
height: 2rem;
background: $litter2;
border-radius: 0.5rem;
transform: translate3d(11.75rem, 7.25rem, 0) rotate(-20deg) skewX(10deg);
box-shadow: 0 0 1rem $bin1,
inset -0.25rem 0.25rem 0.25rem rgba(#fff, 0.25);
&:before {
width: 5rem;
height: 2rem;
border-radius: 0.5rem;
background: $litter2;
transform: translate3d(-0.25rem, 1rem, 0) rotate(20deg);
box-shadow: 0 0 1rem $bs,
inset -0.25rem 0.25rem 0.25rem rgba(#fff, 0.25);
}
&:after {
width: 0.75rem;
height: 1.5rem;
background: $red;
transform: translate3d(0.5rem, 2rem, 0) rotate(-20deg) skewX(20deg);
border-radius: 0.25rem;
box-shadow: 0.5rem -0.5rem 0 $blue, inset 0.25rem 0 0.25rem $bs;
}
}
i:nth-of-type(22) {
width: 2.75rem;
height: 4rem;
border-radius: 0.3rem;
background: $litter4;
box-shadow: inset 0 0 0 2rem rgba(#fff, 0.25),
inset 0 0.5rem 0.25rem 0 rgba(#fff, 0.5), 0 0 1rem 0 rgba($bin1, 0.5);
transform: translate3d(10rem, 7.5rem, 0) rotate(15deg);
&:after {
width: 2.75rem;
height: 4rem;
border-radius: 0.5rem 1rem 0 0;
background: $litter1;
box-shadow: inset -0.5rem -0.5rem 0.25rem 0 rgba($bin1, 0.5),
0 0 1rem 0 rgba($bin1, 0.5);
transform: translate3d(-5rem, 1.25rem, 0) rotate(-5deg) skew(-40deg);
}
&:before {
width: 3rem;
height: 2rem;
border-radius: 50%;
background: linear-gradient(
to right,
$bin1,
$litter4,
$litter1,
$litter1
);
box-shadow: inset -0.5rem -0.5rem 0.25rem 0 rgba($bin1, 0.5),
0 0 1rem 0 $bin1;
transform: translate3d(-3rem, 2rem, 0) rotate(-5deg) skew(-40deg);
}
}
i:nth-of-type(23) {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: $litter1;
box-shadow: 0 0 1rem 0.25rem rgba($bin1, 0.5), 0 0 0 0.25rem $bin1,
-0.25rem 0.25rem 0 0.25rem $bin2;
transform: translate3d(3.75rem, 8.75rem, 0) skew(5deg);
&:after {
width: 2.75rem;
height: 5rem;
border-radius: 0.2rem;
background: linear-gradient($litter1, $litter1, $litter4);
box-shadow: 0 0 1rem 0 rgba($bin1, 0.5);
transform: translate3d(-3rem, 0.25rem, 0) rotate(45deg);
}
&:before {
width: 2rem;
height: 2rem;
border-radius: 0.5rem;
background: linear-gradient(
to right bottom,
$litter1,
$litter1 50%,
$litter3 55%,
$litter4
);
box-shadow: 0 0 1rem 0 rgba($bin1, 0.5), 0.5rem 0.5rem 0 $litter3,
1rem 1rem 0 $litter4;
transform: translate3d(-4rem, -0.5rem, 0) rotate(45deg) skew(-15deg);
border-right: 0.25rem solid $litter1;
border-bottom: 0.25rem solid $litter1;
}
}
i:nth-of-type(24) {
width: 1.75rem;
height: 1.75rem;
background: #fff;
border-radius: 0.5rem;
transform: translate3d(24rem, 2.5rem, 0) rotate(-55deg);
box-shadow: inset 0 0 0.25rem $litter1, 0 0 1rem $bs;
&:before {
width: 2rem;
height: 2rem;
background: $blue;
border-radius: 0.25rem;
transform: translate3d(1rem, 1.5rem, 0) rotate(50deg);
border-top: 0.15rem solid $litter1;
border-left: 0.25rem solid $litter2;
border-right: none;
box-shadow: inset 0 0 0.25rem $litter1, 0 0 1rem $bs;
}
&:after {
width: 3rem;
height: 2rem;
border-radius: 50%;
background: $litter1;
box-shadow: inset 0 0 0.25rem $litter2, 0 0 1rem $bs;
border-top: 0.15rem solid #fff;
border-left: 0.25rem solid $litter2;
transform: translate3d(-1rem, 1rem, 0) rotate(50deg);
}
}
i:nth-of-type(25) {
width: 3rem;
height: 5rem;
background: $litter1;
border-radius: 1rem / 50%;
transform: translate3d(19.5rem, 3rem, 0) rotate(-40deg);
box-shadow: inset 1.5rem 0 0.25rem $litter2,
inset -0.5rem 0 0 rgba(#fff, 0.2), inset 0 0.25rem 0 $litter1,
inset 0 0.5rem 0 $litter2;
&:after {
width: 2rem;
height: 1.5rem;
transform: translate3d(-1rem, 2.5rem, 0) rotate(-50deg) skew(-40deg);
background: $litter1;
border-radius: 0.25rem 0.5rem;
box-shadow: inset 0.25rem 0.25rem 0.25rem $litter2,
//
inset -0.5rem 0 0 rgba(#fff, 0.2),
//
-0.25rem -0.15rem 0 $litter2,
//
-0.5rem -0.25rem 0 $litter1,
//
-1rem -0.75rem 0 $litter2;
}
&:before {
width: 5rem;
height: 4rem;
border-radius: 0.5rem;
transform: translate3d(0, 2rem, 0);
background: linear-gradient(
to top right,
$litter2,
$litter3 50%,
$litter1 55%,
$litter1
);
box-shadow: inset -0.75rem 0.25rem 0.25rem $ls,
//
inset -0.25rem 0.25rem 0 $litter1,
//
inset -0.5rem 0 0 $litter2;
}
}
i:nth-of-type(26) {
width: 6rem;
height: 1.25rem;
background: $litter2;
border-radius: 0.5rem;
transform: translate3d(17rem, 7.5rem, 0) rotate(5deg);
box-shadow: inset 0 0.25rem 0.25rem $litter1, inset 0 -0.25rem 0.25rem $bs,
0 0 0.5rem $bs;
&:after {
width: 3rem;
height: 1.25rem;
background: $litter2;
border-radius: 0.5rem;
transform: translate3d(5rem, -1rem, 0) rotate(-20deg) skewX(25deg);
box-shadow: inset 0 0.25rem 0.25rem #fff, inset 0 -0.25rem 0.25rem $bs,
0 0 0.5rem $bs, 0 0 0.5rem $bs;
border-bottom: 0.25rem solid $db;
}
&:before {
width: 3rem;
height: 2.5rem;
border-radius: 0.5rem;
background: $litter2;
box-shadow: inset 0 0.25rem 0.25rem $litter1,
//
inset 0 0.25rem 0.25rem $ls,
//
inset 0 -0.25rem 0.25rem $bs,
//
0 0 0.5rem $bs,
//
0 0 0.5rem $bs,
//
1rem -1rem 0 $litter2;
transform: translate3d(7rem, -3rem, 0);
}
}
i:nth-of-type(27) {
width: 2rem;
height: 2rem;
background: $litter1;
border-radius: 0.5rem;
transform: translate3d(18rem, 7rem, 0) rotate(-60deg);
box-shadow: inset -0.45rem 0.45rem 0.15rem rgba(#fff, 0.5),
//
inset -1rem 1rem 1rem $ls,
//
inset 0 0 0.25rem 0.75rem $bs,
//
inset 0 0 0.35rem 0.5rem $ls,
//
-0.5rem 0.5rem 0 $litter3,
//
-0.25rem 0.25rem 0 $litter3,
//
-0.75rem 0.75rem 0 $litter2,
//
-1rem 1rem 0 $litter2,
//
0 0 0.5rem $litter2;
&:after {
width: 2rem;
height: 2rem;
background: $litter1;
border-radius: 0.5rem;
transform: translate3d(-2.5rem, -0.2rem, 0);
box-shadow: inset -0.45rem 0.45rem 0.15rem rgba(#fff, 0.5),
//
inset -1rem 1rem 1rem $ls,
//
inset 0 0 0.25rem 0.75rem $bs,
//
inset 0 0 0.25rem 0.5rem $ls,
//
-0.25rem 0.35rem 0 $litter3,
//
-0.5rem 0.7rem 0 $litter3,
//
-0.75rem 1rem 0 $litter2,
//
-1rem 1.5rem 0 $litter2,
//
0 0 0.5rem $litter2;
}
&:before {
width: 2rem;
height: 2rem;
background: $litter1;
border-radius: 0.5rem;
transform: translate3d(2rem, 3rem, 0) rotate(50deg);
box-shadow: inset -0.25rem 0.45rem 0.15rem rgba(#fff, 0.5),
//
inset 0.25rem 0.45rem 0.15rem rgba(#fff, 0.5),
//
inset -1rem 1rem 1rem $ls,
//
inset 0 0 0.25rem 0.75rem $bs,
//
inset 0 0 0.25rem 0.5rem $ls,
//
0 0.35rem 0 $litter3,
//
0 0.7rem 0 $litter3,
//
0 0 0.5rem $litter2;
}
}
i:nth-of-type(28) {
width: 5rem;
height: 5rem;
background: $litter2;
transform: translate3d(28.5rem, 7rem, 0) rotate(45deg);
border-radius: 0.5rem;
box-shadow: inset 1rem 0 0.25rem rgba(#fff, 0.7),
//
0 0 1rem $blk;
}
/////////////
i:nth-of-type(29) {
width: 6.25rem;
height: 10rem;
background: linear-gradient(to right, $blk, $bin1);
transform: translate3d(34.75rem, 3.5rem, 0) rotate(-25deg);
box-shadow: inset -0.5rem 0 0.5rem $ls,
inset -0.25rem 0 0.25rem rgba($litter3, 0.5);
&:before {
height: 2rem;
width: 6rem;
border-radius: 50%;
background: linear-gradient(to left, $blk, $bin1);
transform: translate3d(0.1175rem, -1rem, 0);
box-shadow: -0.1175rem 0 $blk,
//
0.1175rem 0.1rem 0 $litter4,
//
0 0.1rem 0.15rem $litter4,
//
inset 0 0.1rem 0.15rem $litter4;
}
&:after {
width: 2.5rem;
height: 4rem;
background: linear-gradient($litter1, $litter4);
border-radius: 50% 50% 1rem 0 / 0.75rem 0.5rem 50% 0;
transform: translate3d(-1.5rem, 0.25rem, 0) skewX(20deg);
box-shadow: inset 0 0.5rem 0.1rem $ls,
//
0 0 0.25rem $db;
}
}
i:nth-of-type(30) {
width: 2rem;
height: 4rem;
background: linear-gradient($litter1, $litter4);
transform: translate3d(35rem, 9rem, 0) rotate(7deg);
border-radius: 50% / 0.5rem;
box-shadow: inset 0 0.5rem 0.1rem $ls,
//
0 0 0.25rem $db,
//
1.5rem -0.75rem 0 $litter2,
//
-0.5rem -0.25rem 0 $litter2,
//
-0.5rem -0.5rem 0 $litter1,
//
1.25rem -0.75rem 0 $litter1,
//
2rem -0.5rem 0 $litter2;
&:before {
width: 2rem;
height: 4rem;
background: linear-gradient(to right, $blk, $litter4, $bin1);
transform: translate3d(-1.5rem, -0.5rem, 0) rotate(-25deg);
box-shadow: 0 0 1rem $blk;
}
&:after {
height: 1rem;
width: 2rem;
border-radius: 50%;
background: linear-gradient(to left, $blk, $bin1);
transform: translate3d(-2.35rem, -0.8rem, 0) rotate(-25deg);
box-shadow: inset 0 0.1rem 0.15rem $litter4;
}
}
i:nth-of-type(31) {
width: 6rem;
height: 4rem;
background: $litter1;
transform: translate3d(38rem, 8rem, 0) rotate(-25deg) skewX(55deg);
border-radius: 0.25rem;
box-shadow: inset 2rem 0 2rem $litter2,
//
inset -0.25rem 0 0 rgba(#fff, 0.5),
//
inset -0.25rem 0.5rem 0 $litter1,
//
inset -0.25rem -1rem 0 $litter1,
//
inset -0.5rem 0 0 $litter5;
&:before {
width: 4rem;
height: 3rem;
background: $litter1;
transform: translate3d(-3rem, -2rem, 0) rotate(-10deg) skewX(-40deg);
border-radius: 40% / 0.5rem;
box-shadow: 0 0 0.5rem $blk,
//
inset -1.5rem 0 0.25rem rgba(#fff, 0.5),
//
inset 0 -2rem 0.5rem $litter2;
}
&:after {
width: 2rem;
height: 2rem;
background: $yellow;
transform: translate3d(0, 0.25rem, 0) rotate(5deg) skewX(-40deg);
border-radius: 40% / 0.5rem;
box-shadow: 0 0 0.5rem $db,
//
inset 1rem 0 1rem $db,
//
inset -0.25rem 0.25rem 0.25rem rgba(#fff, 0.5);
}
}
i:nth-of-type(32) {
width: 20rem;
height: 2rem;
transform: translate3d(35rem, 11rem, 0);
border-radius: 40% / 0.5rem;
background: repeating-linear-gradient(
-50deg,
$bin2,
$bin1 0.5rem,
$none 0.5rem,
$none 1.4rem
),
$litter4;
box-shadow: 0 0 1rem $blk;
&:before {
width: 3rem;
height: 4rem;
background: $litter2;
transform: translate3d(-1rem, -1rem, 0) rotate(25deg);
border-radius: 40% / 0.5rem;
box-shadow: 0 0 0.5rem $blk,
//
inset 1rem 0.5rem 0.25rem rgba(#fff, 0.5),
//
inset 0 -2rem 0.5rem $litter4;
}
}
i:nth-of-type(33) {
width: 4rem;
height: 2rem;
background: $litter2;
transform: translate3d(26rem, 6.5rem, 0) rotate(35deg);
border-radius: 0.5rem;
box-shadow: inset 1rem 0 0.25rem rgba(#fff, 0.7),
//
0 0 1rem $blk;
&:before {
width: 8rem;
height: 2rem;
background: $litter2;
transform: translate3d(-1rem, 2rem, 0) rotate(-5deg);
border-radius: 2rem 0.25rem;
box-shadow: inset 4rem 0 0.25rem rgba(#fff, 0.7),
//
0 0 1rem $blk,
//
-0.25rem 1rem 0 $litter4;
}
&:after {
width: 5rem;
height: 2rem;
background: $litter2;
transform: translate3d(-4rem, 5rem, 0) rotate(-10deg);
border-radius: 2rem 0.25rem;
box-shadow: inset 3rem 0 0.25rem rgba(#fff, 0.7),
//
0 0 1rem $blk;
}
}
i:nth-of-type(34) {
width: 2rem;
height: 1.25rem;
border-radius: 0.5rem;
background: $litter2;
transform: translate3d(13.5rem, 9.25rem, 0) rotate(30deg) skew(-10deg);
box-shadow: 1rem 1.15rem 0.5rem $litter2,
//
0.75rem 1.15rem 0 $litter1,
//
inset 0.25rem 0.25rem 0.5rem $litter1,
//
1.5rem 0.5rem 0 $litter2,
//
0.5rem 0 0.5rem $litter2,
//
1.5rem 0.25rem 0.5rem $blk;
&:before {
width: 4rem;
transform: translate3d(2.5rem, -2.5rem, 0) skew(0deg) rotate(-50deg);
border: 1rem solid $none;
border-right-width: 0.5rem;
border-bottom-color: $litter2;
box-shadow: 0 2rem 0 $litter4,
//
0 3rem 1rem $blk; //
}
&:after {
width: 2rem;
height: 4rem;
background: linear-gradient($sky1, $litter1, $sky1, $blue2, $blue3);
transform: translate3d(3rem, -1rem, 0) skew(0deg) rotate(-55deg);
box-shadow: inset 0 0 0.5rem $blue2,
//
inset 0 0.5rem 0.5rem rgba(#fff, 0.5),
//
0 0 0.5rem $db,
//
-2rem 1rem 0 $litter2,
//
-2rem 1rem 1rem $blk;
border-radius: 20% / 80%;
}
}
i:nth-of-type(35) {
width: 4rem;
transform: translate3d(23.3rem, 11rem, 0) skewX(20deg) rotate(-30deg);
border: 2rem solid $none;
border-right-width: 2rem;
border-left-width: 0;
border-top-color: $db;
box-shadow: 0 -1rem 0 $ls,
//
0 -1rem 0 $db,
//
-2rem 0 1rem $db,
//
-2rem 0 1rem $db;
&:before {
background: $litter2;
border-radius: 50%;
width: 1.5rem;
height: 1rem;
transform: translate3d(2rem, -1rem, 0);
box-shadow: -0.5rem 0.25rem 0 $litter4,
//
1rem 0.5rem 0 $bin4,
//
1.5rem 0.75rem 0 $bin4,
//
2rem 1rem 0 $bin4,
//
2.5rem 1.5rem 0 $bin4,
//
1rem 0rem 0 $db,
//
//
1.5rem 0.5rem 0 $db,
//
2rem 0.75rem 0 $db,
//
2.5rem 1rem 0 $db,
//
3rem 1.25rem 0 $db,
//
3.5rem 1.5rem 0 $db,
//
4rem 2rem 0 $db,
//
4.5rem 3rem 0 $db,
//
//
1rem -0.25rem 0 $litter4,
//
1.5rem 0rem 0 $litter4,
//
2rem 0.5rem 0 $litter4,
//
2.5rem 1rem 0 $litter4; //
}
&:after {
width: 3rem;
height: 3rem;
border-radius: 0.25rem;
transform: translate3d(6rem, 1rem, 0) rotate(-20deg) skewX(30deg);
background: linear-gradient($litter2, $litter4);
box-shadow: 0 0 0.5rem $blk;
}
}
///
i:nth-of-type(36) {
width: 1.5rem;
height: 1rem;
transform: translate3d(65rem, 7rem, 0) skewX(-30deg);
border: 1.5rem solid $none;
box-sizing: content-box;
border-bottom: 1rem solid $litter1;
border-left-width: 0;
filter: drop-shadow(0 0 0.5rem $blk);
box-shadow: 0 1rem 0 $litter2,
//
-10rem 4rem 0 $litter1;
&:before {
width: 3rem;
height: 2rem;
background: linear-gradient(
30deg,
$litter2,
$litter2 1.7rem,
$litter1 1.75rem,
$litter2
);
transform: translate3d(-2rem, 2rem, 0) skewX(0deg) rotate(-5deg);
border-radius: 0.25rem 0.5rem;
box-shadow: 0 0 0.5rem $db,
//
3.5rem -1rem 0.5rem rgba($litter2, 0.75);
}
&:after {
width: 5rem;
height: 5rem;
background: rgba($blue2, 0.8);
transform: translate3d(-17rem, -0.5rem, 0) skewX(45deg);
border-radius: 0.5rem;
}
}
//
}
}
// @import "litter3";
litter {
layer3 {
filter: brightness(0.7) contrast(1.5);
transform: translate3d(-1rem, -2rem, 3rem);
l1 {
transform: translate3d(110rem, 1rem, 0) rotate(-34deg);
width: 2.5rem;
height: 2.5rem;
background: $litter1;
border-radius: 0.5rem;
box-shadow: inset 0 0 0.5rem #fff,
//
0 0 0.5rem rgba($db, 0.15);
&:before {
width: 2.5rem;
height: 2.5rem;
transform: translate3d(0.8rem, 0.3rem, 0) rotate(-23deg);
background: $litter1;
border-radius: 0.5rem;
box-shadow: inset 0 0 0.5rem #fff,
//
0 0 0.5rem rgba($db, 0.15),
//
-1.5rem -0.15rem 0.1rem $p1;
}
i {
width: 2.5rem;
height: 2.5rem;
transform: translate3d(-1.5rem, 0.6rem, 0) rotate(-30deg) skewX(19deg);
background: $litter2;
border-radius: 0.25rem;
box-shadow: inset 0 0 0.5rem $litter1,
//
inset 0 1rem 0.5rem $litter3,
//
0 0 0.5rem rgba($db, 0.15);
&:before {
width: 2rem;
height: 1rem;
transform: translate3d(2rem, 2.3rem, 0) rotate(3deg) skewX(-19deg);
background: $litter2;
border-radius: 0.25rem;
box-shadow: inset -0.15rem 0 0.25rem #fff,
//
inset 0 0.25rem 0.25rem $ls,
//
0 0 0.5rem rgba($db, 0.15),
//
0.5rem -0.25rem 0 0 $litter2;
}
&:after {
width: 1.5rem;
height: 1.5rem;
transform: translate3d(0.9rem, 1.75rem, 0) rotate(13deg) skewX(-19deg);
background: $litter2;
border-radius: 0.5rem;
box-shadow: inset 0 0.25rem 0.25rem #fff,
//
0 0 0.5rem rgba($db, 0.15),
//
0.3rem 0 0.2rem $litter3,
//
0.4rem 0 0 $p1;
}
}
&:after {
width: 2.5rem;
height: 2.5rem;
transform: translate3d(-2.5rem, 1.2rem, 0) rotate(-104deg) skewX(-33deg);
background: $litter1;
border-radius: 0.5rem;
box-shadow: inset 0 -1rem 0.25rem rgba($p1, 0.5),
//
inset -0.25rem 0 0.25rem #fff,
//
0 0 0.5rem rgba($db, 0.15);
}
}
l2 {
transform: translate3d(113.2rem, -0.5rem, 0);
width: 1.5rem;
height: 1.5rem;
background: $litter1;
border-radius: 50%;
box-shadow: inset 0.25rem 0 0.25rem #fff,
//
0 0 0.5rem rgba($db, 0.15),
//
inset -0.5rem 0 0.5rem $litter3,
//
0.5rem -1rem 0 -0.25rem #fff;
&:before {
width: 3.8rem;
height: 4rem;
transform: translate3d(-1.45rem, -3.3rem, 0) rotate(-33deg)
skewX(-40deg);
border-radius: 50%;
box-shadow: 0.75rem 1.25rem 0.25rem -1rem #fff,
//
1rem 2rem 0 -1rem $litter1,
//
1.75rem 2.5rem 0.25rem -1rem rgba(#fff, 0.5);
}
i {
width: 2rem;
height: 2rem;
transform: translate3d(-1rem, 2.75rem, 0);
background: $litter1;
border-radius: 50%;
box-shadow: inset 0.25rem 0 0.25rem #fff,
//
0 0 0.5rem rgba($db, 0.15),
//
inset -0.5rem 0 0.5rem $litter5,
//
0 -0.75rem 0 -0.25rem rgba($litter3, 0.8),
//
-1.2rem 0 0 rgba($bin2, 0.4);
&:before {
width: 3.5rem;
height: 1.5rem;
border-radius: 0.25rem;
transform: translate3d(2rem, -2.25rem, 0) rotate(-41deg);
background: linear-gradient(90deg, $litter4, $litter1);
box-shadow: inset 0 0.25rem 0.25rem #fff,
//
0 0 0.5rem rgba($db, 0.15);
}
&:after {
width: 2rem;
height: 1.5rem;
border-radius: 0.25rem;
transform: translate3d(2.8rem, -1.25rem, 0) rotate(5deg) skewX(15deg);
background: linear-gradient(-90deg, $litter4, $litter1);
box-shadow: inset 0 0.25rem 0.25rem #fff,
//
-0.4rem -0.25rem 0 -0.25rem #fff,
//
0 0 0.5rem rgba($db, 0.15),
//
-1.5rem 1.5rem 0 0 $litter1;
}
}
&:after {
width: 2rem;
height: 1.5rem;
transform: translate3d(-0.3rem, 1.8rem, 0) rotate(6deg);
border-radius: 0.25rem;
box-shadow: inset 0.25rem 0 0.25rem #fff,
//
0 0 0.5rem rgba($db, 0.15),
//
inset -0.5rem 0 0.5rem $litter5,
//
inset -1rem 0 0.5rem $litter2;
}
}
l3 {
transform: translate3d(112rem, -0.5rem, 0) rotate(-36deg);
width: 2.75rem;
height: 4rem;
border-radius: 0.3rem;
background: $litter4;
box-shadow: inset 0 0 0 2rem rgba(#fff, 0.25),
inset 0 0.5rem 0.25rem 0 rgba(#fff, 0.5), 0 0 1rem 0 rgba($bin1, 0.5);
&:after {
width: 2.75rem;
height: 4rem;
border-radius: 0.5rem 1rem 0 0;
background: $litter1;
box-shadow: inset -0.5rem -0.5rem 0.25rem 0 rgba($bin1, 0.5),
0 0 1rem 0 rgba($bin1, 0.5);
transform: translate3d(-5rem, 1.25rem, 0) rotate(-5deg) skew(-40deg);
}
&:before {
width: 3rem;
height: 2rem;
border-radius: 50%;
background: linear-gradient(
to right,
$bin1,
$litter4,
$litter1,
$litter1
);
box-shadow: inset -0.5rem -0.5rem 0.25rem 0 rgba($bin1, 0.5),
0 0 1rem 0 $bin1;
transform: translate3d(-3rem, 2rem, 0) rotate(-5deg) skew(-40deg);
}
i {
transform: translate3d(1rem, 3rem, 0) skew(35deg);
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: $litter1;
box-shadow: 0 0 1rem 0.25rem rgba($bin1, 0.5), 0 0 0 0.25rem $bin1,
-0.25rem 0.25rem 0 0.25rem $bin2;
&:after {
width: 2.75rem;
height: 5rem;
border-radius: 0.2rem;
background: linear-gradient($litter1, $litter1, $litter4);
box-shadow: 0 0 1rem 0 rgba($bin1, 0.5);
transform: translate3d(-3rem, 0.25rem, 0) rotate(45deg);
}
&:before {
width: 2rem;
height: 2rem;
border-radius: 0.5rem;
background: linear-gradient(
to right bottom,
$litter1,
$litter1 50%,
$litter3 55%,
$litter4
);
box-shadow: 0 0 1rem 0 rgba($bin1, 0.5), 0.5rem 0.5rem 0 $litter3,
1rem 1rem 0 $litter4;
transform: translate3d(-4rem, -0.5rem, 0) rotate(45deg) skew(-15deg);
border-right: 0.25rem solid $litter1;
border-bottom: 0.25rem solid $litter1;
}
}
}
/////
l1:nth-of-type(9) {
transform: translate3d(66rem, 10rem, 0) rotate(3deg) scale(2);
}
l2:nth-of-type(9) {
transform: translate3d(73rem, 11rem, 0) rotate(33deg) scale(2);
}
/////
l1:nth-of-type(8) {
transform: translate3d(80rem, 6rem, 0) rotate(3deg) scale(1.5);
}
l2:nth-of-type(8) {
transform: translate3d(81rem, 8rem, 0) rotate(43deg) scale(1.5);
}
l3:nth-of-type(9) {
transform: translate3d(87rem, 7rem, 0) rotate(-5deg) scale(1);
}
///
l1:nth-of-type(7) {
transform: translate3d(142rem, -4rem, 0) rotate(3deg) scale(1.5);
}
l2:nth-of-type(7) {
transform: translate3d(144rem, -1rem, 0) rotate(43deg) scale(1.5);
}
l3:nth-of-type(8) {
transform: translate3d(157rem, 5rem, 0) rotate(-5deg) scale(1);
}
//////
l1:nth-of-type(6) {
transform: translate3d(130rem, 4rem, 0) rotate(-20deg) scale(1.5);
}
l2:nth-of-type(6) {
transform: translate3d(137rem, 2rem, 0) rotate(8deg) scale(1.2);
}
l3:nth-of-type(7) {
transform: translate3d(135rem, -2rem, 0) rotate(-30deg) scale(1);
}
///
l1:nth-of-type(4) {
transform: translate3d(150rem, 4rem, 0) rotate(3deg) scale(1.5);
}
l2:nth-of-type(4) {
transform: translate3d(151rem, 6rem, 0) rotate(43deg) scale(1.5);
}
l3:nth-of-type(6) {
transform: translate3d(157rem, 5rem, 0) rotate(-5deg) scale(1);
}
///////
////
//////
l1:nth-of-type(4) {
transform: translate3d(108rem, -3.5rem, 0) rotate(3deg);
}
l2:nth-of-type(4) {
transform: translate3d(114rem, -6rem, 0) rotate(43deg);
}
l3:nth-of-type(5) {
transform: translate3d(117rem, -7rem, 0) rotate(-5deg) scale(0.5);
}
///
l1:nth-of-type(3) {
transform: translate3d(118rem, -7.5rem, 0) rotate(3deg);
}
l2:nth-of-type(3) {
transform: translate3d(128rem, -12rem, 0) rotate(43deg);
}
l3:nth-of-type(4) {
transform: translate3d(122rem, -10rem, 0) rotate(-5deg) scale(0.6);
}
///
l1:nth-of-type(2) {
transform: translate3d(141rem, -17.5rem, 0) rotate(3deg);
}
l2:nth-of-type(2) {
transform: translate3d(135rem, -16rem, 0) rotate(10deg);
}
l3:nth-of-type(3) {
transform: translate3d(129rem, -13rem, 0) rotate(-72deg) scale(0.6);
}
///
l1:nth-of-type(1) {
transform: translate3d(142rem, -20.5rem, 0) rotate(-4deg);
}
l2:nth-of-type(1) {
transform: translate3d(152rem, -19rem, 0) rotate(65deg);
}
l3:nth-of-type(2) {
transform: translate3d(147rem, -18rem, 0) rotate(28deg) scale(0.7);
}
l3:nth-of-type(1) {
transform: translate3d(147rem, -21rem, 0) rotate(-8deg) scale(0.7);
}
///
lg2 {
transform: translate3d(-11rem, 4rem, 0) scale(1.05);
l2:nth-of-type(2) {
transform: translate3d(138rem, -12rem, 0) rotate(-10deg) scale(-1);
}
filter: brightness(0.9);
}
lg25 {
transform: translate3d(-20rem, 10rem, 0) scale(1.05);
filter: brightness(0.9);
}
lg3 {
filter: brightness(0.8);
transform: translate3d(-12rem, 7.9rem, 0) scale(1.1);
l1:nth-of-type(3) {
transform: translate3d(118rem, -7.5rem, 0) rotate(3deg) scaleX(-1);
}
l1:nth-of-type(5) {
transform: translate3d(142rem, -4rem, 0) rotate(3deg) scaleX(-1);
}
l2:nth-of-type(7) {
transform: translate3d(144rem, -1rem, 0) rotate(43deg) scaleX(-1);
}
}
lg4 {
filter: brightness(0.7);
transform: translate3d(-26rem, 15rem, 0) scale(1.15);
}
lg5 {
filter: brightness(0.7);
transform: rotate(-22deg) translate3d(-29rem, 74rem, 0) scale(1.2);
}
lg6 {
filter: brightness(0.6);
transform: rotate(25deg) translate3d(-84rem, -28rem, 0) scale(1.5);
}
lg7 {
filter: brightness(0.6);
transform: rotate(-8deg) translate3d(-151rem, 58rem, 0) scale(2);
}
lg8 {
l1,
l2,
l3 {
&:nth-of-type(-n + 7) {
display: none;
}
}
}
}
layer2 {
opacity: 0.8;
filter: drop-shadow(-0.5rem 0 0 $db);
i:nth-of-type(1),
i:nth-of-type(2) {
background: linear-gradient($litter1, $none);
width: 2rem;
height: 0.75rem;
transform: translate3d(40rem, -5rem, 0);
box-shadow: 10rem 1rem 0 $litter2,
//
25rem -2rem 0 $litter2,
//
40rem -1rem 0 $litter1,
//
-15rem -0.5rem 0 $litter4;
&:before {
transform: translate3d(5rem, -1rem, 0) skewY(2deg);
width: 1.5rem;
height: 0.75rem;
background: linear-gradient($litter1, $none);
border-radius: 0.75rem 0.5rem 0 0;
box-shadow: 12rem 1.5rem 0 $litter1,
//
27rem -1.5rem 0 $litter4,
//
37rem -0.5rem 0 $litter2,
//
-10rem -1rem 0 $litter1;
}
&:after {
transform: translate3d(-1rem, 2rem, 0) skewY(-5deg);
width: 1.5rem;
height: 0.75rem;
background: linear-gradient($litter1, $none);
border-radius: 0.2rem 0.2rem 0 0;
box-shadow: 12rem 1.5rem 0 $litter1,
//
27rem -1.5rem 0 $litter4,
//
37rem -0.5rem 0 $litter2,
//
-10rem -1rem 0 $litter1;
}
}
i:nth-of-type(2) {
transform: translate3d(65rem, -2rem, 0) scaleX(-1);
}
}
}
// @import "legs-r";
leg1,
leg2,
leg3,
leg4,
leg4f {
i,
i:before,
i:after {
width: 1.6rem;
height: 5.25rem;
border-radius: 1rem;
transform-origin: 50% 0;
background-image: repeating-radial-gradient(
circle at 50% 100%,
$legsd,
$legsd 0.15rem,
$none 0.15rem,
$none 0.4rem
),
//
linear-gradient(
to right,
$legsl,
$legsd,
$legs,
$legs,
rgba($metall, 0.1),
$legs,
$legsd
);
background-color: $legs;
background-clip: padding-box;
border-left: 0.05rem dashed rgba($legsd, 0.5);
border-right: 0.05rem dashed rgba($legsd, 0.5);
}
i {
filter: blur(0.05rem);
}
}
leg1 {
i {
&:nth-of-type(2) {
transform: translate3d(57rem, 30rem, 0) rotate(12deg);
&:before {
transform: translate3d(-0.05rem, 4rem, 0) rotate(-2deg);
}
&:after {
transform: translate3d(0.05rem, 8rem, 0) rotate(-5deg);
}
}
&:nth-of-type(3) {
transform: translate3d(54.9rem, 41.8rem, 0) rotate(6deg);
&:before {
transform: translate3d(-0.05rem, 4rem, 0) rotate(1deg);
}
&:after {
transform: translate3d(-0.05rem, 8rem, 0) rotate(3deg);
}
}
&:nth-of-type(4) {
transform: translate3d(53.4rem, 53.8rem, 0) rotate(9deg);
&,
&:before,
&:after {
background-image: repeating-radial-gradient(
circle at 50% -150%,
$legsd,
$legsd 0.15rem,
$none 0.15rem,
$none 0.4rem
),
//
linear-gradient(
to right,
$legsd,
$legsd,
$legs,
$legs,
rgba($metall, 0.1),
$legs,
$legsd
);
}
&:before {
transform: translate3d(-0.05rem, 4rem, 0) rotate(1deg);
}
&:after {
transform: translate3d(-0.05rem, 8rem, 0) rotate(3deg);
}
}
&:nth-of-type(5) {
transform: translate3d(51.3rem, 65.7rem, 0) rotate(13deg);
&,
&:before,
&:after {
background-image: repeating-radial-gradient(
circle at 50% -90%,
$legsd,
$legsd 0.15rem,
$none 0.15rem,
$none 0.4rem
),
//
linear-gradient(
to right,
$legsd,
$legsd,
$legs,
$legs,
rgba($metall, 0.1),
$legs,
$legsd
);
}
&:before {
transform: translate3d(-0.02rem, 4rem, 0) rotate(1deg);
}
&:after {
transform: translate3d(-0.08rem, 8rem, 0) rotate(1deg);
}
}
&:nth-of-type(6) {
transform: translate3d(48.5rem, 77.5rem, 0) rotate(15deg);
&,
&:before,
&:after {
background-image: repeating-radial-gradient(
circle at 50% -10%,
$legsd,
$legsd 0.15rem,
$none 0.15rem,
$none 0.4rem
),
//
linear-gradient(
to right,
$legsd,
$legsd,
$legs,
$legs,
rgba($metall, 0.1),
$legs,
$legsd
);
}
&:before {
transform: translate3d(-0.02rem, 4rem, 0) rotate(1deg);
background-image: repeating-radial-gradient(
circle at 30% -10%,
$legsd,
$legsd 0.15rem,
$none 0.15rem,
$none 0.4rem
),
//
linear-gradient(
to right,
$legsd,
$legsd,
$legs,
$legs,
rgba($metall, 0.1),
$legs,
$legsd
);
}
&:after {
transform: translate3d(0rem, 8rem, 0) rotate(1deg) skewY(-20deg)
scaleY(0.4);
height: 0.6rem;
background-clip: padding-box;
border-radius: 1rem 1rem 1.75rem 1.75rem / 0.3rem;
background: $none;
box-shadow: 0 0.5rem 0 $legsd,
//
0 1rem 0 $legs,
//
0 1.5em 0 $legsd,
//
0 2rem 0 $legs,
//
0 2.5rem 0 $legsd,
//
0 3rem 0 0.1rem $legs,
//
0 3.5em 0 0.1rem $legsd,
//
0 4rem 0 0.2rem $legs,
//
0 4.5rem 0 0.2rem $legsd,
//
0 5rem 0 0.3rem $legs,
//
0 5.5em 0 0.4rem $legsd,
//
0 6rem 0 0.5rem $legs,
//
0 6.5rem 0 0.6rem $legsd,
//
0 7rem 0 0.75rem $legs;
}
}
//up
&:nth-of-type(1) {
transform: translate3d(63rem, 21rem, 0) rotate(46deg);
background-image: repeating-radial-gradient(
circle at 50% 0,
$legsd,
$legsd 0.15rem,
$none 0.15rem,
$none 0.4rem
),
//
linear-gradient(
to right,
$legsd,
$legsd,
$legs,
$legs,
rgba($metall, 0.1),
$legs,
$legsd
);
&:before {
transform: translate3d(-0.15rem, 4rem, 0) rotate(-12deg);
border-radius: 1rem 1rem 1rem 1rem / 1rem 1rem 1rem 3rem;
}
&:after {
transform: translate3d(0.4rem, 7.5rem, 0) rotate(-30deg);
border-radius: 1rem 1rem 1rem 1rem / 3rem 1rem 1rem 1rem;
}
}
&:nth-of-type(7) {
transform: translate3d(85rem, 54rem, 0);
background: none;
border: none;
&:before {
width: 35rem;
height: 0.3rem;
transform: translate3d(-41rem, 16rem, 0) rotate(-38.5deg);
filter: blur(0.05rem);
background: $blk2;
}
&:after {
width: 35rem;
height: 0.3rem;
transform: translate3d(-41rem, 16.25rem, 0) rotate(-37deg);
filter: blur(0.05rem);
background: $blk2;
}
}
}
}
leg2 {
i,
i:before,
i:after {
width: 1.8rem;
}
i {
&:nth-of-type(1) {
transform: translate3d(69.5rem, 19rem, 0) rotate(0);
&:before {
transform: translate3d(-3rem, -3rem, 0) rotate(-45deg);
border-radius: 1rem 1rem 1rem 1rem / 1rem 3rem 3rem 1rem;
}
&:after {
transform: translate3d(-7rem, -2rem, 0) rotate(-95deg);
border-radius: 1rem 1rem 1rem 1rem / 1rem 3rem 3rem 1rem;
}
}
&:nth-of-type(2) {
transform: translate3d(59rem, 19.5rem, 0) rotate(-120deg);
&:before {
transform: translate3d(-1.5rem, -4rem, 0) rotate(-20deg);
border-radius: 1rem 1rem 1rem 1rem / 1rem 3rem 3rem 1rem;
}
&:after {
transform: translate3d(-3rem, -7rem, 0) rotate(334deg);
border-radius: 1rem 1rem 1rem 1rem / 1rem 3rem 3rem 1rem;
}
}
&:nth-of-type(3) {
transform: translate3d(53.3rem, 29rem, 0) rotate(-158deg);
&,
&:before,
&:after {
background-image: repeating-radial-gradient(
circle at 50% 0%,
$legsd,
$legsd 0.15rem,
$none 0.15rem,
$none 0.4rem
),
//
linear-gradient(
to left,
$legsd,
$legsd,
$legs,
$legs,
rgba($metall, 0.1),
$legs,
$legsd
);
}
&:before {
transform: translate3d(-1rem, -3.5rem, 0) rotate(-11deg);
background-color: darken(#fff, 40%);
}
&:after {
transform: translate3d(-2rem, -7rem, 0) rotate(-16deg);
background-color: darken(#fff, 30%);
}
}
&:nth-of-type(4) {
transform: translate3d(52.5rem, 35rem, 0) rotate(3deg);
background-color: darken(#fff, 20%);
&:before {
transform: translate3d(-0.2rem, 4rem, 0) rotate(-2deg);
background-color: darken(#fff, 10%);
}
&:after {
transform: translate3d(-0.1rem, 8rem, 0) rotate(-4deg);
background-color: darken(#fff, 10%);
}
}
&:nth-of-type(5) {
transform: translate3d(52.1rem, 46.5rem, 0) rotate(-2deg);
border-radius: 1rem 1rem 1rem 1rem / 2rem 2rem 1rem 1rem;
background-color: darken(#fff, 20%);
&,
&:before,
&:after {
width: 1.9rem;
box-shadow: 0.025rem 0.1rem 0 rgba(#fff, 0.5);
border-right: 0.05rem dashed rgba($legsd, 0.9);
}
&:before {
transform: translate3d(-0.2rem, 4rem, 0) rotate(-2deg);
background-color: darken(#fff, 30%);
}
&:after {
transform: translate3d(-0.1rem, 8rem, 0) rotate(-4deg);
}
}
&:nth-of-type(6) {
transform: translate3d(52.7rem, 58rem, 0) rotate(-7deg);
&,
&:before,
&:after {
background-color: darken($light, 25%);
width: 2rem;
border-left: 0.05rem dashed $sky5;
}
&:before {
transform: translate3d(-0.2rem, 4rem, 0) rotate(-2deg);
background-color: darken($light, 15%);
}
&:after {
transform: translate3d(-0.1rem, 8rem, 0) rotate(-4deg);
background-color: $light;
}
}
&:nth-of-type(7) {
transform: translate3d(54.4rem, 69.5rem, 0) rotate(-10deg);
background-color: darken($light, 15%);
width: 2.05rem;
&:before {
transform: translate3d(-0.1rem, 3.5rem, 0) rotate(0deg);
width: 2.075rem;
background-color: darken($light, 25%);
}
&:after {
transform: translate3d(-0.1rem, 7rem, 0) rotate(0deg);
width: 2.1rem;
background-color: darken($light, 15%);
}
}
&:nth-of-type(8) {
transform: translate3d(56.1rem, 79rem, 0) rotate(-10deg);
background-color: $light;
&,
&:before,
&:after {
width: 2.2rem;
height: 4.9rem;
}
&:before {
transform: translate3d(-0.1rem, 3.9rem, 0) rotate(0deg);
background-color: darken($light, 15%);
}
&:after {
transform: translate3d(0rem, 7.5rem, 0) rotate(11deg) skewY(-9deg)
scaleY(0.4);
height: 0.5rem;
border-radius: 1rem 1rem 1.75rem 1.75rem / 0.3rem;
background: $none;
box-shadow: 0 0.5rem 0 $legsd,
//
0 1rem 0 $legs,
//
0 1.5em 0 $legsd,
//
0 2rem 0 $legs,
//
0 2.5rem 0 $legsd,
//
0 3rem 0 0.1rem $legs,
//
0 3.5em 0 0.1rem $legsd,
//
0 4rem 0 0.2rem $legs,
//
0 4.5rem 0 0.3rem $legsd,
//
0 5rem 0 0.4rem $legs,
//
-0.1rem 5.5em 0 0.5rem $legsd,
//
-0.1rem 6rem 0 0.6rem $legs,
//
-0.15rem 6.5rem 0 0.8rem $legsd,
//
-0.175rem 7rem 0 1rem $legs,
//
-0.175rem 7.5rem 0 1.2rem $legsd; //
}
}
}
}
leg3 {
i,
i:before,
i:after {
width: 2rem;
}
i {
&:nth-of-type(1) {
transform: translate3d(66.5rem, 17rem, 0) rotate(2deg);
height: 7rem;
&:before {
transform: translate3d(-3rem, -3rem, 0) rotate(-45deg);
border-radius: 1rem 1rem 1rem 1rem / 1rem 3rem 3rem 1rem;
}
&:after {
transform: translate3d(-7rem, -2rem, 0) rotate(-95deg);
border-radius: 1rem 1rem 1rem 1rem / 1rem 3rem 3rem 1rem;
}
}
&:nth-of-type(2) {
transform: translate3d(56.5rem, 16.25rem, 0) rotate(-112deg);
&:before {
transform: translate3d(-1.1rem, -4rem, 0) rotate(-14deg);
border-radius: 1rem 1rem 1rem 1rem / 1rem 3rem 3rem 1rem;
}
&:after {
transform: translate3d(-3rem, -7.5rem, 0) rotate(-27deg);
border-radius: 1rem 1rem 1rem 1rem / 1rem 3rem 3rem 1rem;
}
}
&:nth-of-type(3) {
transform: translate3d(49rem, 25rem, 0) rotate(-151deg);
&,
&:before,
&:after {
background-image: repeating-radial-gradient(
circle at 50% 0%,
$legsd,
$legsd 0.15rem,
$none 0.15rem,
$none 0.4rem
),
//
linear-gradient(
to right,
$legsd,
$legsd,
$legs,
$legs,
rgba($metall, 0.1),
$legs,
$legsd
);
}
&:before {
transform: translate3d(-0.6rem, -3.5rem, 0) rotate(-7deg);
}
&:after {
transform: translate3d(-1.3rem, -7rem, 0) rotate(-10deg);
}
}
&:nth-of-type(4) {
transform: translate3d(47rem, 30.5rem, 0) rotate(20deg);
&:before {
transform: translate3d(0rem, 4rem, 0) rotate(1deg);
}
&:after {
transform: translate3d(-0.1rem, 8rem, 0) rotate(2deg);
}
}
&:nth-of-type(5) {
transform: translate3d(42.9rem, 41.5rem, 0) rotate(23deg);
&,
&:before,
&:after {
width: 1.9rem;
}
&:before {
transform: translate3d(-0.1rem, 4rem, 0) rotate(3deg);
}
&:after {
transform: translate3d(-0.4rem, 8rem, 0) rotate(6deg);
}
}
&:nth-of-type(6) {
transform: translate3d(37.7rem, 52rem, 0) rotate(35deg);
&:before {
transform: translate3d(-0.1rem, 4rem, 0) rotate(2deg);
}
&:after {
transform: translate3d(-0.2rem, 8rem, 0) rotate(4deg);
}
}
&:nth-of-type(7) {
transform: translate3d(30.6rem, 61.5rem, 0) rotate(40deg);
&,
&:before,
&:after {
background-image: repeating-radial-gradient(
circle at 60% -10%,
$legsd,
$legsd 0.15rem,
$none 0.15rem,
$none 0.4rem
),
//
linear-gradient(
to right,
$legsd,
$legsd,
$legs,
$legs,
rgba($metall, 0.1),
$legs,
$legsd
);
width: 2.1rem;
height: 10rem;
}
&:before {
transform: translate3d(-0.1rem, 9rem, 0) rotate(1deg);
}
&:after {
transform: translate3d(-0.3rem, 18rem, 0) rotate(2deg);
}
}
&:nth-of-type(8) {
transform: translate3d(13rem, 81.6rem, 0) rotate(43deg);
&,
&:before,
&:after {
background-image: repeating-radial-gradient(
circle at 0% -30%,
$legsd,
$legsd 0.15rem,
$none 0.15rem,
$none 0.4rem
),
//
linear-gradient(
to right,
$legsd,
$legsd,
$legs,
$legs,
rgba($metall, 0.1),
$legs,
$legsd
);
width: 2.2rem;
height: 4.5rem;
}
&:before {
transform: translate3d(-0.1rem, 3.5rem, 0) rotate(0deg);
width: 2.4rem;
}
&:after {
transform: translate3d(0rem, 6rem, 0) rotate(-3deg) skewY(-45deg)
scaleY(0.4);
height: 0.5rem;
border-radius: 1rem 1rem 1.75rem 1.75rem / 0.3rem;
background: $none;
width: 2.2rem;
height: 1rem;
box-shadow: 0 0.5rem 0 $legsd,
//
0 1rem 0 $legs,
//
0 1.5em 0 $legsd,
//
0 2rem 0 $legs,
//
0 2.5rem 0 $legsd,
//
0 3rem 0 0.1rem $legs,
//
0 3.5em 0 0.1rem $legsd,
//
0 4rem 0 0.2rem $legs,
//
0 4.5rem 0 0.2rem $legsd,
//
0 5rem 0 0.3rem $legs,
//
0.1rem 5.5em 0 0.4rem $legsd,
//
0.1rem 6rem 0 0.5rem $legs,
//
0.2rem 6.5rem 0 0.6rem $legsd,
//
0.3rem 7rem 0 0.7rem $legs,
//
0.4rem 7.5rem 0 0.8rem $legsd; //
}
}
&:nth-of-type(9) {
transform: translate3d(64.8rem, 55rem, 0) skewY(-3deg);
background: none;
border: none;
&:before {
width: 53rem;
height: 0.4rem;
background: $blk3;
transform: translate3d(-51rem, 10.7rem, 0) rotate(-24.5deg);
}
&:after {
width: 53rem;
height: 0.4rem;
background: $blk3;
transform: translate3d(-51rem, 11.25rem, 0) rotate(-23deg);
}
}
}
}
leg4 {
i,
i:before,
i:after {
width: 2rem;
}
i {
&:nth-of-type(1) {
transform: translate3d(63.5rem, 16rem, 0) rotate(2deg);
height: 7rem;
&:before {
transform: translate3d(-1.4rem, -4.1rem, 0) rotate(-17deg);
border-radius: 1rem 1rem 1rem 1rem / 1rem 3rem 3rem 1rem;
height: 5.5rem;
}
&:after {
transform: translate3d(-5.8rem, -4.5rem, 0) rotate(-77deg);
border-radius: 1rem 1rem 1rem 1rem / 1rem 3rem 3rem 1rem;
}
}
&:nth-of-type(2) {
transform: translate3d(48rem, 16rem, 0) rotate(-127deg);
&:before {
transform: translate3d(0rem, 4rem, 0) rotate(16deg);
}
&:after {
transform: translate3d(-1rem, 7.75rem, 0) rotate(28deg);
border-radius: 1rem 1rem 1rem 1rem / 1rem 1rem 3rem 1rem;
}
}
&:nth-of-type(3) {
transform: translate3d(45.5rem, 19rem, 0) rotate(-139deg);
&,
&:before,
&:after {
background-image: repeating-radial-gradient(
circle at 50% 0%,
$legsd,
$legsd 0.15rem,
$none 0.15rem,
$none 0.4rem
),
//
linear-gradient(
to right,
$legsd,
$legsd,
$legs,
$legs,
rgba($metall, 0.1),
$legs,
$legsd
);
}
&:before {
transform: translate3d(-1.3rem, -3.5rem, 0) rotate(-15deg);
}
&:after {
transform: translate3d(-3.2rem, -7rem, 0) rotate(-27deg);
}
}
&:nth-of-type(4) {
transform: translate3d(43.45rem, 25rem, 0) rotate(7deg);
background-color: darken(#fff, 40%);
&:before {
transform: translate3d(-0.15rem, 4rem, 0) rotate(-5deg);
background-color: darken(#fff, 30%);
}
&:after {
transform: translate3d(0.2rem, 7.8rem, 0) rotate(-8deg);
background-color: darken(#fff, 10%);
}
}
&:nth-of-type(5) {
transform: translate3d(42.88rem, 36.7rem, 0) rotate(0deg);
background-color: #fff;
&,
&:before,
&:after {
width: 2.1rem;
box-shadow: 0.025rem 0.1rem 0 rgba(#888, 0.5);
border-left: 0.05rem dashed rgba($legsd, 0.9);
border-right: 0.05rem dashed rgba($legsd, 0.9);
}
&:before {
transform: translate3d(-0.1rem, 4rem, 0) rotate(3deg);
//im here
background-image: repeating-radial-gradient(
circle at 50% 100%,
$legsd,
$legsd 0.15rem,
$none 0.15rem,
$none 0.4rem
),
//
linear-gradient(90deg, $legsd, $legsd, $legs, $none, $legs, $legsd),
//
linear-gradient(darken(#fff, 10%), $legs, darken(#fff, 10%), #fff);
}
&:after {
transform: translate3d(-0.3rem, 8rem, 0) rotate(6deg);
width: 2.2rem;
background-color: #fff;
background-image: repeating-radial-gradient(
circle at 50% 100%,
$legsd,
$legsd 0.15rem,
$none 0.15rem,
$none 0.4rem
),
//
linear-gradient(
to right,
$legsd,
$legsd,
$legs,
$legs,
$none,
$legs,
$legs,
$legsd
);
}
}
&:nth-of-type(6) {
transform: translate3d(42.2rem, 48.8rem, 0) rotate(9deg) scaleY(2);
filter: blur(0);
background-color: darken(#fff, 10%);
&,
&:before,
&:after {
width: 2.4rem;
height: 3rem;
background-image: repeating-radial-gradient(
circle at 50% 110%,
$legsd,
$legsd 0.1rem,
$none 0.1rem,
$none 0.2rem
),
//
linear-gradient(
to right,
$legsd,
$legsd,
$legs,
$legs,
$none,
$legs,
$legs,
$legsd
);
border-left: 0.05rem dotted rgba($legsd, 0.5);
border-right: 0.05rem dotted rgba($legsd, 0.5);
border-radius: 0.75rem;
box-shadow: 0 -0.2rem 0.1rem -0.1rem $legs;
}
&:before {
background-image: repeating-radial-gradient(
circle at 55% 110%,
$legsd,
$legsd 0.1rem,
$none 0.1rem,
$none 0.2rem
),
//
linear-gradient(
to right,
$legsd,
$legsd,
$legs,
$none,
$legs,
$legs,
$legsd
);
transform: translate3d(-0.1rem, 2rem, 0) rotate(10deg) skewY(-7deg);
width: 2.5rem;
background-color: darken(#fff, 20%);
border-radius: 1.5rem 0.75rem 0.75rem 0.75rem / 1rem;
}
&:after {
background-image: repeating-radial-gradient(
circle at 55% 110%,
$legsd,
$legsd 0.1rem,
$none 0.1rem,
$none 0.2rem
),
//
linear-gradient(
to right,
$legsd,
$legs,
rgba($legs, 0.8),
$none,
rgba($legs, 0.5),
$legs,
$legs,
darken($light, 20%),
$legs
);
transform: translate3d(-0.4rem, 4rem, 0) rotate(23deg) skewY(-14deg);
width: 2.5rem;
border-radius: 1.5rem 0.75rem 1.5rem 0.5rem / 0.75rem;
background-color: darken(#fff, 30%);
}
}
&:nth-of-type(7) {
transform: translate3d(39.3rem, 60rem, 0) rotate(24deg) scaleY(2);
filter: blur(0);
&,
&:before,
&:after {
width: 2.7rem;
height: 3rem;
background-image: repeating-radial-gradient(
circle at 55% 110%,
$legsd,
$legsd 0.1rem,
$none 0.1rem,
$none 0.2rem
),
//
linear-gradient(
to right,
$legsd,
$legs,
rgba($legs, 0.8),
$none,
rgba($legs, 0.5),
$legs,
$legs,
darken($light, 10%),
$legs,
$legsd
);
border-left: 0.05rem dotted rgba($legsd, 0.5);
border-right: 0.05rem dotted rgba($legsd, 0.5);
border-radius: 1.2rem 1.2rem 0.75rem 0.75rem / 0.75rem;
background-color: darken(#fff, 40%);
box-shadow: 0 -0.2rem 0.1rem -0.1rem $legs;
}
&:before {
transform: translate3d(-0.1rem, 1.8rem, 0) rotate(6deg) skewY(-2deg);
width: 2.8rem;
background-color: darken(#fff, 35%);
background-image: radial-gradient($light 5%, $none 10%),
//
radial-gradient($light 5%, $none 10%),
//
repeating-radial-gradient(
circle at 55% 110%,
$legsd,
$legsd 0.1rem,
$none 0.1rem,
$none 0.2rem
),
//
linear-gradient(
to right,
$legsd,
$legs,
rgba($legs, 0.8),
$none,
rgba($legs, 0.6),
rgba($legs, 0.5),
$legs,
rgba($legs, 0.2),
$light,
$legs,
$legs,
$legsd
);
background-size: 3.5rem 0.75rem, 3.5rem 0.75rem, 100% 110%, 100% 100%;
background-position-y: 0, 0.5rem, 0, 0;
}
&:after {
transform: translate3d(-0.25rem, 3.65rem, 0) rotate(6deg) skewY(-5deg);
width: 2.8rem;
background-color: darken(#fff, 30%);
background-image: radial-gradient(lighten($light, 20%) 5%, $none 10%),
//
radial-gradient(lighten($light, 20%) 5%, $none 10%),
//
repeating-radial-gradient(
circle at 55% 110%,
$legsd,
$legsd 0.1rem,
$none 0.1rem,
$none 0.2rem
),
//
linear-gradient(
to right,
$legsd,
$legs,
rgba($legs, 0.8),
$none,
rgba($legs, 0.8),
rgba($legs, 0.6),
rgba($legs, 0.5),
lighten($light, 10%),
$legs,
$legs,
$legsd
);
background-size: 3.5rem 0.75rem, 3.5rem 0.75rem, 100% 110%, 100% 100%;
background-position-y: 0, 0.5rem, 0, 0;
}
}
&:nth-of-type(8) {
transform: translate3d(35rem, 69rem, 0) rotate(28deg) scaleY(2);
filter: blur(0);
&,
&:before,
&:after {
width: 2.9rem;
height: 3rem;
background-image: radial-gradient(lighten($light, 40%) 7%, $none 20%),
//
radial-gradient(lighten($light, 40%) 10%, $none 20%),
//
repeating-radial-gradient(
circle at 55% 120%,
$legsd,
$legsd 0.1rem,
$none 0.1rem,
$none 0.4rem
),
//
repeating-radial-gradient(
circle at 55% 120%,
rgba($legsd, 0.7),
rgba($legsd, 0.7) 0.1rem,
$none 0.1rem,
$none 0.2rem
),
//
linear-gradient(
to right,
$legsd,
$legs,
rgba($legs, 0.8),
rgba($legs, 0.5),
$none,
rgba($legs, 0.8),
$legsd
);
background-size: 3.5rem 0.75rem, 3.5rem 0.75rem, 100% 110%, 100% 110%,
100% 100%;
background-position-y: 0, 0.5rem, 0, 0, 0;
border-left: 0.05rem dotted rgba($legsd, 0.5);
border-right: 0.05rem dotted rgba($legsd, 0.5);
background-color: lighten($light, 30%);
box-shadow: 0 -0.2rem 0.1rem -0.1rem $legs;
border-radius: 1.2rem 1.2rem 0.75rem 0.75rem / 0.75rem;
}
&:before {
transform: translate3d(-0.1rem, 1.75rem, 0) rotate(0deg);
width: 3rem;
}
&:after {
transform: translate3d(-0.1rem, 3.5rem, 0) rotate(0deg);
width: 3.1rem;
background-image: radial-gradient(lighten($light, 40%) 7%, $none 20%),
//
radial-gradient(lighten($light, 40%) 10%, $none 20%),
//
repeating-radial-gradient(
circle at 55% 120%,
$legsd,
$legsd 0.1rem,
$none 0.1rem,
$none 0.4rem
),
//
repeating-radial-gradient(
circle at 55% 120%,
rgba($legsd, 0.7),
rgba($legsd, 0.7) 0.1rem,
$none 0.1rem,
$none 0.2rem
),
//
linear-gradient(
to right,
$legsd,
$legs,
rgba($legs, 0.6),
rgba($legs, 0.8),
rgba($legs, 0.5),
$none,
rgba($legs, 0.8),
$legsd
);
}
}
}
}
leg4f {
i,
i:before,
i:after {
width: 2rem;
}
i {
&:nth-of-type(1) {
transform: translate3d(29.7rem, 79rem, 0) rotate(29deg) scaleY(2);
filter: blur(0);
&,
&:before,
&:after {
width: 3.25rem;
height: 3rem;
background-image: radial-gradient(lighten($light, 40%) 7%, $none 20%),
//
radial-gradient(lighten($light, 40%) 10%, $none 20%),
//
repeating-radial-gradient(
circle at 55% 120%,
$legsd,
$legsd 0.1rem,
$none 0.1rem,
$none 0.4rem
),
//
repeating-radial-gradient(
circle at 55% 120%,
rgba($legsd, 0.7),
rgba($legsd, 0.7) 0.1rem,
$none 0.1rem,
$none 0.2rem
),
//
linear-gradient(
to right,
$legsd,
$legs,
rgba($legs, 0.6),
rgba($legs, 0.8),
rgba($legs, 0.5),
$none,
rgba($legs, 0.8),
$legsd
);
background-size: 3.5rem 0.75rem, 3.5rem 0.75rem, 100% 110%, 100% 110%,
100% 100%;
background-position-y: 0, 0.5rem, 0, 0, 0;
border-left: 0.05rem dotted rgba($legsd, 0.5);
border-right: 0.05rem dotted rgba($legsd, 0.5);
background-color: lighten($light, 30%);
box-shadow: 0 -0.2rem 0.1rem -0.1rem $legs;
border-radius: 1.2rem 1.2rem 0.75rem 0.75rem / 0.75rem 0.75rem 0 0;
}
&:before {
transform: translate3d(-0.1rem, 1.75rem, 0) rotate(0deg);
width: 3.3rem;
background-image: radial-gradient(lighten($light, 30%) 5%, $none 15%),
//
radial-gradient(lighten($light, 30%) 5%, $none 15%),
//
repeating-radial-gradient(
circle at 55% 120%,
$legsd,
$legsd 0.1rem,
$none 0.1rem,
$none 0.4rem
),
//
repeating-radial-gradient(
circle at 55% 120%,
rgba($legsd, 0.7),
rgba($legsd, 0.7) 0.1rem,
$none 0.1rem,
$none 0.2rem
),
//
linear-gradient(
to right,
$legsd,
$legs,
rgba($legs, 0.5),
rgba($legs, 0.8),
rgba($legs, 0.7),
$none,
rgba($legs, 0.8),
$legsd
);
background-position-x: 0.1rem, 0.1rem, 0, 0, 0;
}
&:after {
transform: translate3d(-0.1rem, 3.5rem, 0) rotate(0deg);
width: 3.4rem;
background-image: radial-gradient(lighten($light, 20%) 4%, $none 12%),
//
radial-gradient(lighten($light, 20%) 4%, $none 12%),
//
repeating-radial-gradient(
circle at 55% 120%,
$legsd,
$legsd 0.1rem,
$none 0.1rem,
$none 0.4rem
),
//
repeating-radial-gradient(
circle at 55% 120%,
rgba($legsd, 0.7),
rgba($legsd, 0.7) 0.1rem,
$none 0.1rem,
$none 0.2rem
),
//
linear-gradient(
to right,
$legsd,
$legs,
rgba($legs, 0.4),
rgba($legs, 0.8),
rgba($legs, 0.8),
$none,
rgba($legs, 0.8),
$legsd
);
background-position-x: 0.2rem, 0.2rem, 0, 0, 0;
}
}
&:nth-of-type(2) {
transform: translate3d(23rem, 92rem, 0) rotate(0deg) skewY(-10deg)
scaleY(0.4);
&,
&:before,
&:after {
filter: blur(0);
height: 0.5rem;
border-radius: 50%;
background: $none;
width: 2.5rem;
height: 1rem;
box-shadow: 0 0.5rem 0 1.1rem $legsd,
//
0.5rem 1.75rem 1rem lighten($light, 30%),
//
-0.05rem 1rem 0 1.1rem $legs,
//
-0.1rem 1.5em 0 1.2rem $legsd,
//
0.5rem 2.75rem 1rem lighten($light, 30%),
//
-0.15rem 2rem 0 1.2rem $legs,
//
-0.2rem 2.5rem 0 1.3rem $legsd,
//
0.5rem 3.75rem 1rem lighten($light, 30%),
//
-0.25rem 3rem 0 1.3rem $legs,
//
-0.3rem 3.5em 0 1.4rem $legsd,
//
0.5rem 4.75rem 1rem lighten($light, 30%),
//
-0.35rem 4rem 0 1.5rem $legs,
//
-0.4rem 4.5rem 0 1.6rem $legsd,
//
0.5rem 5.75rem 1rem lighten($light, 30%),
//
-0.45rem 5rem 0 1.7rem $legs,
//
-0.5rem 5.5em 0 1.8rem $legsd,
//
0.5rem 6.75rem 1rem lighten($light, 30%),
//
-0.55rem 6rem 0 2rem $legs,
//
-0.6rem 6.5rem 0 2.3rem $legsd,
//
0.5rem 7.75rem 1rem lighten($light, 30%),
//
-0.65rem 7rem 0 2.5rem $legs,
//
-0.7rem 7.5rem 0 2.75rem $legsd;
}
&:before {
transform: translate3d(0.4rem, -4rem, 0) rotate(13deg) skewY(41deg);
width: 3.5rem;
height: 3rem;
box-shadow: 0 -0.5rem 0 0.5rem $legsd,
//
0.5rem -1rem 1rem -0.5rem lighten($light, 30%),
//
0 -1rem 0 0.5rem $legs,
//
0 -1.5rem 0 0.4rem $legsd,
//
0.5rem -2rem 1rem -0.5rem lighten($light, 30%),
//
0 -2rem 0 0.4rem $legs,
//
0 -2.5rem 0 0.3rem $legsd,
//
0.5rem -3rem 1rem -0.5rem lighten($light, 30%),
//
0 -3rem 0 0.3rem $legs,
//
0 -3.5rem 0 0.3rem $legsd;
}
&:after {
transform: translate3d(-0.4rem, -0.2rem, 0) rotate(9deg) skewY(28deg);
width: 3.7rem;
height: 3rem;
box-shadow: 0 -0.5rem 0 0.5rem $legsd,
//
0.5rem -1rem 1rem -0.5rem lighten($light, 30%),
//
0 -1rem 0 0.5rem $legs,
//
0 -1.5rem 0 0.4rem $legsd,
//
0.5rem -2rem 1rem -0.5rem lighten($light, 30%),
//
0 -2rem 0 0.4rem $legs,
//
0 -2.5rem 0 0.3rem $legsd,
//
0.5rem -3rem 1rem -0.5rem lighten($light, 30%),
//
0 -3rem 0 0.3rem $legs,
//
0 -3.5rem 0 0.3rem $legsd,
//
0 -4rem 0 0.3rem $legs; //
}
}
&:nth-of-type(3) {
transform: translate3d(22.3rem, 93.1rem, 0) rotate(9deg) skewY(-10deg)
scaleY(0.5);
&,
&:before {
filter: blur(0);
height: 0.75rem;
border-radius: 50%;
width: 3.7rem;
box-shadow: 0 -0.5rem 0 0.5rem $legsd,
//
0.5rem -1rem 1rem -0.5rem lighten($light, 30%),
//
0 -1rem 0 0.5rem $legs,
//
0 -1.5rem 0 0.4rem $legsd,
//
0.5rem -2rem 1rem -0.5rem lighten($light, 30%),
//
0 -2rem 0 0.4rem $legs,
//
0 -2.5rem 0 0.3rem $legsd;
}
&:before {
opacity: 0.8;
width: 0.3rem;
height: 0.6rem;
background: lighten($light, 40%);
border-radius: 0.15rem;
border: none;
transform: translate3d(1.1rem, -1rem, 0) rotate(5deg) skewY(13deg);
box-shadow: 0.1rem 0 0.5rem lighten($light, 40%),
//
-0.1rem -1rem 0.25rem lighten($light, 40%),
//
-0.1rem -1rem 0.15rem lighten($light, 40%),
//
-0.09rem -2rem 0.25rem lighten($light, 40%),
//
-0.09rem -2rem 0.3rem lighten($light, 40%),
//
-0.09rem -3rem 0.3rem lighten($light, 40%),
//
-0.085rem -4rem 0.4rem lighten($light, 40%),
//
0 -5rem 0.4rem lighten($light, 40%),
//
0.1rem -6rem 0.4rem lighten($light, 40%),
//
0.2rem -7rem 0.5rem lighten($light, 40%),
//
0.25rem -8rem 0.5rem lighten($light, 40%),
//
//
1rem 0 0.5rem lighten($light, 40%),
//
0.9rem -1rem 0.25rem lighten($light, 40%),
//
0.9rem -1rem 0.15rem lighten($light, 40%),
//
0.9rem -2rem 0.25rem lighten($light, 40%),
//
0.9rem -2rem 0.15rem lighten($light, 40%),
//
0.9rem -3rem 0.2rem lighten($light, 40%),
//
0.9rem -4rem 0.3rem lighten($light, 40%),
//
0.9rem -5rem 0.3rem lighten($light, 40%),
//
0.9rem -6rem 0.4rem lighten($light, 40%),
//
1rem -7rem 0.4rem lighten($light, 40%),
//
1rem -8rem 0.4rem lighten($light, 40%),
//
//
1.9rem 0 0 -0.1rem darken($light, 10%),
//
1.8rem -1rem 0.25rem lighten($light, 10%),
//
1.7rem -2rem 0.25rem lighten($light, 10%),
//
1.6rem -3rem 0.25rem lighten($light, 10%),
//
1.6rem -4rem 0.25rem lighten($light, 10%),
//
1.6rem -4.9rem 0.25rem lighten($light, 10%),
//
1.6rem -5.8rem 0.25rem lighten($light, 10%),
//
1.7rem -6.7rem 0.25rem lighten($light, 10%),
//
1.7rem -7.6rem 0.25rem lighten($light, 10%),
//
//
1.9rem 0 0.25rem -0.1rem lighten($light, 10%),
//
1.8rem -1rem 0 -0.1rem lighten($light, 10%),
//
1.7rem -2rem 0 -0.1rem lighten($light, 10%),
//
1.6rem -3rem 0 -0.1rem lighten($light, 10%),
//
1.6rem -4rem 0 -0.1rem lighten($light, 10%),
//
1.6rem -4.9rem 0 -0.1rem lighten($light, 10%),
//
1.6rem -5.8rem 0 -0.1rem lighten($light, 10%),
//
1.7rem -6.7rem 0 -0.1rem lighten($light, 10%),
//
1.7rem -7.6rem 0 -0.1rem lighten($light, 10%); //
}
&:after {
opacity: 0.8;
width: 0.5rem;
height: 0.75rem;
background: lighten($light, 40%);
border-radius: 50%;
border: none;
transform: translate3d(2rem, -0.8rem, 0) rotate(-4deg) skewY(15deg);
box-shadow: 0 0 0.5rem lighten($light, 40%),
//
0 1rem 0.25rem lighten($light, 40%),
//
-0.1rem 1rem 0.15rem lighten($light, 40%),
//
-0.1rem 2rem 0.25rem lighten($light, 40%),
//
-0.1rem 2rem 0.15rem lighten($light, 40%),
//
0 3rem 0.25rem lighten($light, 40%),
//
0 4rem 0.25rem lighten($light, 40%),
//
0.2rem 5rem 0.25rem lighten($light, 40%),
//
0.4rem 6rem 0.25rem lighten($light, 40%),
//
//
-1rem 1rem 0.5rem lighten($light, 40%),
//
//
0.8rem 1rem 0.1rem -0.15rem $light,
//
0.9rem 1.9rem 0.1rem -0.1rem lighten($light, 10%),
//
1rem 2.7rem 0.1rem -0.1rem lighten($light, 10%),
//
1.2rem 3.5rem 0.25rem -0.1rem lighten($light, 10%),
//
1.4rem 4.2rem 0.1rem -0.1rem lighten($light, 30%),
//
1.3rem 4.3rem 0.1rem -0.1rem lighten($light, 30%),
//
1.5rem 4.1rem 0.1rem -0.1rem lighten($light, 30%),
//
1.6rem 5rem 0.1rem -0.1rem lighten($light, 40%),
//
1.4rem 5.2rem 0.1rem -0.1rem lighten($light, 40%),
//
1.8rem 4.8rem 0.1rem -0.1rem lighten($light, 40%); //
}
}
}
}
// @import "legs-l";
$bg1: repeating-radial-gradient(
circle at 60% 120%,
$legsd,
$legsd 0.09rem,
$none 0.09rem,
$none 0.2rem
);
$bg2: repeating-radial-gradient(
circle at 60% 120%,
rgba($legsd, 0.7),
rgba($legsd, 0.7) 0.1rem,
$none 0.1rem,
$none 0.2rem
);
$bg3: linear-gradient(
to right,
darken($metall, 50),
$legsd 50%,
darken($metall, 50),
darken($metall, 30),
$legsd
);
$bg1r: repeating-radial-gradient(
circle at 60% -20%,
$legsd,
$legsd 0.1rem,
$none 0.1rem,
$none 0.2rem
);
$bg4: repeating-radial-gradient(
circle at 60% 120%,
$legsd,
$legsd 0.075rem,
$none 0.075rem,
$none 0.2rem
);
$bg5: repeating-radial-gradient(
circle at 40% 120%,
$legsd,
$legsd 0.075rem,
$none 0.075rem,
$none 0.2rem
);
$bg6: repeating-radial-gradient(
circle at 50% 120%,
$legsd,
$legsd 0.075rem,
$none 0.075rem,
$none 0.2rem
);
llegb1,
llegb2,
llegb3,
llegb4,
llegf4,
llegf3,
llegf2,
llegf42,
llegf32,
llegf22,
llegf12 {
i,
i:before,
i:after {
width: 2rem;
height: 2rem;
border-left: 0.04rem dashed rgba($blk2, 0.5);
border-right: 0.04rem dashed rgba($blk2, 0.5);
border-radius: 1rem /0.4rem;
background-clip: content-box;
}
}
llegb1 {
transform: translate3d(88.7rem, 8rem, 0);
i,
i:before,
i:after {
background-image: $bg1, $bg3;
background-size: 100% 110%, 100% 100%;
background-position-y: 0.5rem, 0;
}
i {
&:nth-of-type(1) {
transform: scaleY(1.75);
border-radius: 0;
height: 2.5rem;
&:before {
transform: translate3d(0.01rem, -1.25rem, 0) skewX(-10deg);
}
&:after {
display: none;
}
}
&:nth-of-type(2) {
width: 1.9rem;
transform: translate3d(0.5rem, -4rem, 0) scaleY(1.75) skewY(13deg)
skewX(-24deg);
border-radius: 0.2rem / 1rem 0 0 1rem;
background-image: $bg1,
//
linear-gradient(
to right,
darken($metall, 50),
$legsd 50%,
darken($metall, 50),
darken($metall, 35),
$legsd
);
&:before {
width: 1.9rem;
transform: translate3d(0.01rem, -1.25rem, 0) skewX(-10deg);
border-radius: 0.2rem / 1rem 0 0 1rem;
background-image: $bg1,
//
linear-gradient(
to right,
darken($metall, 50),
$legsd 50%,
darken($metall, 50),
darken($metall, 40),
$legsd
);
}
&:after {
transform: translate3d(0.45rem, -2.3rem, 0) skewY(13deg) skewX(-24deg);
width: 1.8rem;
border-radius: 0.2rem / 1rem 0 0 1rem;
background-image: $bg1,
//
linear-gradient(
to right,
darken($metall, 50),
$legsd 50%,
darken($metall, 50),
darken($metall, 45),
$legsd
);
}
}
&:nth-of-type(3) {
transform: translate3d(3.2rem, -8.8rem, 0) scaleY(1.75) skewY(14deg)
skewX(-51deg);
border-radius: 0.2rem / 1rem 0 0 1rem;
background-size: 100% 200%, 100% 100%;
background-image: $bg1,
//
linear-gradient(
to right,
darken($metall, 50),
$legsd 50%,
darken($metall, 50),
darken($metall, 50),
$legsd
);
&:before,
&:after {
display: none;
}
}
}
}
llegb2 {
transform: translate3d(91rem, 8rem, 0) rotate(12deg);
i,
i:before,
i:after {
background-image: $bg1,
//
linear-gradient(
to right,
darken($metall, 50),
$legsd 50%,
darken($metall, 50),
darken($metall, 50),
$legsd
);
background-size: 100% 200%, 100% 100%;
}
i {
&:nth-of-type(1) {
transform: scaleY(1.75);
border-radius: 0.3rem / 1rem 0.3rem 0.3rem 1rem;
background-image: $bg1,
//
linear-gradient(
to right,
darken($metall, 50),
$legsd 50%,
darken($metall, 50),
darken($metall, 35),
$legsd
);
&:before {
transform: translate3d(0.05rem, -1.25rem, 0) skewX(-19deg) skewY(5deg);
background-image: $bg1,
//
linear-gradient(
to right,
darken($metall, 50),
$legsd 50%,
darken($metall, 55),
darken($metall, 45),
$legsd
);
border-radius: 0.3rem / 1rem 0.3rem 0.3rem 1rem;
}
&:after {
transform: translate3d(0.75rem, -2.3rem, 0) skewY(19deg) skewX(-34deg);
width: 1.8rem;
border-radius: 0.3rem / 1rem 0.3rem 0.3rem 1rem;
background-image: $bg1,
//
linear-gradient(to right, darken($metall, 50), $legsd 50%, $legsd);
}
}
&:nth-of-type(2) {
transform: translate3d(1.8rem, -5.9rem, 0) rotate(17deg) scaleY(1.5)
skewY(13deg) skewX(-24deg);
border-radius: 0.2rem / 1rem 0 0 1rem;
background-image: repeating-radial-gradient(
circle at 60% 150%,
$legsd,
$legsd 0.1rem,
$none 0.1rem,
$none 0.2rem
),
//
linear-gradient(
to right,
darken($metall, 50),
$legsd 50%,
darken($this, 3)
);
background-position-y: 0, 0;
background-size: 100% 300%, 100% 100%;
&:before {
transform: translate3d(0.05rem, -1.25rem, 0) skewX(-16deg) skewY(5deg);
background-image: repeating-radial-gradient(
circle at 80% -150%,
$legsd,
$legsd 0.1rem,
$none 0.1rem,
$none 0.2rem
),
//
linear-gradient(
to right,
darken($metall, 50),
$legsd 50%,
darken($this, 2)
);
background-position-y: 0, 0;
background-size: 100% 200%, 100% 100%;
}
&:after {
transform: translate3d(0.7rem, -2.6rem, 0) rotate(23deg) scaleY(1.2)
scaleX(1.15);
width: 1.8rem;
border-radius: 0.2rem / 1rem 0 0 1rem;
background-image: repeating-radial-gradient(
circle at 40% -120%,
$legsd,
$legsd 0.1rem,
$none 0.1rem,
$none 0.2rem
),
//
linear-gradient(to right, darken($metall, 50), $legsd 50%, $this);
}
}
}
}
llegb3 {
transform: translate3d(94.2rem, 9.2rem, 0) rotate(24deg);
i,
i:before,
i:after {
background-image: $bg1,
//
linear-gradient(
to right,
darken($metall, 50),
$legsd 50%,
darken($metall, 50),
darken($metall, 50),
$legsd
);
background-size: 100% 200%, 100% 100%;
border-radius: 0.3rem / 1rem 0.3rem 0.3rem 1rem;
}
i {
&:nth-of-type(1) {
transform: scaleY(1.75);
background-image: $bg1,
//
linear-gradient(
to right,
darken($metall, 50),
$legsd 50%,
darken($metall, 50)
);
&:before {
transform: translate3d(0.2rem, -1.25rem, 0) rotate(22deg) skewY(346deg);
width: 2rem;
background-image: $bg1,
//
linear-gradient(
to right,
darken($metall, 50),
$legsd 40%,
darken($this, 5)
);
}
&:after {
transform: translate3d(1.5rem, -2.7rem, 0) rotate(49deg) skewY(333deg)
scaleY(1.4);
width: 1.8rem;
background-image: $bg1,
//
linear-gradient(
to right,
darken($metall, 50),
$legsd 40%,
darken($this, 3)
);
}
}
&:nth-of-type(2) {
background-image: $bg1r,
//
linear-gradient(
to right,
darken($metall, 40) 10%,
darken($metall, 51) 20%,
$legsd 50%,
darken($metall, 50)
);
transform: translate3d(3.3rem, -7rem, 0) rotate(45deg) skewY(352deg)
scaleY(1.8);
width: 2.3rem;
background-size: 100% 2000%, 100% 100%;
&:before {
transform: translate3d(0.05rem, -1.5rem, 0) rotate(12deg) skewY(352deg);
width: 2.3rem;
background-image: $bg1r,
//
linear-gradient(
to right,
darken($metall, 30) 10%,
darken($metall, 51) 20%,
$legsd 50%,
darken($metall, 50)
);
background-size: 100% 1000%, 100% 100%;
}
&:after {
transform: translate3d(0.55rem, -3rem, 0) rotate(24deg) skewY(346deg);
width: 2.3rem;
background-image: $bg1r,
//
linear-gradient(
to right,
darken($metall, 20) 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
background-size: 100% 1000%, 100% 100%;
}
}
&:nth-of-type(3) {
background-image: $bg1r,
//
linear-gradient(
to right,
darken($metall, 10) 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
transform: translate3d(9.9rem, -11.5rem, 0) rotate(70deg) skewY(352deg)
scaleY(1.8);
width: 2.4rem;
background-size: 100% 2000%, 100% 100%;
&:before {
transform: translate3d(0.2rem, -1.6rem, 0) rotate(18deg) skewY(352deg);
width: 2.4rem;
background-image: $bg1r,
//
linear-gradient(
to right,
$metall 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
background-size: 100% 800%, 100% 100%;
}
&:after {
transform: translate3d(1.3rem, -3rem, 0) rotate(47deg) skewY(339deg)
scaleY(1.2);
width: 2.1rem;
background-image: $bg1r,
//
linear-gradient(
to right,
$metall 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
background-size: 100% 800%, 100% 100%;
}
}
}
}
llegb4 {
transform: translate3d(96.5rem, 11.2rem, 0) rotate(35deg);
filter: blur(0.02rem);
i,
i:before,
i:after {
background-size: 100% 200%, 100% 100%;
border-radius: 0.3rem / 1rem 0.3rem 0.3rem 1rem;
width: 1.9rem;
}
i {
&:nth-of-type(1) {
transform: scaleY(1.75);
background-image: $bg1,
//
linear-gradient(
to right,
$legsd 10%,
darken($metall, 51) 20%,
$legsd 50%,
darken($this, 4)
);
&:before {
transform: translate3d(0.3rem, -1.25rem, 0) rotate(28deg) skewY(346deg);
background-image: $bg1,
//
linear-gradient(
to right,
darken($metall, 40) 10%,
darken($metall, 51) 20%,
$legsd 50%,
darken($this, 3)
);
}
&:after {
transform: translate3d(1.8rem, -2.8rem, 0) rotate(49deg) skewY(333deg)
scaleY(1.4);
width: 1.7rem;
background-image: $bg1,
//
linear-gradient(
to right,
darken($metall, 30) 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
background-size: 100% 1000%, 100% 100%;
}
}
&:nth-of-type(2) {
transform: translate3d(3.65rem, -7.25rem, 0) rotate(44deg) scaleY(1.9);
background-image: $bg1,
//
linear-gradient(
to right,
darken($metall, 30) 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
width: 2.1rem;
background-size: 100% 2000%, 100% 100%;
&:before {
transform: translate3d(0.2rem, -1.5rem, 0) rotate(19deg) scaleY(1.1)
skewY(346deg);
background-image: $bg1r,
//
linear-gradient(
to right,
darken($metall, 15) 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
background-size: 100% 3000%, 100% 100%;
width: 2.1rem;
}
&:after {
transform: translate3d(1rem, -3rem, 0) rotate(33deg) scaleY(1.2)
skewY(339deg);
background-image: $bg1r,
//
linear-gradient(
to right,
$metall 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
background-size: 100% 1000%, 100% 100%;
width: 2rem;
}
}
}
}
llegf4 {
transform: translate3d(114.3rem, 8.75rem, 0) rotate(108deg);
filter: blur(0.02rem);
i,
i:before,
i:after {
background-size: 100% 1000%, 100% 100%;
border-radius: 0.3rem / 1rem 0.3rem 0.3rem 1rem;
width: 2.2rem;
transform: scaleY(2);
}
i {
&:nth-of-type(1) {
background-image: $bg1r,
//
linear-gradient(
to right,
$metall 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
&:before {
transform: translate3d(0.3rem, -1.6rem, 0) rotate(25deg) skewY(346deg);
background-image: $bg1r,
//
linear-gradient(
to right,
$metall 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
width: 1.99rem;
}
&:after {
transform: translate3d(1.4rem, -3rem, 0) rotate(45deg) scaleY(1.2)
skewY(336deg);
background-image: $bg1r,
//
linear-gradient(
to right,
lighten($metall, 10) 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
width: 1.85rem;
background-size: 100% 500%, 100% 100%;
}
}
&:nth-of-type(2) {
transform: translate3d(3rem, -8.5rem, 0) rotate(41deg) scaleY(1.9);
background-image: $bg1r,
//
linear-gradient(
to right,
$metall 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
width: 2.2rem;
background-size: 100% 1000%, 100% 100%;
&:before {
transform: translate3d(0.2rem, -1.5rem, 0) rotate(19deg) scaleY(1.1)
skewY(346deg);
background-image: $bg1r,
//
linear-gradient(
to right,
darken($metall, 15) 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
background-size: 100% 1000%, 100% 100%;
width: 2.2rem;
}
&:after {
transform: translate3d(1rem, -3rem, 0) rotate(33deg) scaleY(1.2)
skewY(339deg);
background-image: $bg1r,
//
linear-gradient(
to right,
darken($metall, 30) 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
background-size: 100% 1000%, 100% 100%;
width: 2.1rem;
}
}
}
}
llegf3 {
transform: translate3d(117.9rem, 8rem, 0) rotate(142deg);
i,
i:before,
i:after {
background-size: 100% 1000%, 100% 100%;
border-radius: 0.3rem / 1rem 0.3rem 0.3rem 1rem;
width: 2.4rem;
transform: scaleY(2.2);
}
i {
&:nth-of-type(1) {
background-image: $bg1r,
//
linear-gradient(
to right,
#fff 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
&:before {
transform: translate3d(0.4rem, -1.6rem, 0) rotate(28deg) skewY(339deg);
background-image: $bg1r,
//
linear-gradient(
to right,
darken($metall, 5) 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
width: 2.3rem;
}
&:after {
transform: translate3d(1.6rem, -3rem, 0) rotate(45deg) scaleY(1.2)
skewY(329deg);
background-image: $bg1r,
//
linear-gradient(
to right,
darken($metall, 20) 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
width: 2rem;
background-size: 100% 500%, 100% 100%;
}
}
}
}
llegf2 {
transform: translate3d(102rem, -0.6rem, 0) rotate(77deg);
i,
i:before,
i:after {
background-size: 100% 1000%, 100% 100%;
border-radius: 0.3rem / 1rem 0.3rem 0.3rem 1rem;
width: 2.4rem;
transform: scaleY(2);
}
i {
&:nth-of-type(1) {
background-image: $bg1r,
//
linear-gradient(
to right,
darken($metall, 50) 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
&:before {
transform: translate3d(0.3rem, -1.2rem, 0) rotate(28deg) skewY(339deg);
background-image: $bg1r,
//
linear-gradient(
to right,
darken($metall, 5) 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
width: 2.3rem;
border-radius: 0.5rem / 1rem 0.3rem 0.3rem 1rem;
background-size: 100% 600%, 100% 100%;
}
&:after {
transform: translate3d(1.7rem, -2.5rem, 0) rotate(55deg) scaleY(1.3)
skewY(334deg);
background-image: $bg1r,
//
linear-gradient(
to right,
#fff 10%,
darken($metall, 51) 20%,
$legsd 50%,
$this
);
width: 1.8rem;
background-size: 100% 200%, 100% 100%;
border-radius: 0.7rem / 1rem 0.3rem 0.5rem 1rem;
}
}
&:nth-of-type(2) {
transform: translate3d(4rem, -7rem, 0) rotate(61deg) scaleY(2);
background-image: $bg1r,
//
linear-gradient(
to right,
darken($metall, 51),
#fff 10%,
darken($metall, 51) 30%,
$legsd 50%,
$this
);
background-size: 100% 500%, 100% 100%;
width: 2.6rem;
&:before {
transform: translate3d(0.2rem, -1.6rem, 0) rotate(26deg) skewY(336deg);
background-image: $bg1r,
//
linear-gradient(
to right,
#fff 10%,
darken($metall, 51) 30%,
$legsd 50%,
$this
);
width: 2.35rem;
background-size: 100% 500%, 100% 100%;
border-radius: 0.2rem 0.2rem 0.2rem 1rem / 1rem 0.2rem 0.2rem 1rem;
}
&:after {
transform: translate3d(1.4rem, -3.1rem, 0) rotate(43deg) scaleY(1.2)
skewY(329deg);
background-image: $bg1r,
//
linear-gradient(
to right,
#fff 10%,
darken($metall, 51) 30%,
$legsd 50%,
$this
);
width: 2rem;
background-size: 100% 500%, 100% 100%;
border-radius: 0.2rem / 1rem 0.2rem 0.2rem 1rem;
}
}
}
}
//
llegf42 {
transform: translate3d(121.55rem, 23.5rem, 0) rotate(-9deg);
i,
i:before,
i:after {
background-size: 100% 200%, 100% 100%;
width: 2.4rem;
transform: scaleY(2.3);
height: 3rem;
}
i {
&:nth-of-type(1) {
background-image: $bg1,
//
linear-gradient(
to left,
darken($metall, 40) 10%,
darken($metall, 51) 25%,
$legsd 50%,
$this 90%,
darken($metall, 50)
);
&:before {
transform: translate3d(-0.3rem, 2.35rem, 0) rotate(9deg) skewY(-8deg);
background-image: $bg1,
//
linear-gradient(
to left,
darken($light, 30) 10%,
darken($metall, 51) 25%,
$legsd 50%,
$this 90%,
darken($metall, 50)
);
}
&:after {
transform: translate3d(-0.75rem, 4.95rem, 0) rotate(10deg) skewY(-9deg);
background-image: $bg1,
//
linear-gradient(
to left,
darken($light2, 15) 10%,
darken($metall, 51) 25%,
$legsd 50%,
$this 90%,
darken($metall, 50)
);
}
}
&:nth-of-type(2) {
transform: translate3d(-0.95rem, 16.9rem, 0) rotate(3deg) scaleY(2.3);
background-image: $bg1,
//
linear-gradient(
to left,
darken($light, 30) 10%,
darken($metall, 51) 25%,
$legsd 50%,
$this 90%,
darken($light2, 15)
);
&:before {
transform: translate3d(0rem, 2.35rem, 0) rotate(-7deg) skewY(7deg);
background-image: $bg1,
//
linear-gradient(
to left,
darken($metall, 40) 10%,
darken($metall, 51) 25%,
$legsd 50%,
darken($metall, 50)
);
height: 2.5rem;
}
&:after {
transform: translate3d(0.35rem, 4.2rem, 0) rotate(-19deg) skewY(20deg);
background-image: $bg1,
//
linear-gradient(
to left,
$legsd,
darken($metall, 30) 20%,
darken($metall, 50) 35%,
$legsd 65%,
darken($light2, 20%) 75%,
darken($metall, 50) 85%,
$legsd
);
height: 2rem;
}
}
&:nth-of-type(3) {
&,
&:before,
&:after {
height: 2.5rem;
width: 2.5rem;
}
transform: translate3d(-0.4rem, 29.6rem, 0) rotate(-11deg) skewY(10deg)
scaleY(2.3);
background-image: $bg1,
//
linear-gradient(
to left,
$legsd,
darken($metall, 20) 20%,
darken($metall, 40) 30%,
$legsd 65%,
darken($light2, 10%) 75%,
darken($metall, 50) 85%,
$legsd
);
background-position-x: -0.1rem, 0;
background-size: 110% 200%, 100% 100%;
&:before {
transform: translate3d(0.15rem, 2rem, 0) rotate(-13deg) skewY(12deg);
background-image: $bg1,
//
linear-gradient(
to left,
$legsd,
$metall,
darken($metall, 40) 25%,
$legsd 65%,
darken($light, 10%) 75%,
darken($metall, 50) 85%,
$legsd
);
}
&:after {
transform: translate3d(0.75rem, 3.9rem, 0) rotate(-21deg) skewY(18deg);
background-image: $bg1,
//
linear-gradient(
to left,
$legsd,
#fff,
darken($metall, 40) 25%,
$legsd 60%,
$light 80%,
darken($metall, 50) 90%,
darken($metall, 50)
);
}
}
&:nth-of-type(4) {
&,
&:before,
&:after {
height: 2.6rem;
width: 2.6rem;
}
transform: translate3d(3.95rem, 42.5rem, 0) rotate(-26deg) skewY(9deg)
scaleY(2.3);
background-image: $bg1,
//
linear-gradient(
to left,
$legsd,
#fff,
darken($metall, 40) 30%,
$legsd 60%,
$light2 75%,
darken($metall, 50) 85%,
$legsd
);
background-position-x: -0.1rem, 0;
background-size: 110% 200%, 100% 100%;
&:before {
transform: translate3d(-0.05rem, 2.15rem, 0) rotate(-4deg) skewY(3deg)
scaleY(1.1);
background-image: $bg1,
//
linear-gradient(
to left,
$legsd,
#fff,
darken($metall, 40) 35%,
$legsd 60%,
darken($light2, 10%) 70%,
darken($metall, 50) 80%,
$legsd
);
width: 2.7rem;
}
&:after {
transform: translate3d(0.35rem, 4.5rem, 0) rotate(-10deg) skewY(8deg)
scaleY(1.2);
background-image: $bg1,
//
linear-gradient(
to left,
$legsd,
#fff,
darken($metall, 40) 40%,
$legsd 60%,
darken($light2, 20%) 70%,
darken($metall, 50) 80%,
$legsd
);
width: 2.7rem;
height: 3.9rem;
}
}
&:nth-of-type(5) {
&,
&:before,
&:after {
height: 2.6rem;
width: 2.9rem;
}
transform: translate3d(14.5rem, 62rem, 0) rotate(-29deg) skewY(9deg)
scaleY(2.3);
background-image: $bg1,
//
linear-gradient(
to left,
$legsd,
#fff,
darken($metall, 40) 40%,
$legsd 60%,
$legsd,
darken($light, 10)
);
background-position-x: -0.1rem, 0;
background-size: 110% 200%, 100% 100%;
box-shadow: 0 -0.1rem 0 $blk2;
&:before {
transform: translate3d(-0.1rem, 2.26rem, 0) rotate(-4deg) skewY(3deg)
scaleY(1.1);
background-image: $bg1,
//
linear-gradient(
to left,
$legsd,
#fff,
darken($metall, 40) 40%,
$legsd 60%,
$legsd,
darken($light, 10)
);
width: 3rem;
height: 3rem;
}
&:after {
display: none;
}
}
}
// green bit
& > x:nth-of-type(1) {
width: 8rem;
height: 8rem;
transform: translate3d(10rem, 56rem, 0) rotate(0deg) skewY(0deg);
overflow: hidden;
border-radius: 50%;
&:before {
width: 6rem;
height: 5.2rem;
background: linear-gradient(74deg, rgba($light2, 0.5), $none 20%, $none),
//
linear-gradient(31deg, $bodyd, $none),
//
linear-gradient($bodyl, $bodyd);
transform: translate3d(0.7rem, 0.25rem, 0) rotate(21deg) skewY(0deg);
}
&:after {
transform: translate3d(0rem, 1.25rem, 0) rotate(-10deg) skewY(-2deg);
width: 7.7rem;
height: 3.7rem;
border-radius: 50%;
box-shadow: inset 0 0.4rem 0 0.3rem $bodyd,
//
inset -0.6rem 0.3rem 0 0 $bodyd,
//
inset 1rem 1rem 1rem 0 $bodyd,
//
-0.3rem -0.3rem 0 0 $legsl,
//
0.3rem -0.3rem 0 0 darken($bodyl, 10);
}
}
// foot
& > x:nth-of-type(2) {
transform: translate3d(17.5rem, 70rem, 0) rotate(-32deg);
width: 6rem;
height: 8rem;
overflow: hidden;
border-radius: 4rem 0 0 0;
&:after {
width: 100%;
height: 100%;
background: linear-gradient(88deg, $none, $none 90%, $blk2);
}
& > x:nth-of-type(1) {
&,
&:before,
&:after {
height: 1.5rem;
width: 3.5rem;
background: $footd;
}
transform: translate3d(2.7rem, 1rem, 0) rotate(20deg);
border-radius: 50%;
box-shadow: 1rem -0.1rem 0.1rem $footl,
// light
-0.1rem -0.4rem 0 -0.1rem $footd,
//
1rem -0.5rem 0.1rem $footl,
// light
-0.1rem -0.8rem 0 -0.1rem $footd,
//
1rem -1rem 0.1rem $footl,
// light
-0.2rem -1.2rem 0 -0.1rem $footd,
//
;
&:before {
width: 4.1rem;
transform: translate3d(-0.2rem, 1.1rem, 0) rotate(3deg);
border-radius: 50%;
box-shadow: 0.3rem -0.1rem 0.1rem $footl,
// light
-0.1rem -0.4rem 0 -0.1rem $footd,
//
1rem -0.5rem 0.1rem $footl,
// light
-0.1rem -0.8rem 0 -0.2rem $footd,
//
1rem -0.8rem 0.1rem $footl,
// light
-0.2rem -1.2rem 0 -0.3rem $footd,
//
;
}
&:after {
width: 0.5rem;
height: 0.3rem;
background: $light;
transform: translate3d(0, -0.4rem, 0) rotate(-9deg) skewY(-39deg);
opacity: 0.5;
border-radius: 0 0 0.3rem 0;
box-shadow: -0.2rem 0.5rem 0 rgba($light, 0.75),
//
-0.4rem 1rem 0 rgba($light, 0.5),
//
;
}
}
& > x:nth-of-type(2) {
&,
&:before,
&:after {
height: 0.35rem;
width: 6rem;
background: $footd;
}
transform: translate3d(0.8rem, 4.5rem, 0) rotate(35deg) skewY(9deg)
skewX(36deg);
border-radius: 50%;
box-shadow: 3rem 0 0.2rem $footl,
// light
-0.2rem 0.2rem 0 0.2rem $footd,
//
3rem 0.2rem 0.2rem 0.2rem $footl,
// light
-0.4rem 0.4rem 0 0.4rem $footd,
//
3rem 0.4rem 0.2rem 0.4rem $footl,
// light
-0.6rem 0.6rem 0 0.6rem $footd,
//
;
&:after {
transform: translate3d(0.5rem, -1rem, 0) rotate(-5deg);
border-radius: 50%;
width: 5.5rem;
box-shadow: 3rem 0 0.2rem $footl,
// light
-0.1rem 0.2rem 0 0.1rem $footd,
//
//
3rem 0.2rem 0.2rem 0.1rem $footl,
// light
-0.2rem 0.5rem 0 0.2rem $footd,
//
//
3rem 0.5rem 0.2rem 0.1rem $footl,
// light
-0.2rem 0.6rem 0 0.4rem $footd,
//
//
3rem 0.7rem 0.2rem 0.1rem $footl,
// light
-0.6rem 0.9rem 0 0.5rem $footd,
//
;
}
&:before {
transform: translate3d(0.9rem, -1.25rem, 0) rotate(-11deg);
border-radius: 50%;
width: 5rem;
height: 0.5rem;
box-shadow: 3rem 0 0.2rem $footl,
// light
-0.1rem -0.2rem 0 0.1rem $footd,
//
-0.1rem 0.2rem 0 $footd,
//
-0.1rem 0.25rem 0 $footd,
//
//
3rem -0.4rem 0.2rem $footl,
// light
-0.05rem -0.5rem 0 -0.1rem $footd,
//
;
}
}
}
}
llegf32 {
transform: translate3d(118.45rem, 17.2rem, 0) rotate(-6deg);
i,
i:before,
i:after {
background-size: 100% 200%, 100% 100%;
width: 2.5rem;
transform: scaleY(2.3);
height: 3rem;
background-image: $bg1,
//
linear-gradient(
to left,
darken($metall, 40) 10%,
darken($metall, 51) 25%,
$legsd 50%,
$this 90%,
darken($metall, 50)
);
}
i {
&:nth-of-type(1) {
&:before {
transform: translate3d(-0.45rem, 2.35rem, 0) rotate(15deg) skewY(-13deg);
}
&:after {
transform: translate3d(-1.45rem, 4.8rem, 0) rotate(30deg) skewY(-24deg)
scaleY(1.1);
width: 2.4rem;
}
}
&:nth-of-type(2) {
transform: translate3d(-3.05rem, 16.9rem, 0) rotate(17deg) scaleY(2.3);
width: 2.65rem;
background-image: $bg1,
//
linear-gradient(
to left,
darken($metall, 40) 10%,
darken($metall, 51) 25%,
$legsd 70%,
$none 80%,
$none 85%,
darken($metall, 50)
),
//
linear-gradient($this, $light);
&:before {
transform: translate3d(-0.35rem, 2.6rem, 0) rotate(12deg) skewY(-8deg);
width: 2.65rem;
background-image: $bg1,
//
linear-gradient(
to left,
darken($metall, 40) 10%,
darken($metall, 51) 25%,
$legsd 70%,
$none 80%,
$none 85%,
darken($metall, 50)
),
//
linear-gradient($y2, $this, $this);
}
&:after {
transform: translate3d(-1.15rem, 5rem, 0) rotate(25deg) skewY(-20deg)
scaleY(1.1);
}
}
&:nth-of-type(3) {
&,
&:before,
&:after {
width: 2.7rem;
background-image: $bg1,
//
linear-gradient(
to left,
darken($metall, 50) 10%,
darken($metall, 51) 25%,
$legsd 50%,
$this 80%,
$none,
$this
),
//
linear-gradient($this, $light, $light);
}
transform: translate3d(-10.7rem, 32.75rem, 0) rotate(34deg) skewY(-1deg)
scaleY(2.4);
&:before {
transform: translate3d(-0.1rem, 2.4rem, 0) rotate(2deg) skewY(1deg);
background-image: $bg1,
//
linear-gradient(
to left,
darken($metall, 50) 10%,
darken($metall, 51) 25%,
$legsd 50%,
$this 80%,
$none,
$this
),
//
linear-gradient($light, lighten($light, 20));
}
&:after {
transform: translate3d(-0.3rem, 4.8rem, 0) rotate(6deg) skewY(-4deg);
background-image: $bg1,
//
linear-gradient(
to left,
darken($metall, 50) 10%,
darken($metall, 51) 25%,
$legsd 50%,
$this 80%,
$none,
$this
),
//
linear-gradient(lighten($light, 20), $light, $this);
}
}
&:nth-of-type(4) {
&,
&:before,
&:after {
width: 2.8rem;
background-image: $bg1,
//
linear-gradient(
to left,
darken($metall, 50) 10%,
darken($metall, 51) 25%,
$legsd 50%,
$this 80%,
$none,
$this
),
//
linear-gradient($light, $none, $none);
background-color: darken($orange, 30);
}
transform: translate3d(-20.65rem, 46.4rem, 0) rotate(39deg) skewY(-1deg)
scaleY(2.4);
&:before {
transform: translate3d(-0.15rem, 2.4rem, 0) rotate(2deg) skewY(1deg);
background-image: $bg1,
//
linear-gradient(
to left,
darken($metall, 40) 10%,
darken($metall, 51) 25%,
$legsd 50%,
$this 80%,
$none,
$this
);
}
&:after {
transform: translate3d(-0.3rem, 4.8rem, 0) rotate(6deg) skewY(-4deg);
background-image: $bg1,
//
linear-gradient(
to left,
darken($metall, 40) 10%,
darken($metall, 51) 25%,
$legsd 50%,
$this 80%,
$none,
$this
);
}
}
// green bit goes here
&:nth-of-type(5) {
&,
&:before,
&:after {
width: 2.9rem;
background-image: $bg1,
//
linear-gradient(
to left,
$none 10%,
darken($metall, 51) 25%,
$legsd 50%,
$this 90%,
$none,
$this
),
//
linear-gradient($light, $this, $this);
border-radius: 1.5rem /0.4rem;
}
transform: translate3d(-33.2rem, 61.3rem, 0) rotate(41deg) skewY(4deg)
scaleY(2.5);
box-shadow: 0 -0.2rem 0 -0.1rem $blk2;
&:before,
&:after {
transform: translate3d(0.2rem, 2.4rem, 0) rotate(-16deg) skewY(12deg);
background-image: $bg1,
//
linear-gradient(
to left,
$none 10%,
darken($metall, 51) 25%,
$legsd 50%,
$this 90%,
$this
),
//
linear-gradient(rgba($light, 0.5), $light);
background-color: $this;
}
&:after {
border-left: none;
}
&:before {
transform: translate3d(-0.15rem, 2.4rem, 0) rotate(2deg) skewY(-3deg);
}
}
}
// green bit
& > x:nth-of-type(1) {
width: 7rem;
height: 5.2rem;
transform: translate3d(-32rem, 56.5rem, 0) rotate(38deg) skewY(0deg);
overflow: hidden;
border-radius: 50%;
&:before {
width: 5rem;
height: 5rem;
background: linear-gradient(
-46deg,
lighten($bodyd, 10),
$bodyd 54%,
$bodyl 66%,
$bodyl
);
transform: translate3d(0.9rem, -0.1rem, 0) rotate(49deg) skewY(0deg);
}
&:after {
transform: translate3d(0rem, 1.4rem, 0) rotate(4deg) skewY(-2deg);
width: 7rem;
height: 2.1rem;
border-radius: 50%;
background: linear-gradient($bodyd, lighten($bodyd, 5));
box-shadow: inset 0 0.4rem 0 0.3rem $bodyd,
//
inset -0.6rem 0.3rem 0 0 $bodyd,
//
inset 1rem 1rem 1rem 0 $bodyd,
//
0 -0.3rem 0 0 $legsl;
}
}
// foot
& > x:nth-of-type(2) {
transform: translate3d(-40rem, 69.5rem, 0) rotate(32deg);
width: 6rem;
height: 4rem;
overflow: hidden;
border-radius: 0.5rem 3rem 0 0.2rem;
&:after {
transform: translate3d(3.2rem, 1.6rem, 0) rotate(-25deg) scaleY(0.5);
border-radius: 50%;
background: #fff;
width: 1rem;
height: 0.5rem;
opacity: 0.8;
box-shadow: 0.2rem 0.7rem 0 0.1rem #fff,
//
-0.2rem -0.6rem 0 -0.05rem rgba(#fff, 0.8),
//
-0.3rem -1rem 0 -0.1rem rgba(#fff, 0.6),
//
-0.35rem -1.5rem 0 -0.1rem rgba(#fff, 0.4),
//
-0.35rem -2rem 0 -0.1rem rgba(#fff, 0.2),
//
;
filter: blur(0.1rem);
}
&:before {
transform: translate3d(-1.2rem, -1.6rem, 0) rotate(-25deg);
width: 5rem;
height: 5rem;
border-radius: 0;
background: linear-gradient($none, $none, $blk2 50%);
border-radius: 2rem / 0.5rem;
}
& > x:nth-of-type(1) {
&,
&:before,
&:after {
height: 0.35rem;
width: 5.1rem;
background: $footd;
border-radius: 50%;
}
transform: translate3d(-0.3rem, 1.75rem, 0) rotate(-26deg) skewY(0deg)
skewX(0deg);
box-shadow: -4rem 0.1rem 0.1rem rgba($light, 0.5),
//light
0 0.2rem 0 0.2rem $footd,
//
0.2rem 0.3rem 0.1rem rgba($light, 0.5),
//light
0 0.4rem 0 0.4rem $footd,
//
0.4rem 0.5rem 0.1rem rgba($light, 0.5),
///light
0 0.6rem 0 0.6rem $footd,
//
-4rem -0.1rem 0.1rem $light;
&:after {
transform: translate3d(-0.5rem, -1rem, 0) rotate(5deg);
height: 0.3rem;
border-radius: 0.2rem;
box-shadow: 0.1rem 0.2rem 0 $footd,
//
-3rem 0.2rem 0.1rem rgba($light, 0.5),
///light
0.2rem 0.4rem 0 $footd,
//
-3rem 0.4rem 0.1rem rgba($light, 0.5),
///light
0.35rem 0.6rem 0 $footd,
//
-3rem 0.6rem 0.1rem rgba($light, 0.5),
///light
0.5rem 0.8rem 0 $footd;
}
&:before {
transform: translate3d(0.6rem, -0.9rem, 0) rotate(5deg);
height: 0.3rem;
width: 4rem;
box-shadow: -1.5rem 0 0.1rem $this,
//light
-3rem -0.1rem 0.1rem rgba($light, 0.5),
///light
0 -0.2rem 0 $footd,
//
-1.5rem -0.2rem 0.1rem $this,
//light
-3rem -0.3rem 0.1rem rgba($light, 0.5),
///light
0 -0.4rem 0 $footd,
//
-1.5rem -0.4rem 0.1rem $this,
//light
-3rem -0.5rem 0.1rem rgba($light, 0.5),
///light
0 -0.6rem 0 $footd,
//
-1.5rem -0.6rem 0.1rem $this,
//light
-3rem -0.7rem 0.1rem rgba($light, 0.5),
///light
0 -0.8rem 0 $footd;
}
}
}
}
llegf22 {
transform: translate3d(111.75rem, 11.5rem, 0) rotate(-1deg) rotateX(9.4deg)
skewY(-4deg) scaleY(1.01);
i,
i:before,
i:after {
background-size: 100% 200%, 100% 100%;
transform: scaleY(2.3);
height: 3rem;
background-image: $bg1,
//
linear-gradient(
to left,
darken($metall, 50),
#fff 15%,
darken($metall, 51) 30%,
darken($metall, 50) 50%,
$legsd
);
width: 2.8rem;
}
i {
&:nth-of-type(1) {
&:before {
transform: translate3d(-0.4rem, 2.35rem, 0) rotate(13deg) skewY(-12deg);
background-image: $bg1,
//
linear-gradient(
to left,
darken($metall, 50),
rgba(#fff, 0.5) 15%,
darken($metall, 51) 30%,
darken($metall, 50) 50%,
$legsd
);
width: 2.8rem;
}
&:after {
transform: translate3d(-1.1rem, 4.8rem, 0) rotate(20deg) skewY(-16deg)
scaleY(1.1);
background-image: $bg1,
//
linear-gradient(
to left,
darken($metall, 50),
rgba(#fff, 0.5) 15%,
darken($metall, 45) 30%,
darken($metall, 50) 50%,
$legsd
);
width: 2.85rem;
}
}
&:nth-of-type(2) {
transform: translate3d(-2.05rem, 17.1rem, 0) rotate(10deg) scaleY(2.4);
background-image: $bg4,
//
linear-gradient(
to left,
darken($metall, 50) 7%,
rgba(#fff, 0.7) 20%,
$legsd,
rgba(#fff, 0.1) 40%,
darken($metall, 40) 50%,
$legsd 90%,
$none
),
//
linear-gradient($this, $light, $this);
width: 2.9rem;
&:before {
transform: translate3d(-0.05rem, 2.4rem, 0) rotate(-2deg) skewY(3deg);
width: 2.9rem;
background-image: $bg4,
//
linear-gradient(
to left,
darken($metall, 50) 10%,
rgba(#fff, 0.7) 20%,
$legsd,
rgba(#fff, 0.5) 40%,
darken($metall, 42) 60%,
$legsd 90%,
$none
),
//
linear-gradient($light, $this 20%, $this);
}
&:after {
transform: translate3d(0.1rem, 5.03rem, 0) rotate(-7deg) skewY(6deg)
scaleY(1.1);
width: 2.95rem;
background-image: $bg4,
//
linear-gradient(
to left,
darken($metall, 50) 5%,
rgba(#fff, 0.9) 20%,
$legsd,
rgba(#fff, 0.5) 40%,
darken($metall, 42) 60%,
$legsd 90%,
$none
),
//
linear-gradient($this, $this 20%, $light);
}
}
&:nth-of-type(3) {
transform: translate3d(-4.6rem, 35.8rem, 0) rotate(3deg) skewY(2deg)
scaleY(2.9);
background-image: $bg4,
//
linear-gradient(
to left,
darken($metall, 50) 5%,
rgba(#fff, 0.9) 15%,
darken($metall, 45),
rgba(#fff, 0.5) 45%,
darken($metall, 42) 60%,
$legsd 90%,
$none
),
//
linear-gradient($this, $light, $this);
width: 3rem;
&:before {
transform: translate3d(-0.1rem, 2.65rem, 0) rotate(-2deg) skewY(3deg);
width: 3.1rem;
background-image: $bg4,
//
linear-gradient(
to left,
darken($metall, 50) 6%,
rgba(#fff, 0.9) 15%,
darken($metall, 40),
rgba(#fff, 0.4) 45%,
darken($metall, 42) 60%,
$legsd 85%,
$none
),
//
linear-gradient($light, $this, $this);
}
&:after {
transform: translate3d(0.05rem, 5.03rem, 0) rotate(-7deg) skewY(8deg)
scaleY(1.1);
width: 3.2rem;
height: 4rem;
background-image: $bg4,
//
linear-gradient(
to left,
darken($metall, 50) 7%,
rgba(#fff, 0.9) 15%,
darken($metall, 42),
rgba(#fff, 0.6) 45%,
darken($metall, 42) 60%,
$legsd 85%,
$none,
$legsd
),
//
linear-gradient(
$this,
$light 15%,
lighten($light, 10),
$light,
$this 30%,
$this
);
}
}
&:nth-of-type(4) {
background: $legsd;
width: 2rem;
height: 8rem;
transform: translate3d(-4.9rem, 59.3rem, 0);
&:before {
transform: translate3d(0.1rem, 2rem, 0) rotate(-4deg) skewY(3deg)
scaleY(2.9);
background-image: repeating-radial-gradient(
circle at 50% 200%,
$legsd,
$legsd 0.075rem,
$none 0.075rem,
$none 0.2rem
),
//
linear-gradient(
-82deg,
darken($metall, 50) 15%,
$none 30%,
darken($metall, 45),
$none 50%,
darken($metall, 42) 70%,
$legsd
),
//
linear-gradient(#fff, $this, $this);
width: 3.2rem;
}
&:after {
display: none;
}
}
}
// green bit
& > x:nth-of-type(1) {
transform: translate3d(-5.6rem, 55.1rem, 0) rotate(-4deg);
width: 4rem;
height: 3rem;
border-radius: 50%;
background: linear-gradient(to right, $bodyl, lighten($bodyl, 10));
&:before {
width: 7.8rem;
height: 4.5rem;
transform: translate3d(-1.8rem, 0.2rem, 0);
background: linear-gradient(to right, $blk2, $bodyd, $bodyl);
border-radius: 50%;
}
&:after {
transform: translate3d(0.3rem, 3.1rem, 0) rotate(0deg);
width: 3.5rem;
height: 1.7rem;
background: $blk2;
border-radius: 50%;
}
& > x {
transform: translate3d(-1.8rem, 0.5rem, 0);
width: 7.8rem;
height: 4.2rem;
box-shadow: inset -0.3rem 0.1rem 0 0.5rem $blk2;
border-radius: 50%;
&:after {
transform: translate3d(4.25rem, 1.7rem, 0) rotate(53deg);
width: 2rem;
height: 2rem;
background: linear-gradient(
90deg,
$none,
$none,
darken($bodyl, 11) 80%,
darken($bodyl, 5)
);
}
}
}
// foot
& > x:nth-of-type(2) {
transform: translate3d(-7rem, 65rem, 0) rotate(5deg);
width: 8rem;
height: 6rem;
&:after {
border-radius: 2rem / 0.4rem 0.2rem 1rem 1rem;
transform: translate3d(2.15rem, 0rem, 0) rotate(-2deg) skewX(6deg)
scaleY(2.75);
background-size: 100% 200%, 100% 100%;
background-image: repeating-radial-gradient(
circle at 60% 300%,
//
rgba($legsd, 1),
rgba($legsd, 1) 0.09rem,
$none 0.09rem,
$none 0.2rem,
//
rgba($legsd, 0.8) 0.2rem,
rgba($legsd, 0.8) 0.29rem,
$none 0.29rem,
$none 0.4rem,
//
rgba($legsd, 0.6) 0.4rem,
rgba($legsd, 0.6) 0.49rem,
$none 0.49rem,
$none 0.6rem,
//
rgba($legsd, 0.4) 0.6rem,
rgba($legsd, 0.4) 0.69rem,
$none 0.69rem,
$none 0.8rem,
//
rgba($legsd, 0.2) 0.8rem,
rgba($legsd, 0.2) 0.89rem,
$none 0.89rem,
$none 1rem,
//
$none 1rem,
$none 1.2rem
),
//
linear-gradient(
to left,
$none 5%,
$none 25%,
darken($metall, 45),
$none 45%,
darken($metall, 42) 65%,
$none
),
//
radial-gradient(at 62% -22%, #fff, $none, $none, $none);
width: 3.2rem;
height: 2rem;
filter: blur(0.05rem);
}
& > x:nth-of-type(1) {
&,
&:before,
&:after {
height: 1.5rem;
width: 3.6rem;
background: $legsd;
border-radius: 50%;
}
transform: translate3d(1.8rem, 0.5rem, 0) rotate(-13deg) skewY(6deg)
skewX(-8deg);
box-shadow: 0 -0.4rem 0 -0.05rem $footl2,
//
0 -0.8rem 0 -0.1rem $legsd,
//
0 -1.2rem 0 -0.15rem $footl2,
//
0 -1.6rem 0 -0.2rem $legsd,
//
0 -2rem 0 -0.25rem $footl2,
//
0 -2.4rem 0 -0.3rem $legsd;
&:before {
transform: translate3d(0rem, 1.1rem, 0) scaleY(0.7) scaleX(1.1);
box-shadow: 0 -0.4rem 0 -0.05rem $footl2,
//
0 -0.8rem 0 -0.1rem $footl2,
//
0 -1.2rem 0 -0.15rem $legsd,
//
0 -1.6rem 0 -0.2rem $legsd,
//
0 -2rem 0 -0.25rem $footl2,
//
0 -2.4rem 0 -0.3rem $footl2;
}
&:after {
transform: translate3d(0rem, 2.2rem, -0.05rem) scaleY(0.5) scaleX(1.4)
skewY(6deg);
box-shadow: 0 -0.4rem 0 -0.1rem $footl2,
//
0 -0.8rem 0 -0.15rem $footl2,
//
0 -1.2rem 0 -0.2rem $legsd,
//
0 -1.6rem 0 -0.25rem $legsd,
//
0 -2rem 0 -0.3rem $footl2,
//
0 -2.4rem 0 -0.35rem $footl2;
}
}
& > x:nth-of-type(2) {
height: 1.2rem;
width: 6.5rem;
background: $legsd;
border-radius: 50%;
transform: translate3d(0.6rem, 3.2rem, 0) rotate(-5deg) skewY(4deg)
skewX(56deg) scaleX(0.82) scaleY(0.7);
box-shadow: -0.4rem 0.3rem 0 0.2rem $footl2,
//
-0.7rem 0.7rem 0 0.5rem $legsd;
&:before {
height: 0.5rem;
width: 6.6rem;
background: $legsd;
border-radius: 50%;
transform: translate3d(0.2rem, 0.1rem, 0) rotate(-1deg);
box-shadow: -0.3rem 0.2rem 0 0.1rem $footl2,
//
0.35rem -0.2rem 0 -0.1rem $footl2,
//
0.25rem -0.1rem 0 -0.1rem $footl2;
}
&:after {
transform: translate3d(13.4rem, -6.9rem, 0) skewY(7deg) skewX(-46deg)
scaleY(0.9);
width: 0.7rem;
height: 0.3rem;
background: #fff;
border-radius: 0.2rem;
box-shadow: 0 1rem 0 rgba(#fff, 0.9),
//
0 2rem 0 rgba(#fff, 0.8),
//
0 3rem 0 rgba(#fff, 0.7),
//
0 4rem 0 rgba(#fff, 0.6),
//
0 5rem 0 rgba(#fff, 0.5),
//
0 6rem 0 rgba(#fff, 0.4),
//
0 7rem 0 rgba(#fff, 0.3),
//
0 8rem 0 rgba(#fff, 0.2),
//
0 9rem 0 rgba(#fff, 0.1);
filter: blur(0.1rem);
}
}
}
&:after {
transform: translate3d(-3.4rem, 63.5rem, 0) scaleY(0.55);
width: 0.4rem;
height: 0.3rem;
background: #fff;
border-radius: 0.2rem;
box-shadow: 0 1rem 0 rgba(#fff, 0.9),
//
0 2rem 0 rgba(#fff, 0.8),
//
0 3rem 0 rgba(#fff, 0.7),
//
0 4rem 0 rgba(#fff, 0.6),
//
0 5rem 0 rgba(#fff, 0.5),
//
0 6rem 0 rgba(#fff, 0.4),
//
0 7rem 0 rgba(#fff, 0.3),
//
0 8rem 0 rgba(#fff, 0.2),
//
0 9rem 0 rgba(#fff, 0.1);
filter: blur(0.1rem);
opacity: 0.5;
}
}
llegf12 {
transform: translate3d(113rem, 1rem, 0) rotate(0deg) rotateX(11.7deg)
skewY(-12deg);
i,
i:before,
i:after {
background-size: 100% 200%, 100% 100%;
transform: scaleY(3);
height: 2.4rem;
background-image: $bg1,
//
linear-gradient(
to left,
darken($metall, 50),
#fff 15%,
darken($metall, 45) 30%,
$legsd 70%,
darken($metall, 51)
);
width: 2.9rem;
background-color: $legsd;
}
i {
&:nth-of-type(1) {
&:before {
transform: translate3d(-0.35rem, 1.75rem, 0) rotate(18deg) skewY(-17deg);
background-image: $bg1,
//
linear-gradient(
to left,
darken($metall, 50),
rgba(#fff, 0.75) 15%,
darken($metall, 45) 30%,
$legsd 70%,
darken($metall, 51)
);
width: 2.8rem;
}
&:after {
transform: translate3d(-0.85rem, 3.1rem, 0) rotate(29deg) skewY(-24deg);
background-image: $bg1,
//
linear-gradient(
to left,
darken($metall, 50),
rgba(#fff, 0.5) 15%,
darken($metall, 45) 30%,
$legsd 70%,
darken($metall, 51)
);
width: 2.6rem;
}
}
&:nth-of-type(2) {
transform: translate3d(-2.25rem, 14.7rem, 0) rotate(16deg) scaleY(3.1);
background-image: $bg4,
//
linear-gradient(
to left,
darken($metall, 50) 5%,
rgba(#fff, 0.3) 20%,
darken($metall, 45) 35%,
$legsd 60%,
darken($metall, 50)
);
height: 2.6rem;
width: 2.8rem;
&:before {
transform: translate3d(-0.3rem, 2.1rem, 0) rotate(10deg) skewY(-7deg);
width: 2.8rem;
background-image: $bg4,
//
linear-gradient(
to left,
darken($metall, 50) 5%,
rgba(#fff, 0.3) 20%,
darken($metall, 45) 35%,
$none 60%,
darken($metall, 49),
darken($metall, 50)
),
//
linear-gradient($legsd, #ccc);
}
&:after {
transform: translate3d(-0.9rem, 3.75rem, 0) rotate(24deg) skewY(-21deg)
scaleY(1);
background-image: repeating-radial-gradient(
circle at 50% 120%,
$legsd,
$legsd 0.075rem,
$none 0.075rem,
$none 0.2rem
),
//
linear-gradient(
-84deg,
darken($metall, 50) 10%,
rgba(#fff, 0.3) 20%,
darken($metall, 45) 40%,
$none 60%,
darken($metall, 49),
darken($metall, 50)
),
//
linear-gradient(#757575, #fff, #fff);
height: 3rem;
width: 2.6rem;
}
}
&:nth-of-type(3) {
transform: translate3d(-9.4rem, 31.8rem, 0) rotate(31deg) skewY(0deg)
scaleY(3);
background-image: $bg5,
//
linear-gradient(
-88deg,
darken($metall, 50) 10%,
#ccc 35%,
darken($metall, 45) 45%,
$none 65%,
darken($metall, 49),
darken($metall, 50)
),
//
linear-gradient(#fff, #535353, #535353);
width: 2.8rem;
&:before {
transform: translate3d(-0.3rem, 1.75rem, 0) rotate(9deg) skewY(-8deg);
width: 2.8rem;
background-image: $bg5,
//
linear-gradient(
-88deg,
darken($metall, 50) 10%,
#fff 35%,
darken($metall, 41) 50%,
darken($metall, 20),
darken($metall, 45),
darken($metall, 50)
);
}
&:after {
transform: translate3d(-0.8rem, 3.57rem, 0) rotate(20deg) skewY(-19deg)
scaleY(1.1);
height: 3rem;
width: 2.7rem;
background-image: $bg5,
//
linear-gradient(
-94deg,
darken($metall, 50) 15%,
#fff 35%,
darken($metall, 30) 50%,
darken($metall, 20),
darken($metall, 45),
darken($metall, 50)
);
}
}
&:nth-of-type(4) {
transform: translate3d(-20.8rem, 46.7rem, 0) rotate(41deg) scaleY(2.9);
background-image: $bg6,
//
linear-gradient(
-94deg,
darken($metall, 50) 15%,
#fff 35%,
darken($metall, 30) 50%,
darken($metall, 20),
darken($metall, 45),
darken($metall, 50)
);
width: 3rem;
height: 3rem;
&:before {
transform: translate3d(-0.1rem, 2.4rem, 0) rotate(0deg);
background-image: $bg6,
//
linear-gradient(
-94deg,
darken($metall, 50) 15%,
#fff 35%,
darken($metall, 30) 50%,
darken($metall, 20),
darken($metall, 45),
darken($metall, 50)
);
width: 3rem;
height: 3.5rem;
}
&:after {
display: none;
}
}
&:nth-of-type(5) {
transform: translate3d(-33rem, 61rem, 0) rotate(38deg) scaleY(2.9);
background-image: $bg6,
//
linear-gradient(
-94deg,
$light,
$blk2,
darken($metall, 50) 25%,
#fff 55%,
darken($metall, 20),
darken($metall, 45),
$blk2
);
width: 3.2rem;
height: 3rem;
border-radius: 1.6rem / 0.3rem;
&:before {
display: none;
}
&:after {
display: none;
}
}
}
// green bit
& > x:nth-of-type(1) {
transform: translate3d(-29.75rem, 56.5rem, 0) rotate(34deg);
width: 4rem;
height: 3rem;
border-radius: 50%;
background: linear-gradient(to right, $bodyl, lighten($bodyl, 10));
&:before {
width: 7.8rem;
height: 4.2rem;
transform: translate3d(-1.9rem, 0.2rem, 0);
background: linear-gradient(to right, $blk2, darken($bodyl, 20), $bodyl);
border-radius: 50%;
}
&:after {
transform: translate3d(0rem, 2.65rem, 0);
width: 3.5rem;
height: 1.7rem;
background: $blk2;
border-radius: 50%;
}
& > x {
transform: translate3d(-1.9rem, 0.5rem, 0);
width: 7.8rem;
height: 3.8rem;
box-shadow: inset -0.3rem 0.3rem 0 0.5rem $blk2;
border-radius: 50%;
background: linear-gradient(50deg, $blk2, rgba($bodyd, 0.8));
}
}
// foot
& > x:nth-of-type(2) {
transform: translate3d(-39rem, 65rem, 0) rotate(40deg);
width: 8rem;
height: 6rem;
& > x:nth-of-type(1) {
&,
&:before,
&:after {
height: 2.5rem;
width: 4rem;
background: $legsd;
border-radius: 50%;
}
transform: translate3d(1.8rem, 0.5rem, 0) rotate(-13deg) skewY(6deg)
skewX(9deg);
box-shadow: 0 -0.2rem 0.5rem -0.5rem $metall,
//
0 -0.3rem 0 -0.1rem darken($footl2, 1),
//
0.1rem -0.7rem 0 -0.2rem $legsd,
//
//
0.1rem -0.9rem 0.5rem -0.6rem $metall,
//
0.1rem -1rem 0 -0.3rem darken($footl2, 1),
//
0.2rem -1.4rem 0 -0.4rem $legsd,
//
//
0.3rem -1.5rem 0.5rem -0.8rem $metall,
//
0.3rem -1.7rem 0 -0.5rem darken($footl2, 1);
&:after {
height: 1.8rem;
width: 4.3rem;
transform: translate3d(-0.2rem, 0.6rem, 0) skewY(-4deg);
background: darken($footl2, 1);
box-shadow: 0 -0.3rem 0 -0.1rem $legsd,
//
0 -0.4rem 0.5rem -0.5rem $metall,
//
0 -0.6rem 0 -0.2rem darken($footl2, 1);
}
}
& > x:nth-of-type(2) {
border-radius: 50%;
height: 1.3rem;
width: 4.6rem;
transform: translate3d(1.7rem, 1.8rem, 0) rotate(-19deg) skewY(2deg)
skewX(9deg);
background: darken($footl2, 1);
box-shadow: 0 -0.3rem 0 -0.1rem $legsd,
//
0 -0.4rem 0.5rem -0.5rem $metall,
//
0 -0.6rem 0 -0.2rem darken($footl2, 1),
//
0 -0.9rem 0 -0.3rem $legsd,
//
0 -1rem 0.5rem -0.7rem $metall;
&:before {
border-radius: 50%;
height: 1rem;
width: 5.2rem;
transform: translate3d(-0.3rem, 0.8rem, 0) rotate(-6deg) skewY(0deg)
skewX(0deg);
background: darken($footl2, 1);
box-shadow: 0 -0.3rem 0 -0.1rem $legsd,
//
0 -0.4rem 0.5rem -0.5rem $metall,
//
0 -0.6rem 0 -0.2rem darken($footl2, 1),
//
0 -0.9rem 0 -0.3rem $legsd,
//
0 -1rem 0.5rem -0.7rem $metall;
}
&:after {
transform: translate3d(2.5rem, -2.5rem, 0) rotate(8deg) skewY(1deg)
skewX(-11deg);
border-radius: 0.75rem 0.75rem 0 0 / 0.25rem 0.25rem 0 0;
width: 1rem;
height: 0.25rem;
background: #fff;
box-shadow: 0 0.5rem 0.1rem #fff,
//
0 1rem 0.1rem #fff,
//
0 1.5rem 0.1rem #fff,
//
//
-0.3rem 0.1rem 0.1rem rgba($metall, 0.5),
//
-0.35rem 0.6rem 0.1rem rgba($metall, 0.5),
//
-0.4rem 1.1rem 0.1rem rgba($metall, 0.5),
//
-0.45rem 1.6rem 0.1rem rgba($metall, 0.5),
//
//
0.3rem 0.1rem 0.1rem rgba($metall, 0.5),
//
0.35rem 0.6rem 0.1rem rgba($metall, 0.5),
//
0.4rem 1.1rem 0.1rem rgba($metall, 0.5),
//
0.45rem 1.6rem 0.1rem rgba($metall, 0.5),
//
//
-0.6rem 0.2rem 0.1rem rgba($metall, 0.2),
//
-0.65rem 0.7rem 0.1rem rgba($metall, 0.2),
//
-0.7rem 1.2rem 0.1rem rgba($metall, 0.2),
//
-0.75rem 1.7rem 0.1rem rgba($metall, 0.2),
//
//
0.6rem 0.2rem 0.1rem rgba($metall, 0.2),
//
0.65rem 0.7rem 0.1rem rgba($metall, 0.2),
//
0.7rem 1.2rem 0.1rem rgba($metall, 0.2),
//
0.75rem 1.7rem 0.1rem rgba($metall, 0.2),
//
;
opacity: 0.7;
}
}
&:after {
transform: translate3d(2.9rem, 1.3rem, 0) rotate(-18deg) skewY(3deg)
skewX(11deg);
border-radius: 0.75rem 0.75rem 0 0 / 0.25rem 0.25rem 0 0;
width: 1.1rem;
height: 0.25rem;
background: rgba(#fff, 0.8);
box-shadow: 0 0.5rem 0.1rem rgba(#fff, 0.6),
//
0 1rem 0.1rem rgba(#fff, 0.4),
//
0 1.5rem 0.1rem rgba(#fff, 0.2),
//
//
-0.35rem 0.1rem 0.1rem rgba($metall, 0.75),
//
-0.45rem 0.6rem 0.1rem rgba($metall, 0.5),
//
-0.55rem 1.1rem 0.1rem rgba($metall, 0.2),
//
-0.65rem 1.6rem 0.1rem rgba($metall, 0.1),
//
//
0.35rem 0.1rem 0.1rem rgba($metall, 0.75),
//
0.45rem 0.6rem 0.1rem rgba($metall, 0.5),
//
0.55rem 1.1rem 0.1rem rgba($metall, 0.2),
//
0.65rem 1.6rem 0.1rem rgba($metall, 0.1),
//
//
-0.6rem 0.2rem 0.1rem rgba($metall, 0.2),
//
-0.65rem 0.7rem 0.1rem rgba($metall, 0.2),
//
-0.7rem 1.2rem 0.1rem rgba($metall, 0.2),
//
-0.75rem 1.7rem 0.1rem rgba($metall, 0.2),
//
//
0.6rem 0.2rem 0.1rem rgba($metall, 0.2),
//
0.65rem 0.7rem 0.1rem rgba($metall, 0.2),
//
0.7rem 1.2rem 0.1rem rgba($metall, 0.2),
//
0.75rem 1.7rem 0.1rem rgba($metall, 0.2),
//
;
opacity: 0.7;
}
}
}
// @import "vacuum";
vacuum {
left: 1rem;
&:before {
width: 150%;
height: 100%;
left: -25%;
background: linear-gradient($none, $none, rgba(#fff, 0.3));
transform: translate3d(-1rem, 1rem, 0);
}
front-left {
transform: translate3d(60.9rem, 20.6rem, 0) rotate(-18deg) skewX(-2deg);
width: 0.8rem;
height: 31.5rem;
background: $inside;
&:before {
width: 10rem;
height: 5rem;
background: $inside;
transform: translate3d(-2rem, 7.4rem, 0) rotate(45deg) skewX(15deg);
box-shadow: 5rem 7.5rem 0 $inside;
border-radius: 0 0 1rem 1rem;
}
//body
i:nth-of-type(1) {
transform: translate3d(-2rem, 0rem, 0);
width: 2.1rem;
height: 7.5rem;
border: 1.3rem solid $bodyd;
box-sizing: content-box;
border-top-width: 9rem;
border-bottom-width: 15rem;
border-radius: 0.2rem;
background: rgba($y3, 0.3);
border-right-width: 2.5rem;
box-shadow: inset 0.15rem 0.15rem 0 $blk2,
//
inset 0 -0.15rem 0 $blk2,
//
inset 0 0 1rem $blk2,
//
5rem 0 0 darken($blk2, 5%),
//
7rem 0 0 darken($blk2, 5%);
&:after {
filter: blur(0.5);
transform: translate3d(-0.8rem, 7.6rem, 0);
border: 1rem solid $none;
border-top: 7rem solid $rust;
opacity: 0.2;
box-shadow: 0.75rem 3rem 0 darken($red, 20%);
}
}
i:nth-of-type(2) {
transform: translate3d(-1.5rem, 2rem, 0);
width: 3rem;
height: 14.7rem;
box-shadow: inset 0 7rem 0 $blk2;
overflow: hidden;
&:before {
width: 0.8rem;
height: 100%;
background: linear-gradient($yellow, rgba($bodyd, 0.8) 13%, $bodyd),
$yellow;
opacity: 0.8;
filter: blur(0.05rem);
border-radius: 0.1rem 0 0 0.1rem;
}
&:after {
transform: translate3d(0.25rem, -0.4rem, 0) skewX(37deg);
width: 5rem;
height: 1.4rem;
background: darken($legsd, 3%);
box-shadow: -1.5rem 2.2rem 0 darken($legsd, 3%),
//
-3.1rem 4.2rem 0 darken($legsd, 3%),
//
-4.7rem 6.2rem 0 darken($legsd, 3%);
}
}
i:nth-of-type(3) {
width: 12.4rem;
height: 14rem;
background: linear-gradient(
$none,
darken($bodyd, 4%),
darken($bodyd, 2%),
$bodyd
);
transform: translate3d(-2rem, 18.6rem, 0) skewY(10deg);
//lower vents
&:before {
width: 5.5rem;
height: 1.1rem;
transform: translate3d(3rem, 6.3rem, 0) skewY(-2deg);
background: darken($blk2, 3%);
box-shadow: -0.5rem 0 0 rgba($yellow, 0.05),
//
0.05rem 1.9rem 0 darken($blk2, 2%),
//
-0.45rem 1.9rem 0 rgba($yellow, 0.07),
//
0.1rem 3.8rem 0 darken($blk2, 1%),
//
-0.4rem 3.8rem 0 rgba($yellow, 0.1),
//
0.15rem 5.7rem 0 $blk2,
//
-0.35rem 5.7rem 0 rgba($yellow, 0.1); //
}
&:after {
width: 5.6rem;
height: 0.3rem;
transform: translate3d(2.8rem, 6.3rem, 0) skewY(-2deg) skewX(50deg);
background: darken($legsd, 6%);
box-shadow: -2.2rem 1.9rem 0 darken($legsd, 5%),
//
-4.45rem 3.8rem 0 darken($legsd, 4%),
//
-6.65rem 5.7rem 0 darken($legsd, 3%); //
}
}
}
front-middle {
transform: translate3d(59.75rem, 8.75rem, 0) rotate(-18deg) skewY(-2deg)
skewX(-2deg);
width: 0.8rem;
height: 25rem;
background: $inside;
box-shadow: 2.5rem 0 0 $inside,
//
4.75rem 0 0 $inside;
&:before {
width: 14rem;
height: 3rem;
background: $inside;
transform: translate3d(-2rem, 5.7rem, 0) rotate(55deg) skewX(32deg);
border-radius: 1rem;
box-shadow: 5.5rem 9.8rem 0 $inside,
//
4rem -3rem 0 $inside,
//
7.2rem 6.5rem 0 $inside,
//
7.2rem 8rem 0 $inside;
}
//body
i:nth-of-type(2),
i:nth-of-type(3),
i:nth-of-type(4) {
transform: translate3d(-0.75rem, 0rem, 0);
width: 3.3rem;
height: 17rem;
border: 0.9rem solid darken($bodyd, 3%);
box-sizing: content-box;
border-top-width: 3.6rem;
border-bottom-width: 18rem;
border-radius: 0.3rem;
background: rgba($y3, 0.3);
border-right-width: 1rem;
box-shadow: inset 0.25rem 0.25rem 0 $blk2, inset 0 -0.25rem 0 $blk2,
inset 0 0 1rem $blk2;
&:before {
transform: translate3d(-0.4rem, -0.75rem, 0) skewY(5deg);
width: 0.5rem;
height: 18rem;
background: linear-gradient($yellow, rgba($bodyd, 0.8) 13%, $bodyd),
$yellow;
opacity: 0.8;
filter: blur(0.05rem);
border-radius: 0.1rem 0 0 0.1rem;
}
&:after {
transform: translate3d(-0.5rem, -0.9rem, 0);
border: 1rem solid $none;
border-top-color: darken($bodyd, 4%);
border-right-width: 0;
width: 4rem;
border-left-width: 0.6rem;
border-radius: 0.1rem;
}
}
i:nth-of-type(2) {
border-left-width: 1.2rem;
&:before {
background: linear-gradient(
rgba($rust, 0.7),
rgba(darken($rust, 10%), 0.8) 13%,
$bodyd
),
$yellow;
height: 17.75rem;
}
}
i:nth-of-type(3) {
transform: translate3d(4.1rem, 0rem, 0) skewX(-1deg);
height: 17.2rem;
&:before {
background: linear-gradient(
$none,
$bodyd,
rgba(darken($rust, 10%), 0.8) 30%,
$bodyd
),
$yellow;
height: 17.9rem;
}
}
i:nth-of-type(4) {
transform: translate3d(8.6rem, 0rem, 0) skewX(-2deg);
height: 17.4rem;
&:before {
background: linear-gradient($none, $bodyd, $bodyd, $none, $bodyd),
$yellow;
height: 18.1rem;
}
}
i:nth-of-type(1) {
background: $inside;
width: 7rem;
height: 25rem;
transform: translate3d(6.5rem, 0rem, 0) skewX(-2deg);
}
i:nth-of-type(5) {
width: 14rem;
height: 14rem;
background: radial-gradient(
at center bottom,
$light,
rgba($li2, 0.3),
$bodyd 60%,
darken($bodyd, 4%)
),
darken($bodyd, 4%);
transform: translate3d(-0.8rem, 26rem, 0) skewY(9deg);
border-radius: 0.2rem;
overflow: hidden;
&:before {
width: 10rem;
height: 10rem;
background: linear-gradient(to top right, darken($bodyd, 4%), $none);
transform: translate3d(8rem, 1rem, 0) rotate(-20deg) skewX(-40deg);
filter: blur(0.2rem);
border-radius: 2rem;
}
&:after {
width: 100%;
height: 100%;
background: linear-gradient(darken($bodyd, 3%), $none);
}
}
//lower vent 1
i:nth-of-type(8) {
width: 7.1rem;
height: 1.3rem;
transform: translate3d(2.6rem, 32.9rem, 0) skewY(7deg);
background: darken($blk2, 3%);
border-radius: 50% / 0.1rem;
overflow: hidden;
&:before {
width: 110%;
height: 0.6rem;
background: linear-gradient(
to right,
$bodyl,
$rust,
rgba($blk2, 0.5),
$blk2,
$blk2
),
$li2;
transform: skewX(70deg);
opacity: 0.5;
box-shadow: inset 0 -0.3rem 0.1rem $blk2;
}
&:after {
width: 0.7rem;
height: 100%;
background: linear-gradient(rgba($rust, 0.8) 10%, rgba($rust, 0.8)),
$bodyl;
box-shadow: inset -0.4rem 0 0.1rem $blk2, 0 0 0.15rem 0.15rem $blk2;
transform: translate3d(0, 0.35rem, 0) skewY(40deg);
opacity: 0.7;
}
}
//lower vent 2
i:nth-of-type(9) {
width: 7.1rem;
height: 1.3rem;
transform: translate3d(2.6rem, 35.3rem, 0) skewY(8deg);
background: darken($blk2, 3%);
border-radius: 50% / 0.1rem;
overflow: hidden;
&:before {
width: 110%;
height: 0.6rem;
background: linear-gradient(
to right,
$y2,
$y2,
lighten($li2, 10%),
$rust,
$blk2,
$blk2
),
$li2;
transform: skewX(45deg);
opacity: 0.5;
box-shadow: inset 0 -0.2rem 0.1rem $blk2;
}
&:after {
width: 0.7rem;
height: 100%;
background: linear-gradient(108deg, rgba($rust, 0.4), $blk2, $blk2),
$li2;
transform: translate3d(0, 0.35rem, 0) skewY(40deg);
opacity: 0.8;
box-shadow: 0.25rem 0.25rem 0.15rem 0.15rem darken($blk2, 2%),
inset -0.15rem -0.15rem 0.15rem 0.15rem $blk2;
}
}
//lower vent 3
i:nth-of-type(10) {
width: 7.1rem;
height: 1.3rem;
transform: translate3d(2.6rem, 37.7rem, 0) skewY(8deg);
background: darken($blk2, 3%);
border-radius: 50% / 0.1rem;
overflow: hidden;
&:before {
width: 110%;
height: 0.6rem;
background: linear-gradient(
to right,
$y2,
$y2,
rgba($rust, 0.5),
$li2 47%,
$blk2 50%,
$blk2
),
$li2;
transform: skewX(30deg);
opacity: 0.5;
}
&:after {
width: 0.7rem;
height: 100%;
background: linear-gradient(
136deg,
rgba($bodyd, 0.7),
rgba($rust, 0.4) 52%,
$blk2 62%,
$blk2
),
$li2;
transform: translate3d(0, 0.35rem, 0) skewY(40deg);
opacity: 0.8;
box-shadow: inset 0 -0.2rem 0.2rem $blk2, 0 0 1rem $blk;
}
}
//light
i:nth-of-type(11) {
width: 1.6rem;
height: 1.85rem;
background: linear-gradient($db, rgba($rust, 0.5), darken($blk2, 4%)),
$legsd;
transform: translate3d(1.1rem, 24.2rem, 0) rotate(44deg);
border-radius: 0rem 1.8rem 1rem 0 / 0.5rem 1.6rem 0.7rem 0.5rem;
box-shadow: 0.5rem 0.5rem 1rem rgba($blk, 0.25);
&:before {
width: 1.55rem;
height: 1.55rem;
background: radial-gradient(
at 41% 68%,
#fff,
#fff 10%,
$blk2 45%,
$blk2
);
transform: translate3d(-0.75rem, 0.11rem, 0) rotate(-45deg)
skewX(-15deg);
border-radius: 50%;
box-shadow: inset 0 0 0 0.2rem $legsd,
//
inset 0.1rem 0.1rem 0 0.2rem darken($blk2, 4%),
//
inset 0.3rem 0.3rem 0.1rem #fff,
//
inset 0.3rem -0.4rem 0.5rem -0.3rem $y2,
//
inset 0.6rem 0 0.1rem rgba($legsd, 0.7),
//
inset 0 0.5rem 0.2rem rgba(darken($p1, 10%), 0.7),
//
inset -0.15rem -0.3rem 0.1rem $p1;
}
}
//light2
i:nth-of-type(12) {
width: 1.6rem;
height: 1.85rem;
background: linear-gradient(
$db,
$db 30%,
darken($blk2, 2%) 60%,
darken($blk2, 4%)
),
$legsd;
transform: translate3d(10rem, 24.75rem, 0) rotate(44deg);
border-radius: 0rem 1.8rem 1rem 0 / 0.5rem 1.6rem 0.7rem 0.5rem;
box-shadow: 0.5rem 0.5rem 1rem rgba($blk, 0.25);
&:before {
width: 1.55rem;
height: 1.55rem;
background: radial-gradient(
at 41% 68%,
#fff,
#fff 10%,
$blk2 45%,
$blk2
);
transform: translate3d(-0.75rem, 0.11rem, 0) rotate(-45deg)
skewX(-15deg);
border-radius: 50%;
box-shadow: inset 0 0 0 0.2rem $legsd,
//
inset 0.1rem 0.1rem 0 0.2rem darken($blk2, 4%),
//
inset 0.3rem 0.3rem 0.1rem #fff,
//
inset 0.3rem -0.4rem 0.5rem -0.3rem $y2,
//
inset 0.6rem 0 0.1rem rgba($legsd, 0.7),
//
inset 0 0.5rem 0.2rem rgba(darken($p1, 10%), 0.7),
//
inset -0.15rem -0.3rem 0.1rem $p1;
}
}
//light 3
i:nth-of-type(13) {
width: 1rem;
height: 1rem;
background: conic-gradient(from 45deg, $blk2, $y2, $blk2);
transform: translate3d(4.5rem, 38.75rem, 0);
border-radius: 50%;
box-shadow: 0.4rem -0.2rem 0.2rem -0.25rem $blk2,
//
0.4rem 0.4rem 0.2rem -0.25rem #fff,
//
0.25rem 0.05rem 0 $light,
//
0.5rem 0.1rem 0 $blk2,
//
0.75rem 0.1rem 0.25rem $blk2,
//
//
;
}
//rust
i:nth-of-type(7) {
width: 0.5rem;
height: 10rem;
background: $rustd;
border-radius: 50%;
opacity: 0.3;
filter: blur(0.05rem);
transform: translate3d(4rem, 27.5rem, 0);
box-shadow: -0.25rem -6rem 0 $rustd,
//
-0.25rem -6rem 0 $rustd,
//
0.15rem -2rem 0 -0.1rem rgba($rustd, 0.5),
//
-2.25rem -3.5rem 0 $rustd,
//
-2.5rem -3.5rem 0 -0.1rem rgba($rustd, 0.5),
//
-4rem -5rem 0 -0.1rem rgba($rustd, 0.5),
//
5.5rem -4.5rem 0 $rustd,
//
6rem -5.5rem 0 $rustd,
//
7rem 1.5rem 0 -0.1rem rgba($rustd, 0.5),
//
7.5rem -0.5rem 0 -0.05rem rgba($rustd, 0.5),
//
3rem -6rem 0 -0.1rem rgba($rustd, 0.5),
//
3.5rem -5rem 0 $rustd,
//
//
;
}
i:nth-of-type(6) {
width: 14rem;
height: 14rem;
transform: translate3d(-0.8rem, 26rem, 0) skewY(9deg);
border-radius: 0.2rem;
overflow: hidden;
&:after {
width: 100%;
height: 100%;
background: linear-gradient(darken($bodyd, 3%), $none);
}
}
}
front-right {
transform: translate3d(79.5rem, 13.75rem, 0) rotate(-16deg) skewY(-1deg)
skewX(-2deg);
//body
//windows
i:nth-of-type(2),
i:nth-of-type(3),
i:nth-of-type(4) {
transform: translate3d(-0.75rem, 0rem, 0);
width: 3.3rem;
height: 15.5rem;
border: 0.9rem solid darken($bodyd, 3%);
box-sizing: content-box;
border-top-width: 3.5rem;
border-bottom-width: 15rem;
border-left-width: 1.5rem;
border-radius: 0.3rem;
background: rgba($y3, 0.3);
border-right-width: 1rem;
box-shadow: inset 0.25rem 7.3rem 0 darken($blk2, 2%),
//
inset 0 -0.25rem 0 $blk2,
//
inset 0 0 1rem $blk2;
//frame light
&:before {
transform: translate3d(-0.5rem, -1.35rem, 0) skewY(5deg);
width: 0.5rem;
height: 16.75rem;
background: linear-gradient($yellow, rgba($bodyd, 0.8) 13%, $bodyd),
$yellow;
opacity: 0.8;
filter: blur(0.05rem);
border-radius: 0.1rem 0 0 0.1rem;
}
//vents
&:after {
transform: translate3d(-0.35rem, 5.25rem, 0) skewX(20deg);
background: darken($bodyd, 2%);
height: 1.7rem;
width: 4.4rem;
border-radius: 0.1rem;
box-shadow: inset 1rem 0 1rem darken($bodyd, 4%),
//
0.9rem -1.2rem 1rem darken($blk2, 4%),
//
0.9rem -2.2rem 0 darken($bodyd, 2%),
//
1.7rem -3.2rem 1rem darken($blk2, 4%),
//
1.7rem -4.4rem 0 darken($bodyd, 4%),
//
2.5rem -5.2rem 1rem darken($blk2, 4%),
//
2.5rem -6.7rem 1rem rgba($rust, 0.05),
//
2.5rem -6.7rem 0 darken($bodyd, 4%),
//
2.5rem -7rem 2rem rgba($light, 0.05); //
}
}
//w2
i:nth-of-type(3) {
transform: translate3d(4.1rem, 0, 0) skewX(-1deg);
border-top-width: 3.65rem;
border-left-width: 1.2rem;
width: 3.6rem;
}
//w3
i:nth-of-type(4) {
transform: translate3d(9rem, 0rem, 0) skewX(-2deg);
border-top-width: 3.75rem;
border-left-width: 1.1rem;
border-right-width: 0.85rem;
width: 3.7rem;
}
//inside
i:nth-of-type(1) {
background: $inside;
width: 14.5rem;
height: 24rem;
transform: translate3d(0, 0rem, 0) skewX(-2deg);
}
i:nth-of-type(5) {
width: 15rem;
height: 14rem;
background: linear-gradient(
$none,
darken($bodyd, 3%),
darken($bodyd, 4%)
);
transform: translate3d(-0.75rem, 23rem, 0) skewY(8deg);
border-radius: 0.2rem;
}
//lower vent 1
i:nth-of-type(8) {
width: 7.4rem;
height: 0.9rem;
transform: translate3d(3rem, 28.3rem, 0) skewY(7deg);
background: darken($blk2, 3%);
border-radius: 50% / 0.1rem;
box-shadow: 0 -0.4rem 0 darken($bodyd, 5%),
//
0 2.2rem 0 darken($blk2, 3%),
//
0 1.8rem 0 darken($bodyd, 5%),
//
0 4.5rem 0 darken($blk2, 3%),
//
0 4.1rem 0 darken($bodyd, 5%),
//
0 6.7rem 0 darken($blk2, 3%),
//
0 6.4rem 0 darken($bodyd, 5%);
&:before {
width: 0.3rem;
height: 1.1rem;
background: darken($bodyd, 1%);
transform: translate3d(0, -0.1rem, 0) skewY(45deg);
box-shadow: 0 2.2rem 0 darken($bodyd, 1%),
//
0 4.5rem 0 darken($bodyd, 1%),
//
0 6.7rem 0 darken($bodyd, 1%);
}
&:after {
width: 1rem;
height: 0.5rem;
background: darken($bodyd, 3%);
transform: translate3d(-0.3rem, 0.9rem, 0) skewY(4deg);
box-shadow: 0 2.2rem 0 darken($bodyd, 3%),
//
0 4.5rem 0 darken($bodyd, 3%),
//
0 6.7rem 0 darken($bodyd, 4%);
}
}
//light
i:nth-of-type(11) {
width: 1.5rem;
height: 1.85rem;
background: linear-gradient(
$db,
$blk2 40%,
darken($blk2, 2%) 50%,
darken($blk2, 3%)
),
$legsd;
transform: translate3d(6rem, 22.3rem, 0) rotate(44deg);
border-radius: 0rem 1.8rem 1rem 0 / 0.5rem 1.6rem 0.7rem 0.5rem;
box-shadow: 0.5rem 0.5rem 1rem rgba($blk, 0.25);
&:before {
width: 1.65rem;
height: 1.55rem;
background: radial-gradient(
at 41% 68%,
#fff,
#fff 10%,
$blk2 45%,
$blk2
);
transform: translate3d(-0.75rem, 0.11rem, 0) rotate(-45deg)
skewX(-15deg);
border-radius: 50%;
box-shadow: inset 0 0 0 0.2rem $legsd,
//
inset 0.1rem 0.1rem 0 0.2rem darken($blk2, 4%),
//
inset 0.3rem 0.3rem 0.1rem #fff,
//
inset 0.3rem -0.4rem 0.5rem -0.3rem $y2,
//
inset 0.6rem 0 0.1rem rgba($legsd, 0.7),
//
inset 0 0.5rem 0.2rem rgba(darken($p1, 10%), 0.7),
//
inset -0.15rem -0.3rem 0.1rem $p1;
}
}
//rust
i:nth-of-type(6) {
width: 0.5rem;
height: 10rem;
background: $rustd;
border-radius: 50%;
opacity: 0.3;
filter: blur(0.05rem);
transform: translate3d(3rem, 27rem, 0);
box-shadow: -0.25rem -6rem 0 $rustd,
//
-0.25rem -6rem 0 $rustd,
//
0.15rem -2rem 0 -0.1rem rgba($rustd, 0.5),
//
-2.25rem -3.5rem 0 $rustd,
//
-2.5rem -3.5rem 0 -0.1rem rgba($rustd, 0.5),
//
-4rem -5rem 0 -0.1rem rgba($rustd, 0.5),
//
5.5rem -4.5rem 0 $rustd,
//
6rem -5.5rem 0 $rustd,
//
7rem 1.5rem 0 -0.1rem rgba($rustd, 0.5),
//
7.5rem -0.5rem 0 -0.05rem rgba($rustd, 0.5),
//
3rem -6rem 0 -0.1rem rgba($rustd, 0.5),
//
3.5rem -5rem 0 $rustd,
//
//
10rem 0rem 0 $rustd,
//
9.9rem -1rem 0 $rustd,
//
8.2rem -0.5rem 0 $rustd,
//
7.4rem -2rem 0 $rustd,
//
7.8rem -2rem 0 $rustd,
//
//
;
}
//window finishes
i:nth-of-type(7) {
&,
&:before,
&:after {
width: 15rem;
height: 0.15rem;
transform: translate3d(0, 4.5rem, 0) skewY(1deg);
background: linear-gradient(
to right,
$none,
$none,
$none,
rgba($yellow, 0.2),
$none 65%,
rgba($yellow, 0.4)
),
darken($bodyd, 3%);
}
&:before {
transform: translate3d(0, 2.1rem, 0);
}
&:after {
transform: translate3d(0, 4.4rem, 0);
}
}
i:nth-of-type(12) {
width: 0.9rem;
height: 17rem;
transform: translate3d(-0.7rem, 2rem, 0);
background: linear-gradient(
200deg,
$none,
$bodyd 43%,
rgba($light, 0.4) 50%,
$none
),
darken($bodyd, 4%);
&:before {
width: 0.7rem;
height: 15rem;
transform: translate3d(4.9rem, 2rem, 0) skewX(-1deg);
background: linear-gradient($none, $none, rgba($light, 0.2), $none),
darken($bodyd, 3%);
box-shadow: 4.85rem -2rem 0 darken($bodyd, 3%);
}
&:after {
width: 0.8rem;
height: 20rem;
transform: translate3d(14.8rem, -2rem, 0) skewX(-2deg);
background: darken($bodyd, 3%);
}
}
}
bottom {
width: 12.45rem;
height: 9rem;
background: darken($bodyd, 4%);
transform: translate3d(72.1rem, 50.1rem, 0) skewY(-8deg) skewX(63deg);
border-radius: 0.1rem;
&:before {
width: 1.8rem;
height: 7.2rem;
background: mix($bodyd, $light, 99%);
transform: translate3d(6.9rem, 1.5rem, 0) skewY(-6deg) skewX(-12deg);
filter: blur(0.05rem);
}
&:after {
width: 8.2rem;
height: 0.8rem;
background: linear-gradient(
to right,
mix($bodyd, $light, 99%),
$li2,
mix($bodyd, $light, 99%)
);
transform: translate3d(0.8rem, 1.25rem, 0) skewY(1deg) skewX(-27deg);
filter: blur(0.05rem);
}
i:nth-of-type(1) {
width: 5rem;
height: 0.4rem;
background: radial-gradient(
circle at 70% 50%,
$orange,
darken($orange, 30%)
);
transform: translate3d(3.15rem, 0.5rem, 0);
border-radius: 0.15rem;
box-shadow: inset 0 0 0.15rem $blk2,
//
inset 0.4rem -0.15rem 0 0 rgba($blk2, 0.5);
&:before {
background: radial-gradient($orange, $none, $none);
width: 15rem;
height: 6rem;
transform: translate3d(-7rem, 0rem, 0);
border-radius: 50%;
opacity: 0.5;
}
}
i:nth-of-type(2) {
&,
&:before {
width: 10rem;
height: 13.5rem;
background: linear-gradient(
to right,
darken($bodyd, 4%),
darken($bodyd, 5%)
);
transform: translate3d(10.4rem, -4.85rem, 0) skewY(-3deg) skewX(-16deg);
border-radius: 0.1rem;
}
&:before {
transform: translate3d(3.2rem, 0, 0) skewX(-16deg);
}
}
i:nth-of-type(3) {
&,
&:before {
width: 4.5rem;
height: 0.8rem;
background: linear-gradient(
to right,
darken($bodyd, 4%),
rgba($li2, 0.1) 15%,
$bodyd,
rgba($li2, 0.3) 60%,
darken($bodyd, 4%)
)
60%,
darken($bodyd, 4%);
transform: translate3d(13.75rem, -4.5rem, 0) skewY(-2deg) skewX(-16deg);
border-radius: 0.1rem;
border-top: solid 0.1rem rgba($li2, 0.3);
border-right: solid 0.075rem rgba($li2, 0.1);
filter: blur(0.05rem);
}
&:before {
transform: translate3d(6.2rem, -0.1rem, 0);
border-top: solid 0.1rem rgba($li2, 0.4);
background: linear-gradient(
to right,
darken($bodyd, 4%),
rgba($li2, 0.3) 15%,
$bodyd,
rgba($li2, 0.1) 60%,
darken($bodyd, 4%)
)
60%,
darken($bodyd, 4%);
}
}
//light1
i:nth-of-type(6) {
transform: translate3d(14rem, -3.7rem, 0) skewY(-1deg) skewX(-58deg)
rotate(-33deg);
width: 1rem;
height: 0.5rem;
background: $blk2;
border-radius: 0.25rem;
&:before {
width: 0.5rem;
height: 0.5rem;
background: $blk2;
border-radius: 0.25rem;
transform: translate3d(0.7rem, -0.15rem, 0) skewY(-21deg) skewX(13deg);
box-shadow: 0 -0.25rem 0.25rem $blk2, 0.15rem 0.15rem 0.25rem $blk2;
}
&:after {
width: 1.2rem;
height: 1.55rem;
background: radial-gradient(
at 41% 68%,
#fff,
#fff 10%,
$blk2 45%,
$blk2
);
transform: translate3d(-1rem, -0.5rem, 0);
border-radius: 50%;
box-shadow: 0.25rem 0 0 $blk2,
//
inset 0 0 0 0.2rem $legsd,
//
inset 0.1rem 0.1rem 0 0.2rem darken($blk2, 4%),
//
inset 0.3rem -0.4rem 0.5rem -0.3rem $y2,
//
inset 0.6rem 0 0.1rem rgba($legsd, 0.7),
//
inset 0 0.5rem 0.2rem rgba(darken($p1, 10%), 0.7),
//
inset -0.15rem -0.3rem 0.1rem $p1;
}
}
//light2
i:nth-of-type(7) {
transform: translate3d(21rem, -4rem, 0) skewY(-1deg) skewX(-58deg)
rotate(-27deg);
width: 1rem;
height: 0.5rem;
background: $blk2;
border-radius: 0.25rem;
&:before {
width: 0.5rem;
height: 0.5rem;
background: $blk2;
border-radius: 0.25rem;
transform: translate3d(0.7rem, -0.15rem, 0) skewY(-21deg) skewX(13deg);
box-shadow: 0 -0.25rem 0.25rem $blk2, 0.15rem 0.15rem 0.25rem $blk2;
}
&:after {
width: 1.65rem;
height: 1.55rem;
background: radial-gradient(
at 41% 68%,
#fff,
#fff 10%,
$blk2 45%,
$blk2
);
transform: translate3d(-1rem, -0.5rem, 0);
border-radius: 50%;
box-shadow: 0.15rem -0.15rem 0 $blk2,
//
inset 0 0 0 0.2rem $legsd,
//
inset 0.05rem -0.1rem 0 0.2rem darken($blk2, 4%),
//
inset 0.3rem -0.4rem 0.5rem -0.3rem $y2,
//
inset 0.6rem 0 0.1rem rgba($legsd, 0.7),
//
inset 0 0.5rem 0.2rem rgba(darken($p1, 10%), 0.7),
//
inset -0.15rem -0.3rem 0.1rem $p1;
}
}
i:nth-of-type(5) {
filter: blur(0.025rem);
transform: translate3d(13rem, -3.6rem, 0) skewY(-2deg) skewX(-65deg);
width: 11rem;
height: 0.5rem;
background: linear-gradient(
to right,
$bodyd,
rgba($li2, 0.3) 15%,
$bodyd,
rgba($rust, 0.4) 50%,
rgba($li2, 0.4) 60%,
rgba($li2, 0.1) 70%
),
$bodyd;
box-shadow: inset 0 0.2rem 0 rgba($blk2, 0.75);
&:before {
background: linear-gradient($bodyd, rgba($li2, 0.3), $bodyd), $bodyd;
width: 1.8rem;
height: 10rem;
transform: translate3d(17.2rem, -0.1rem, 0) skewY(6deg) skewX(45deg)
rotate(-44deg);
box-shadow: inset -1rem 0 1rem darken($bodyd, 2%);
}
&:after {
transform: translate3d(1.4rem, 0.5rem, 0) skewX(36deg);
width: 10rem;
height: 1.2rem;
background: linear-gradient(
to right,
$bodyd,
$bodyd 15%,
$bodyd,
rgba($rust, 0.4) 50%,
rgba($li2, 0.1)
),
darken($bodyd, 4%);
box-shadow: inset 0 0 1rem darken($bodyd, 4%);
}
}
i:nth-of-type(4) {
width: 16rem;
height: 9rem;
background: darken($bodyd, 5%);
transform: translate3d(19.5rem, -0.1rem, 0) skewY(-1deg) skewX(-42deg);
border-radius: 0.1rem;
&:before {
background: radial-gradient($orange, $none, $none);
width: 20rem;
height: 10rem;
transform: translate3d(-2rem, 1rem, 0);
border-radius: 50%;
opacity: 0.8;
}
&:after {
width: 7rem;
height: 0.4rem;
background: radial-gradient(
circle at 70% 50%,
$orange,
darken($orange, 30%)
);
transform: translate3d(4.5rem, 1rem, 0);
border-radius: 0.15rem;
box-shadow: inset 0 0 0.15rem $blk2,
//
inset 0.4rem -0.15rem 0 0 rgba($blk2, 0.5);
}
}
//right bottom
i:nth-of-type(8) {
width: 11rem;
height: 1rem;
background: radial-gradient(circle at 60% 0, $li2, darken($bodyd, 4%));
transform: translate3d(24rem, 1.75rem, 0) skewY(-1deg) skewX(-38deg);
filter: blur(0.01rem);
&:before {
width: 1.5rem;
height: 7.2rem;
background: mix($bodyd, $light, 99%);
transform: translate3d(9.7rem, 0.3rem, 0) skewY(-20deg) skewX(-4deg);
box-shadow: inset -0.5rem 0 0.1rem rgba($bodyl, 0.2);
}
&:after {
width: 9.75rem;
height: 6.7rem;
background: linear-gradient(
$none,
darken($bodyd, 4%),
darken($bodyd, 4%)
);
transform: translate3d(0rem, 1.15rem, 0) skewY(1deg) skewX(-4deg);
}
}
//middle back
i:nth-of-type(9) {
background: darken($bodyd, 5%);
filter: blur(0.01rem);
width: 3rem;
height: 2.5rem;
transform: translate3d(8.25rem, 7.45rem, 0) skewY(1deg) skewX(-17deg);
box-shadow: 4.5rem 0 0 darken($bodyd, 5%);
&:before {
width: 3rem;
height: 1rem;
background: $bodyd;
transform: translate3d(1rem, -1.1rem, 0) skewY(1deg) skewX(-56deg);
box-shadow: 4.5rem 0 0 $bodyd;
}
&:after {
width: 1.75rem;
height: 2.5rem;
background: darken($bodyd, 2%);
transform: translate3d(3rem, -0.5rem, 0) skewY(-32deg) skewX(-5deg);
border-radius: 0 0 0 0.3rem;
box-shadow: 4.55rem 2.75rem 0 darken($bodyd, 2%);
}
}
}
middle-left-bg {
background: linear-gradient(
-252deg,
lighten($bodyl, 5%),
$bodyl 35%,
$bodyd 45%,
darken($bodyd, 5%)
);
transform: translate3d(76rem, 9.5rem, 0) skewX(14deg) skewY(55deg);
box-shadow: inset 0 2rem 5rem rgba($bodyl, 0.2),
inset 1rem 0 1rem -1rem $bodyl;
height: 40rem;
width: 7rem;
&:before {
width: 6rem;
height: 20rem;
border-radius: 50%;
transform: translate3d(0.2rem, 9.2rem, 0) skewX(-15deg) skewY(0deg);
background: radial-gradient(
circle at center -10%,
$light,
rgba($light, 0.1),
$none
);
filter: blur(0.1rem);
opacity: 0.6;
}
}
middle-left {
transform: translate3d(76rem, 9.5rem, 0) skewX(14deg) skewY(55deg);
height: 40rem;
width: 7rem;
&:before {
width: 1.5rem;
height: 6rem;
transform: translate3d(2rem, 0.75rem, 0);
background: linear-gradient(rgba(#fff, 0.4), $none), $red;
border-radius: 0.2rem;
opacity: 0.4;
}
i:nth-of-type(1) {
width: 1.7rem;
height: 12.5rem;
background: $blue2;
transform: translate3d(0.75rem, 2rem, 0) skewX(0deg) skewY(0deg);
box-shadow: inset 0 1.5rem 0 $blk2, inset 0 1.7rem 0 0 darken($blk2, 4%);
overflow: hidden;
border-radius: 0.2rem 0.2rem 1.7rem 0.2rem / 0.2rem 0.2rem 7rem 0.2rem;
&:before {
width: 1.5rem;
height: 6.5rem;
background: $bodyd;
transform: translate3d(0.85rem, 0.15rem, 0) skewX(0deg) skewY(-61deg);
box-shadow: -0.1rem 0 0 darken($blk2, 4%);
}
&:after {
width: 1.5rem;
height: 6.5rem;
background: $bodyd;
transform: translate3d(0.75rem, 5rem, 0) skewX(-11deg) skewY(-73deg);
box-shadow: -0.1rem 0 0 darken($blk2, 4%);
}
}
i:nth-of-type(2) {
width: 1.5rem;
height: 6rem;
background: $blue2;
transform: translate3d(3rem, 2rem, 0) skewX(0deg) skewY(0deg);
box-shadow: inset 0 1.5rem 0 $blk2, inset 0 1.7rem 0 0 darken($blk2, 4%);
overflow: hidden;
border-radius: 0.2rem;
&:before {
width: 1.5rem;
height: 6.5rem;
background: $bodyd;
transform: translate3d(0.65rem, 0.15rem, 0) skewX(0deg) skewY(-61deg);
box-shadow: -0.1rem 0 0 darken($blk2, 4%);
}
}
i:nth-of-type(3) {
width: 1.5rem;
height: 6rem;
background: $blue2;
transform: translate3d(4.85rem, 2rem, 0) skewX(0deg) skewY(0deg);
box-shadow: inset 0 1.5rem 0 $blk2, inset 0 1.7rem 0 0 darken($blk2, 4%);
overflow: hidden;
border-radius: 0.2rem;
&:before {
width: 1.5rem;
height: 6.5rem;
background: $bodyd;
transform: translate3d(0.65rem, 0.15rem, 0) skewX(0deg) skewY(-61deg);
box-shadow: -0.1rem 0 0 darken($blk2, 4%);
}
}
i:nth-of-type(4) {
width: 1.5rem;
height: 15rem;
transform: translate3d(1.5rem, 9.1rem, 0) skewX(-10.2deg) skewY(0deg);
border-top: 1.75rem inset rgba($bodyd, 0.5);
border-right: 0.5rem inset rgba($bodyd, 0.9);
box-shadow: inset -0.6rem 0 0.6rem -0.5rem rgba($bodyd, 0.9);
&:before {
width: 0.5em;
height: 6rem;
background: $bodyl;
transform: translate3d(-0.5rem, -2rem, 0) skewX(-1deg) skewY(0deg);
}
&:after {
width: 0.5em;
height: 3rem;
transform: translate3d(3rem, -4.9rem, 0) skewX(-20deg) skewY(-18deg);
border: 0.1rem solid $none;
box-shadow: 0 -0.4rem 0.1rem -0.1rem $light, 0 -0.5rem 0 $blk2,
inset 0 1rem 0.5rem -0.5rem rgba($light, 0.1),
inset 0 0 0 0.25rem $blk2;
}
}
//door
i:nth-of-type(5) {
width: 2rem;
height: 12.5rem;
background: radial-gradient(
circle at center top,
rgba($light, 0.75),
$none 20%,
$none,
$none
);
background: linear-gradient(rgba($light, 0.95), $none 20%, $none, $none);
transform: translate3d(3.5rem, 9.5rem, 0) skewX(-10.2deg) skewY(-11deg);
border-bottom: 1.75rem inset $blk2;
border-left: 0.5rem inset rgba($rust, 0.6);
border-radius: 0.5rem;
box-shadow: inset 0 0.6rem 0.2rem -0.5rem $light,
//
inset 0 1.1rem 0.2rem -1rem #fff,
//
inset 0 -0.2rem 0.2rem $blk2,
//
0 -0.2rem 0.2rem $blk2,
//
0 2rem 0.3rem rgba($blk, 0.1),
//
0 4rem 0.3rem rgba($blk, 0.1);
&:before {
width: 0.5em;
height: 2rem;
background: $blue2;
transform: translate3d(0.7rem, 1.5rem, 0) skewX(0deg) skewY(0deg);
border-radius: 50%;
box-shadow: -0.25rem 0.6rem 0.1rem $blk2,
//
-0.15rem 0.25rem 0 $yellow,
//
inset -0.05rem 0.25rem 0 $light,
//
inset 0.05rem 0.25rem 0 mix($orange, $light, 50%),
//
inset -0.05rem -0.25rem 0 mix(lighten($bodyd, 20%), $light, 50%),
//
inset 0.05rem -0.25rem 0 mix($bodyl, $orange, 30%),
//
inset -0.2rem 0.5rem 0.1rem $blk2,
//
-0.15rem 0.6rem 0.05rem 0.05rem rgba($light, 0.25),
//
-0.1rem 1.75rem 0.1rem 0.1rem rgba($blk2, 0.75),
//
-0.5rem 2rem 1rem 0.5rem rgba($blk2, 0.5),
//
-0.2rem 4rem 1rem 0.5rem rgba($blk2, 0.5),
//
-0.2rem 6rem 1rem 0.5rem rgba($blk2, 0.2),
//
-0.2rem 3rem 0.5rem 0.2rem rgba($blk2, 0.5);
}
&:after {
width: 1.5em;
height: 5rem;
transform: translate3d(1.6rem, 8.3rem, 0) skewX(10deg) skewY(-18deg);
border-right: 0.5rem inset rgba(darken($rust, 10%), 0.3);
border-bottom: 0.5rem inset rgba($light, 0.1);
border-left: 0.01rem inset $none;
}
}
//more door
i:nth-of-type(6) {
&:before {
width: 0.5rem;
height: 1.5rem;
border: 0.25rem solid $blk2;
border-left-width: 0;
transform: translate3d(5.65rem, 13.15rem, 0) skewX(169deg) skewY(111deg);
border-radius: 0 0.25rem 0.25rem 0;
}
&:after {
filter: blur(0.05rem);
width: 0.5rem;
height: 5rem;
background: darken($rust, 10%);
transform: translate3d(4.2rem, 13.5rem, 0) skewX(-11deg) scaleX(0.5);
border-radius: 50%;
opacity: 0.3;
box-shadow: 1.7rem 0.4rem 0.2rem 0 $blk,
//
1.65rem -0.2rem 0.1rem -0.1rem $blk,
//
1.25rem 2rem 0 darken($rust, 10%),
//
-0.5rem 2rem 0 darken($rust, 10%),
//
1rem -3rem 0 -0.1rem darken($rust, 10%),
//
0.75rem 1rem 0 -0.1rem darken($rust, 10%),
//
;
}
}
//steps
i:nth-of-type(8) {
width: 2.5rem;
height: 20rem;
transform: translate3d(-0.85rem, 25.3rem, 0) skewX(-11deg) skewY(-31deg);
overflow: hidden;
&:before {
width: 2.5rem;
height: 1.2rem;
transform: translate3d(1.3rem, 0, 0) skewX(32deg);
border-radius: 0.2rem;
background: linear-gradient(
141deg,
darken($blk2, 2%),
darken($blk2, 2%) 38%,
darken($bodyd, 2%) 41%,
darken($bodyd, 2%)
);
box-shadow: inset 0 0 0.6rem darken($blk2, 2%);
}
&:after {
width: 0.75rem;
height: 2.5rem;
transform: translate3d(2rem, 10.75rem, 0) skewX(10deg);
border-radius: 0.2rem;
background: linear-gradient(
125deg,
#261a16,
#261a16 23%,
#31231a 31%,
#31231a
);
box-shadow: inset 0 0 0.6rem darken($blk2, 2%);
}
x:nth-of-type(1) {
&,
&:before,
&:after {
width: 0.75rem;
height: 2.5rem;
transform: translate3d(1.75rem, 1.75rem, 0);
border-radius: 0.2rem;
background: linear-gradient(
118deg,
darken($blk2, 2%),
darken($blk2, 2%) 30%,
darken($bodyd, 2%) 37%,
darken($bodyd, 2%)
);
box-shadow: inset 0 0 0.6rem darken($blk2, 2%);
}
&:before {
transform: translate3d(0, 3rem, 0);
}
&:after {
transform: translate3d(0, 6rem, 0);
}
}
}
i:nth-of-type(9) {
width: 1.75rem;
height: 12.5rem;
transform: translate3d(2.85rem, 23.7rem, 0) skewX(-11.5deg) skewY(-34deg);
border-top: 1.5rem inset rgba($blk2, 0.3);
border-right: 0.5rem inset rgba($blk2, 0.9);
box-shadow: inset 0 0 0.6rem rgba($blk2, 0.8);
filter: blur(0.025rem);
border-radius: 0 0 0 1rem / 0 0 0 3rem;
&:before {
border: 0.23rem solid darken($blk2, 5%);
width: 0.75rem;
height: 23rem;
border-left-width: 0;
transform: translate3d(0rem, -12rem, 0) skewX(180.4deg) skewY(113deg);
border-radius: 0 0.75rem 0.5rem 0.25rem / 0 1.25rem 1.25rem 0;
box-shadow: 0.05rem -0.1rem 0.1rem darken($blk2, 5%),
//
0 -0.25rem 0 $rust,
//
0 0.3rem 0 darken($blk2, 5%); //
}
&:after {
transform: translate3d(0, -3.25rem, 0) skewX(180.4deg) skewY(118deg);
width: 0.7rem;
height: 0.5rem;
background: darken($blk2, 5%);
box-shadow: 0 6rem 0 darken($blk2, 5%),
//
0 10rem 0 darken($blk2, 5%);
}
}
i:nth-of-type(7) {
width: 1.9rem;
height: 1.5rem;
transform: translate3d(2rem, 23rem, 0) skewX(-11deg) skewY(-24deg);
border-radius: 0.2rem;
background: linear-gradient(
117deg,
#261a16,
#261a16 70%,
#31231a 75%,
#31231a
);
box-shadow: inset 0 0 0.6rem darken($blk2, 2%);
&:before {
width: 2rem;
height: 4.25rem;
transform: translate3d(0.75rem, 11.9rem, 0) skewX(12deg) skewY(-23deg);
background: $red;
border-radius: 0 2rem 0 0;
opacity: 0.2;
}
&:after {
height: 11rem;
width: 0.8rem;
border-left: 0.2rem solid $rust;
border-bottom: 0.8rem solid $rust;
transform: translate3d(-1.7rem, -13.2rem, 0) skewY(11deg);
background: repeating-linear-gradient(
$none,
$none 2.5rem,
$yellow 3rem
);
opacity: 0.2;
}
}
i:nth-of-type(10) {
width: 1.9rem;
height: 13rem;
transform: translate3d(4.1rem, 28.4rem, 0) skewX(-11deg) skewY(79deg);
border-radius: 0.2rem;
overflow: hidden;
&:before {
width: 1.9rem;
height: 13rem;
transform: translate3d(-1rem, 0rem, 0) skewX(-9.5deg) skewY(0deg);
border-radius: 0.2rem;
box-shadow: inset 0 3rem 0 $blk2;
}
}
}
lights {
filter: blur(0.9rem);
opacity: 0.1;
&,
&:before,
&:after,
*:before,
*:after,
* {
width: 100rem;
height: 20rem;
background: linear-gradient(to right, $none, lighten($light, 10%));
transform: translate3d(0, 6rem, 0) skewX(-28deg) skewY(20deg);
border-radius: 50%;
}
&:before {
transform: translate3d(-21rem, 5rem, 0) rotate(-1deg);
background: linear-gradient(to right, $none, $light);
}
&:after {
transform: translate3d(-28rem, 12rem, 0) rotate(-6deg);
}
& > *:nth-of-type(1) {
transform: translate3d(-27rem, 20rem, 0) rotate(-9deg);
background: linear-gradient(to right, $none, lighten($red, 20%));
&:before {
transform: translate3d(45rem, 57rem, 0) rotate(-68deg);
}
&:after {
transform: translate3d(100rem, 49rem, 0) rotate(-125deg);
background: linear-gradient(to right, $none, $light);
}
}
}
right {
transform: translate3d(95.8rem, 18.7rem, 0) skewX(4deg) skewY(58deg);
height: 29rem;
width: 11.75rem;
background: $bodyl;
box-shadow: inset 0 2rem 5rem rgba($bodyl, 0.2),
inset 1rem 0 1rem -1rem $bodyl;
border-radius: 0 0 5rem 0;
///////
&:after {
height: 29rem;
width: 11.75rem;
background: linear-gradient(
100deg,
$none,
$none,
$blk2,
$none,
$blk2,
$none,
$blk2,
$none 55%,
$none
),
linear-gradient(100deg, rgba($light, 0.5), $none);
opacity: 0.5;
}
i:nth-of-type(1) {
background: linear-gradient($bodyl, $bodyd);
width: 7rem;
height: 6.2rem;
transform: translate3d(10rem, 4rem, 0);
box-shadow: inset 2rem 1rem 1rem $bodyl;
&:before {
background: $bodyd;
width: 5.5rem;
height: 11rem;
transform: translate3d(0.45rem, 5.7rem, 0) skewX(-11deg) skewY(7deg);
}
&:after {
background: $bodyd;
width: 5.5rem;
height: 11rem;
transform: translate3d(-0.15rem, 9rem, 0) skewX(-11deg) skewY(-46deg);
}
}
i:nth-of-type(2) {
background: linear-gradient($bodyl, rgba($bodyd, 0.5), $bodyl, $bodyl),
$bodyl;
width: 10rem;
height: 21rem;
transform: translate3d(2rem, 8rem, 0) skewX(2deg) skewY(-48deg);
filter: blur(0.1rem);
&:before {
background: $bodyd;
width: 2rem;
height: 16rem;
transform: translate3d(9rem, 7rem, 0) skewX(-2deg) skewY(37deg);
border-radius: 1rem 0 2rem 0;
filter: blur(0.1rem);
box-shadow: -0.5rem -0.5rem 1rem $bodyd;
}
&:after {
}
}
i:nth-of-type(3),
i:nth-of-type(4) {
&,
&:before,
&:after {
border-top: 1rem inset lighten($bodyd, 20%);
border-right: 0.65rem inset lighten($bodyd, 4%);
box-shadow: inset 0 0 2rem rgba($bodyl2, 0.5);
border-radius: 0.2rem;
}
}
i:nth-of-type(3) {
width: 1.3rem;
height: 4.65rem;
transform: translate3d(1.1rem, 1.7rem, 0) skewX(11deg) skewY(-7deg);
&:before {
width: 1.3rem;
height: 4.5rem;
transform: translate3d(1.6rem, -1rem, 0);
}
&:after {
width: 1.2rem;
height: 4.4rem;
transform: translate3d(3.3rem, -0.9rem, 0);
}
}
i:nth-of-type(4) {
width: 1.2rem;
height: 4.3rem;
transform: translate3d(5.8rem, 1.4rem, 0) skewX(11deg) skewY(-7deg);
&:before {
width: 1.1rem;
height: 4.2rem;
transform: translate3d(1.6rem, -1rem, 0);
background: rgba($rust, 0.5);
}
&:after {
width: 1rem;
height: 4.1rem;
transform: translate3d(3rem, -0.9rem, 0);
}
}
i:nth-of-type(5) {
width: 0.9rem;
height: 4rem;
transform: translate3d(10rem, 1.1rem, 0) skewX(11deg) skewY(-7deg);
border-top: 0.9rem inset lighten($bodyd, 20%);
border-right: 0.5rem inset lighten($bodyd, 4%);
box-shadow: inset 0 0 2rem rgba($bodyl2, 0.5);
border-radius: 0.1rem;
&:before {
width: 0.8rem;
height: 3.8rem;
transform: translate3d(0.8rem, -0.8rem, 0) skewX(-12deg);
border-top: 0.7rem inset lighten($bodyd, 20%);
border-right: 0.3rem inset rgba($bodyd, 0.5);
border-radius: 0.1rem 0.1rem 0.1rem 0.7rem;
}
}
i:nth-of-type(6) {
width: 0;
height: 3.2rem;
transform: translate3d(3.6rem, 6.9rem, 0) skewX(11deg) skewY(-11deg);
border-top: 1.5rem solid darken($bodyd, 5%);
border-right: 1.3rem solid $bodyd;
border-radius: 0.1rem;
background: $blue2;
&:before {
width: 0;
height: 3.1rem;
border-top: 1.4rem solid darken($bodyd, 5%);
border-right: 1.2rem solid $bodyd;
border-radius: 0.1rem;
transform: translate3d(1.6rem, -1.5rem, 0);
background: $blue2;
}
&:after {
width: 1.2rem;
height: 3rem;
transform: translate3d(3.1rem, -1.5rem, 0);
border-top: 1rem inset lighten($bodyd, 20%);
border-right: 0.65rem inset lighten($bodyd, 4%);
box-shadow: inset 0 0 2rem rgba($bodyl2, 0.5);
border-radius: 0.2rem;
background: rgba($rust, 0.5);
}
}
i:nth-of-type(7) {
transform: translate3d(8.1rem, 6rem, 0) skewX(11deg) skewY(-11deg);
width: 1.1rem;
height: 3rem;
border-top: 1rem inset lighten($bodyd, 20%);
border-right: 0.65rem inset lighten($bodyd, 4%);
box-shadow: inset 0 0 2rem rgba($bodyl2, 0.5);
border-radius: 0.2rem;
&:before {
width: 0;
height: 2.9rem;
border-top: 1.2rem solid darken($bodyd, 5%);
border-right: 1rem solid $bodyd;
border-radius: 0.1rem;
transform: translate3d(1.4rem, -1rem, 0);
background: $blue2;
}
&:after {
transform: translate3d(2.7rem, -1rem, 0);
border-top: 1.2rem solid darken($bodyd, 5%);
border-right: 1rem solid $bodyd;
border-radius: 0.1rem;
background: $blue2;
width: 0;
height: 2.8rem;
}
}
i:nth-of-type(8) {
width: 1.4rem;
height: 7.3rem;
transform: translate3d(2.3rem, 7.2rem, 0) skewX(11deg) skewY(-11deg);
border-top: 1.5rem solid darken($bodyd, 5%);
border-right: 1.3rem solid $bodyd;
border-radius: 0.1rem 0.1rem 1.3rem 0.1rem / 0.1rem 0.1rem 3rem 0.1rem;
background: $blue2;
&:before {
transform: translate3d(0.4rem, 2.1rem, 0) skewX(-13deg) skewY(-16deg);
width: 0.5rem;
height: 3.7rem;
background: $bodyd;
border-radius: 0 0 0 0.2rem / 0 0 0 1rem;
box-shadow: 0.5rem 1rem 0 $bodyl,
//
0.5rem 1rem 0 $bodyl,
//
0.5rem -0.2rem 0 $bodyl; //
}
&:after {
width: 1rem;
height: 3rem;
transform: translate3d(10.4rem, -1.5rem, 0);
border-top: 0.7rem inset lighten($bodyd, 20%);
border-right: 0.5rem inset lighten($bodyd, 4%);
box-shadow: inset 0 0 2rem rgba($bodyl2, 0.5);
border-radius: 0.2rem;
}
}
i:nth-of-type(9) {
&,
&:before,
&:after {
border-top: 1rem inset lighten($bodyd, 20%);
border-right: 0.4rem inset lighten($bodyd, 4%);
box-shadow: inset 0 0 2rem rgba($bodyl2, 0.5);
border-radius: 0.2rem;
}
}
i:nth-of-type(9) {
width: 1.2rem;
height: 8.5rem;
transform: translate3d(3.9rem, 11.1rem, 0) skewX(-1deg) skewY(-20deg);
background: linear-gradient(
rgba($rust, 0.5),
rgba($light, 0.5),
$none,
$none
);
box-shadow: inset 0 1rem 0.5rem rgba($rust, 0.5),
inset -0.5rem 0 0.2rem rgba(darken($bodyl, 8%), 0.7);
&:before {
width: 1.1rem;
height: 7.7rem;
transform: translate3d(2.9rem, -1.05rem, 0);
border-bottom: 0.2rem inset $bodyl;
}
&:after {
width: 1.1rem;
height: 7.5rem;
transform: translate3d(4.3rem, -0.9rem, 0);
border-bottom: 0.3rem inset $bodyl;
}
}
i:nth-of-type(10) {
width: 1rem;
height: 7.2rem;
transform: translate3d(6.6rem, 19.1rem, 0) skewX(-1.5deg) skewY(-30deg);
border-top: 1rem inset rgba($blk2, 0.8);
border-right: 0.5rem inset rgba($blk2, 0.6);
box-shadow: inset 0 0 0.6rem rgba($blk2, 0.8);
border-radius: 0.2rem;
&:before {
width: 0.75rem;
height: 11rem;
transform: translate3d(0rem, -5.3rem, 0) skewX(179deg) skewY(118deg);
border-radius: 0 0.75rem 0.5rem 0.25rem / 0 1.25rem 1.25rem 0;
//
border: 0.21rem solid darken($blk2, 8%);
border-left-width: 0;
box-shadow: 0.05rem -0.1rem 0 darken($blk2, 8%),
//
0 -0.25rem 0 $rust,
//
0 0.3rem 0 darken($blk2, 8%); //
}
&:after {
transform: translate3d(0, -3.25rem, 0) skewX(179deg) skewY(125deg);
width: 0.8rem;
height: 0.25rem;
background: darken($blk2, 5%);
box-shadow: 0 3rem 0 darken($blk2, 5%),
//
0 6rem 0 darken($blk2, 5%);
}
}
//door
i:nth-of-type(11) {
width: 1.9rem;
height: 9.7rem;
background: linear-gradient(rgba($yellow, 0.95), $none 20%, $none, $none),
$bodyl;
transform: translate3d(5.2rem, 11rem, 0) skewX(-1.2deg) skewY(-23deg);
border-bottom: 1.5rem inset rgba($blk2, 0.8);
border-left: 0.6rem inset rgba($rust, 0.8);
border-radius: 0.1rem;
box-shadow: inset 0 0.6rem 0.2rem -0.5rem $yellow,
//
inset 0 1.1rem 0.2rem -1rem #fff,
//
inset 0 -0.2rem 0.2rem $blk2,
//
0.2rem -0.2rem 0.2rem -0.2rem $yellow;
&:before {
width: 0.75em;
height: 2rem;
background: $blue2;
transform: translate3d(0.5rem, 0.7rem, 0) skewX(-3deg) scaleX(0.6)
scaleY(0.8);
border-radius: 50%;
box-shadow: -0.25rem 0.6rem 0.1rem $blk2,
//
-0.15rem 0.25rem 0 $yellow,
//
inset -0.05rem 0.25rem 0 $yellow,
//
inset 0.05rem 0.25rem 0 mix($orange, $yellow, 50%),
//
inset -0.05rem -0.25rem 0 mix(lighten($bodyd, 20%), $yellow, 50%),
//
inset 0.05rem -0.25rem 0 mix($bodyl, $orange, 30%),
//
inset -0.3rem 0.5rem 0.1rem $blk2,
//
-0.15rem 0.6rem 0.05rem 0.05rem rgba($light, 0.25),
//
;
}
&:after {
width: 0.3em;
height: 3rem;
transform: translate3d(1rem, 7.7rem, 0) rotate(18deg);
background: linear-gradient(rgba($bodyl2, 0.5), $none), $bodyl;
}
}
//more door
i:nth-of-type(12) {
&:before {
width: 0.3rem;
height: 1.1rem;
border: 0.25rem solid $blk2;
border-left-width: 0;
transform: translate3d(7rem, 13.5rem, 0) skewX(178deg) skewY(116deg);
border-radius: 0 0.25rem 0.25rem 0;
}
&:after {
filter: blur(0.05rem);
width: 0.5rem;
height: 5rem;
transform: translate3d(6rem, 12.5rem, 0) skewX(-2deg) scaleX(0.5);
border-radius: 50%;
opacity: 0.2;
//
background: darken($rust, 10%);
box-shadow: 1.7rem 0.4rem 0.2rem 0 $blk,
//
1.65rem -0.2rem 0.1rem -0.1rem $blk,
//
1.25rem 2rem 0 darken($rust, 10%),
//
-0.5rem 2rem 0 darken($rust, 10%),
//
1rem -1rem 0 -0.1rem darken($rust, 10%),
//
0.75rem 1rem 0 -0.1rem darken($rust, 10%),
//
;
}
}
//light
i:nth-of-type(13) {
width: 0.5em;
height: 3rem;
transform: translate3d(6.7rem, 7.6rem, 0) skewX(-30deg) skewY(-18deg);
border: 0.1rem solid $none;
box-shadow: 0 -0.4rem 0.1rem -0.1rem rgba($light, 0.5), 0 -0.5rem 0 $blk2,
inset 0 1rem 0.5rem -0.5rem rgba($light, 0.1), inset 0 0 0 0.25rem $blk2;
&:before {
border-top: 1rem solid $blk2;
border-left: 0.5rem solid $blk2;
width: 0.4rem;
height: 2rem;
transform: translate3d(6.3rem, 13.4rem, 0) skewX(24deg) skewY(-16deg);
border-radius: 0 0 100% 0;
opacity: 0.8;
}
}
//steps
i:nth-of-type(14) {
width: 3rem;
height: 7rem;
transform: translate3d(4.75rem, 19.75rem, 0) skewX(14deg) skewY(-31deg);
overflow: hidden;
&:before {
width: 1rem;
height: 5rem;
transform: translate3d(-0.8rem, 0, 0) skewX(-19deg);
border-top: 0.7rem inset lighten($bodyd, 20%);
border-right: 0.4rem inset lighten($bodyd, 4%);
box-shadow: inset 0 0 2rem rgba($bodyl2, 0.5);
border-radius: 0.2rem;
}
x {
&,
&:before,
&:after {
width: 1.4rem;
height: 1.3rem;
transform: translate3d(0.6rem, 1.7rem, 0) skewY(6deg) skewX(-18deg);
border-radius: 0.1rem;
border-top: 1rem solid $blk2;
border-right: 1rem solid $bodyd;
box-shadow: inset 0 0 0.3rem darken($blk2, 2%);
box-sizing: border-box;
}
&:before {
transform: translate3d(0, 0.75rem, 0);
}
&:after {
transform: translate3d(0, 2.5rem, 0);
}
}
}
i:nth-of-type(15),
i:nth-of-type(16) {
&,
&:before,
&:after {
border-top: 1rem inset lighten($bodyd, 20%);
border-right: 0.4rem inset rgba($blk2, 0.8);
box-shadow: inset 0 0 2rem rgba($bodyd, 0.2);
border-radius: 0.2rem;
}
}
i:nth-of-type(15) {
width: 1rem;
height: 7.5rem;
transform: translate3d(9.6rem, 9.2rem, 0) skewX(-1deg) skewY(-20deg);
background: linear-gradient(
rgba($rust, 0.5),
rgba($light, 0.5),
$none,
$none
);
box-shadow: inset 0 1rem 0.5rem rgba($rust, 0.5),
inset -0.5rem 0 0.2rem rgba(darken($bodyl, 8%), 0.7);
&:before {
width: 0.9rem;
height: 7.2rem;
transform: translate3d(1.25rem, -1rem, 0);
}
&:after {
width: 1rem;
height: 7rem;
transform: translate3d(2.4rem, -0.7rem, 0);
}
}
i:nth-of-type(16) {
width: 1.1rem;
height: 7.1rem;
transform: translate3d(8rem, 18.2rem, 0) skewX(-1deg) skewY(-27deg);
&:before {
width: 1rem;
height: 6.8rem;
transform: translate3d(1.4rem, -1rem, 0);
}
&:after {
width: 1rem;
height: 6.5rem;
transform: translate3d(2.7rem, -1rem, 0);
}
}
i:nth-of-type(17),
i:nth-of-type(18) {
&,
&:before,
&:after {
border-top: 0.7rem inset rgba($bodyd, 0.2);
border-right: 0.3rem inset rgba($blk2, 0.5);
box-shadow: inset 0 0 2rem rgba($bodyd, 0.2);
border-radius: 0.2rem;
}
}
i:nth-of-type(17) {
width: 0.9rem;
height: 6.1rem;
transform: translate3d(12rem, 16.2rem, 0) skewX(-1deg) skewY(-27deg);
&:before {
width: 0.8rem;
height: 5.9rem;
transform: translate3d(1.2rem, -0.8rem, 0);
}
&:after {
width: 0.7rem;
height: 5.5rem;
transform: translate3d(2.2rem, -0.9rem, 0);
}
}
i:nth-of-type(18) {
width: 0.8rem;
height: 4.8rem;
transform: translate3d(13.25rem, 10.2rem, 0) skewX(-1deg) skewY(-18deg);
&:before {
width: 0.7rem;
height: 4.7rem;
transform: translate3d(1.1rem, -0.8rem, 0);
}
&:after {
width: 0.6rem;
height: 4.6rem;
transform: translate3d(2rem, -0.9rem, 0);
}
}
i:nth-of-type(19) {
&,
&:before {
border-top: 0.6rem inset rgba($bodyd, 0.2);
border-right: 0.2rem inset rgba($bodyl, 0.2);
box-shadow: inset 0 0 2rem rgba($bodyd, 0.2);
border-bottom: 0.7rem solid $none;
border-left: 0.1rem solid $none;
}
}
i:nth-of-type(19) {
width: 0.9rem;
height: 4.8rem;
transform: translate3d(15.65rem, 9rem, 0) skewX(-11deg) skewY(-22deg);
border-radius: 0.2rem 0.4rem 0.2rem 0.2rem / 0.2rem 2rem 0.2rem 0.2rem;
&:before {
width: 0.8rem;
height: 4.7rem;
transform: translate3d(0, 4.9rem, 0);
border-radius: 0.2rem 0.2rem 0.2rem 0.2rem / 0.2rem 0.2rem 0.2rem 0.2rem;
}
&:after {
}
}
}
}
vacuum {
width: 100%;
height: 100%;
litter:nth-of-type(1) {
transform: translate3d(-1rem, 87rem, 0) rotate(2deg);
}
litter:nth-of-type(2) {
transform: translate3d(0, 84rem, 0);
width: 100%;
height: 100%;
&:before {
width: 150%;
height: 100%;
left: -25%;
background: radial-gradient(98rem, $none, $none, rgba($bin1, 0.2), $blue);
transform: translate3d(-1rem, -82rem, 0);
}
}
}
// @import "ctrls";
ctrl1 {
transform: translate3d(75.5rem, 50rem, 0);
width: 1.7rem;
height: 0.5rem;
background: linear-gradient(
to right,
rgba($light, 0.4),
$none,
$none,
rgba($orange, 0.05)
),
$legsd;
border-radius: 50%;
box-shadow: 0 -0.2rem 0 0 darken($legsd, 2%);
&:before {
width: 1.1rem;
height: 2.9rem;
background: linear-gradient(
to right,
rgba($orange, 0.5),
$none 20%,
$none 45%,
rgba($light, 0.05) 50%,
rgba($light, 0.3)
),
$legsd;
transform: translate3d(0.25rem, 0.15rem, 0);
border-radius: 0.5rem / 0.15rem;
box-shadow: inset 0 0 0.3rem $blk3;
}
&:after {
width: 1.1rem;
height: 0.3rem;
background: $blk3;
transform: translate3d(0.25rem, 2.8rem, 0);
border-radius: 0.5rem / 0.15rem;
}
i:nth-of-type(1) {
width: 17.25rem;
height: 1rem;
transform: translate3d(-16.25rem, 2.3rem, 0) skewY(3deg);
background: repeating-linear-gradient(
90deg,
$none,
$none 5.4rem,
$blk3 5.4rem,
$blk3 5.75rem
),
//
repeating-linear-gradient(
-13deg,
$none,
$none 1em,
$blk3 1rem,
$blk3 1.3rem
);
border-radius: 0.15rem 0.15rem 0.3rem 0.3rem;
box-shadow: -0.6rem -0.3rem 0 $blk3,
//
0 0.3rem 0 $blk3,
//
-0.6rem 0.3rem 0 $blk3,
//
;
&:before {
width: 39rem;
height: 0.4rem;
background: radial-gradient(rgba(#fff, 0.5), $blk3, $blk3), $blk3;
transform: translate3d(-33.15rem, 14.1rem, 0) rotate(-47.5deg);
}
&:after {
width: 39rem;
height: 0.4rem;
background: radial-gradient(rgba(#fff, 0.5), $blk3, $blk3), $blk3;
transform: translate3d(-33.2rem, 14.7rem, 0) rotate(-46deg);
}
}
i:nth-of-type(2) {
width: 8rem;
height: 6rem;
transform: translate3d(-48rem, 25.5rem, 0) rotate(11deg) skew(9deg);
background: linear-gradient(to left, $bodyl, $bodyl2, $bodyd 80%, $legsl);
border-radius: 50%;
&:before {
width: 8rem;
height: 6rem;
transform: translate3d(-0.1rem, 0.3rem, 0);
background: radial-gradient(
circle at 60% 1rem,
$bodyl2,
$bodyl2 30%,
$bodyd 50%,
$legsl
);
border-radius: 50%;
box-shadow: inset -0.1rem 0.1rem 0 0.6rem $shadow;
}
&:after {
width: 4rem;
height: 3rem;
transform: translate3d(1.5rem, 2.75rem, 0);
background: $bodyd;
border-radius: 50%;
}
}
}
ctrl2 {
transform: translate3d(79rem, 51.5rem, 0);
width: 1.7rem;
height: 0.5rem;
background: $blk3;
border-radius: 50%;
box-shadow: 0 -0.2rem 0 0 darken($legsd, 2%);
&:before {
width: 1.1rem;
height: 2.9rem;
background: linear-gradient(to right, lighten($orange, 5%), $legsd, $legsd);
transform: translate3d(0.25rem, 0.15rem, 0);
border-radius: 0.5rem / 0.15rem;
box-shadow: inset 0 -0.25rem 0.5rem $blk3;
}
&:after {
width: 1.1rem;
height: 0.3rem;
background: $blk3;
transform: translate3d(0.25rem, 2.8rem, 0);
border-radius: 0.5rem / 0.15rem;
}
& > i:nth-of-type(1) {
width: 15.1rem;
height: 1rem;
transform: translate3d(-14.2rem, 3.2rem, 0) skewY(-3deg);
background: repeating-linear-gradient(
90deg,
$none,
$none 4.75rem,
$blk3 4.75rem,
$blk3 5.05rem
),
//
repeating-linear-gradient(
-13deg,
$none,
$none 0.9em,
$blk3 0.9rem,
$blk3 1.2rem
);
border-radius: 0.15rem 0.15rem 0.3rem 0.3rem;
box-shadow: -0.6rem -0.3rem 0 $blk3,
//
0 0.3rem 0 $blk3,
//
-0.6rem 0.3rem 0 $blk3,
//
;
}
& > i:nth-of-type(2) {
transform: translate3d(-64rem, 26rem, 0) rotate(-22deg) skew(-26deg);
filter: blur(0.1rem);
&:after {
width: 5.2rem;
height: 1rem;
transform: translate3d(-0.4rem, 1.2rem, 0) rotate(41deg);
border-radius: 50%;
box-shadow: 0 0.1rem 0 $bodyl,
//
-0.5rem 0.1rem 0 $bodyl,
//
0.5rem 0.1rem 0 $bodyl,
//
0 0.2rem 0 0.1rem $shadow,
//
-0.5rem 0.2rem 0 0.1rem $shadow,
//
0.5rem 0.2rem 0 0.1rem $shadow; //
}
& > * {
width: 4.25rem;
height: 3.5rem;
overflow: hidden;
&:before {
width: 2.5rem;
height: 6rem;
transform: translate3d(1rem, -1rem, 0) rotate(-45deg);
background: linear-gradient(to left, $bodyl2, $shadow);
border-radius: 0 0 0 2.5rem / 0 0 0 3rem;
}
&:after {
width: 2.4rem;
height: 0.5rem;
transform: translate3d(2.1rem, 0.8rem, 0) rotate(45deg);
border-radius: 50%;
box-shadow: 0 0.2rem 0 0.1rem $shadow,
//
-0.4rem 0.2rem 0 0.1rem $shadow,
//
0.2rem 0.2rem 0 0.1rem $shadow,
//
;
}
}
}
}
ctrl3 {
transform: translate3d(82.2rem, 53rem, 0);
width: 1.7rem;
height: 0.5rem;
background: $blk3;
border-radius: 50%;
box-shadow: 0 -0.2rem 0 0 darken($legsd, 2%);
&:before {
width: 7.1rem;
height: 1.2rem;
transform: translate3d(-6.2rem, 3.2rem, 0) skewY(-20deg);
background: repeating-linear-gradient(
90deg,
$none,
$none 2.2rem,
$blk3 2.2rem,
$blk3 2.55rem
),
//
repeating-linear-gradient(
-21deg,
$none,
$none 0.6rem,
$blk3 0.6rem,
$blk3 0.8rem
);
border-radius: 0.15rem 0.15rem 0.3rem 0.3rem;
border: 0.35rem solid $blk3;
filter: blur(0.025rem);
}
&:after {
width: 1.1rem;
height: 0.3rem;
background: $blk3;
transform: translate3d(0.25rem, 2.6rem, 0);
border-radius: 0.5rem / 0.15rem;
}
& > i:nth-of-type(1) {
width: 1.1rem;
height: 2.7rem;
background: linear-gradient(to right, lighten($orange, 5%), $legsd, $legsd);
transform: translate3d(0.25rem, 0.15rem, 0);
border-radius: 0.5rem / 0.15rem;
box-shadow: inset 0 -0.25rem 0.2rem $blk3;
&:before {
width: 30rem;
height: 0.3rem;
background: linear-gradient(
to right,
$blk2,
$blk2 40%,
$light2 42%,
$light2 45%,
$blk2 47%,
$blk2 60%,
$light2 62%,
$light2 65%,
$blk2 68%,
$blk2
);
transform: translate3d(-31rem, 15.5rem, 0) rotate(-49deg);
filter: blur(0.05rem);
border-bottom: 0.1rem solid $blk3;
}
&:after {
width: 30rem;
height: 0.3rem;
background: linear-gradient(
to right,
$blk2,
$blk2 40%,
$light2 43%,
$light2 45%,
$blk2 48%,
$blk2 60%,
$light2 63%,
$light2 65%,
$blk2 67%,
$blk2
);
transform: translate3d(-31.1rem, 16rem, 0) rotate(-48deg);
filter: blur(0.05rem);
border-bottom: 0.1rem solid $blk3;
}
}
& > i:nth-of-type(2) {
transform: translate3d(-27.5rem, 26.2rem, 0) rotate(-64deg) skew(-13deg);
filter: blur(0.05rem);
&:after {
width: 4.5rem;
height: 1.4rem;
transform: translate3d(-0.6rem, 1.5rem, 0) rotate(42deg);
border-radius: 50%;
box-shadow: 0 -0.15rem 0 $shadow,
//
-0.6rem -0.15rem 0 $shadow,
//
0.6rem -0.15rem 0 $shadow,
//
0 -0.3rem 0 0.1rem $bodyd,
//
0.6rem -0.3rem 0 0.1rem lighten($bodyd, 5%),
//
-0.6rem -0.3rem 0 0.1rem $bodyd; //
}
& > * {
width: 3.7rem;
height: 3.7rem;
overflow: hidden;
&:before {
width: 3rem;
height: 10rem;
transform: translate3d(1.5rem, -2rem, 0) rotate(-45deg);
background: radial-gradient(
at 120% 50%,
lighten($bodyl2, 10%),
$bodyd,
$shadow
);
border-radius: 0 0 0 2.5rem / 0 0 0 3rem;
}
&:after {
width: 2.4rem;
height: 0.5rem;
transform: translate3d(1.6rem, 0.7rem, 0) rotate(45deg);
border-radius: 50%;
box-shadow: 0 -0.2rem 0 0.1rem $shadow,
//
-0.4rem -0.2rem 0 0.1rem $shadow,
//
0.2rem -0.2rem 0 0.1rem $shadow,
//
;
}
}
}
}
ctrl4 {
transform: translate3d(85rem, 54rem, 0);
width: 1.6rem;
height: 0.5rem;
background: $blk3;
border-radius: 50%;
box-shadow: 0 -0.2rem 0 0 darken($legsd, 2%);
&:before {
width: 10.6rem;
height: 1.2rem;
transform: translate3d(-9.6rem, 3.6rem, 0) skewY(-14deg);
background: repeating-linear-gradient(
90deg,
$none,
$none 2.2rem,
$blk3 2.2rem,
$blk3 2.55rem
),
//
repeating-linear-gradient(
-18deg,
$none,
$none 0.6rem,
$blk3 0.6rem,
$blk3 0.8rem
);
border-radius: 0.15rem 0.15rem 0.3rem 0.3rem;
border: 0.35rem solid $blk3;
filter: blur(0.025rem);
}
&:after {
width: 1.1rem;
height: 0.3rem;
background: $blk3;
transform: translate3d(0.25rem, 2.6rem, 0);
border-radius: 0.5rem / 0.15rem;
}
& > i:nth-of-type(1) {
width: 1.1rem;
height: 2.7rem;
background: linear-gradient(to right, lighten($orange, 5%), $legsd, $legsd);
transform: translate3d(0.25rem, 0.15rem, 0);
border-radius: 0.5rem / 0.15rem;
box-shadow: inset 0 -0.25rem 0.2rem $blk3;
}
& > i:nth-of-type(2) {
transform: translate3d(-38.5rem, 25.75rem, 0) rotate(-36deg) skew(-7deg);
filter: blur(0.1rem);
&:after {
width: 4rem;
height: 1rem;
transform: translate3d(-0.3rem, 0.9rem, 0) rotate(41deg);
border-radius: 50%;
box-shadow: 0 0.1rem 0 $bodyl2,
//
-0.4rem 0.1rem 0 $bodyl2,
//
0.4rem 0.1rem 0 $bodyl2,
//
0 0.2rem 0 0.1rem $shadow,
//
-0.4rem 0.2rem 0 0.1rem $shadow,
//
0.4rem 0.2rem 0 0.1rem $shadow; //
}
& > * {
width: 3.2rem;
height: 3.1rem;
overflow: hidden;
&:before {
width: 2.5rem;
height: 6rem;
transform: translate3d(0, -1.6rem, 0) rotate(-45deg);
background: radial-gradient(
circle at 139% 67%,
darken($bodyl2, 5%),
darken($bodyl2, 5%) 30%,
$bodyd 50%,
$legsl
);
border-radius: 0 0 50% 50%;
}
&:after {
width: 1.5rem;
height: 0.5rem;
transform: translate3d(1.9rem, 0.5rem, 0) rotate(44deg);
border-radius: 50%;
box-shadow: 0 0.2rem 0 0.1rem $shadow,
//
-0.4rem 0.2rem 0 0.1rem $shadow,
//
0.2rem 0.2rem 0 0.1rem $shadow,
//
;
}
}
}
}
ctrl5 {
transform: translate3d(88.65rem, 53.8rem, 0);
width: 1.6rem;
height: 0.5rem;
background: $blk3;
border-radius: 50%;
box-shadow: 0 -0.2rem 0 0 darken($legsd, 2%);
&:before {
width: 15.8rem;
height: 1.2rem;
transform: translate3d(0.6rem, 1.9rem, 0) skewY(-3deg);
background: repeating-linear-gradient(
90deg,
$none,
$none 2.2rem,
$blk3 2.2rem,
$blk3 2.55rem
),
//
repeating-linear-gradient(
18deg,
$none,
$none 0.6rem,
$blk3 0.6rem,
$blk3 0.8rem
);
border-radius: 0.15rem 0.15rem 0.3rem 0.3rem;
border: 0.35rem solid $blk3;
filter: blur(0.025rem);
}
&:after {
width: 1.1rem;
height: 0.3rem;
background: $blk3;
transform: translate3d(0.25rem, 2.6rem, 0);
border-radius: 0.5rem / 0.15rem;
}
& > i:nth-of-type(1) {
width: 1.1rem;
height: 2.7rem;
background: linear-gradient(
to right,
$none,
rgba($legsd, 0.9),
rgba($legsd, 0.5),
$none
),
lighten($orange, 5%);
transform: translate3d(0.25rem, 0.15rem, 0);
border-radius: 0.5rem / 0.15rem;
box-shadow: inset 0 -0.25rem 0.2rem $blk3;
&:before {
width: 44rem;
height: 0.4rem;
background: linear-gradient(
89deg,
$blk3,
$blk3 25%,
rgba($light, 0.9) 26%,
rgba($light, 0.9) 30%,
$blk3 31%,
$blk3
),
$blk3;
transform: translate3d(12.5rem, 13.1rem, 0) rotate(33deg) skewX(-20deg);
border: 0.05rem solid $blk3;
}
&:after {
width: 44rem;
height: 0.4rem;
background: linear-gradient(
89deg,
$blk3,
$blk3 25%,
rgba($light, 0.9) 26%,
rgba($light, 0.9) 30%,
$blk3 31%,
$blk3
),
$blk3;
transform: translate3d(12.5rem, 13.7rem, 0) rotate(32deg) skewX(-20deg);
border: 0.05rem solid $blk3;
}
}
}
ctrl6 {
transform: translate3d(86rem, 52.5rem, 0);
width: 1.6rem;
height: 0.5rem;
background: $blk3;
border-radius: 50%;
box-shadow: 0 -0.2rem 0 0 darken($legsd, 2%);
&:before {
width: 15.8rem;
height: 1.2rem;
transform: translate3d(0.6rem, 1.9rem, 0) skewY(-3deg);
background: repeating-linear-gradient(
90deg,
$none,
$none 2.2rem,
$blk3 2.2rem,
$blk3 2.55rem
),
//
repeating-linear-gradient(
18deg,
$none,
$none 0.6rem,
$blk3 0.6rem,
$blk3 0.8rem
);
border-radius: 0.15rem 0.15rem 0.3rem 0.3rem;
border: 0.35rem solid $blk3;
filter: blur(0.025rem);
}
&:after {
width: 1.1rem;
height: 0.3rem;
background: $blk3;
transform: translate3d(0.25rem, 2.6rem, 0);
border-radius: 0.5rem / 0.15rem;
}
& > i:nth-of-type(1) {
width: 1.1rem;
height: 2.7rem;
background: linear-gradient(
to right,
$none,
rgba($legsd, 0.5),
rgba($legsd, 0.9),
$none
),
lighten($orange, 5%);
transform: translate3d(0.25rem, 0.15rem, 0);
border-radius: 0.5rem / 0.15rem;
box-shadow: inset 0 -0.25rem 0.2rem $blk3;
&:before {
width: 25rem;
height: 0.4rem;
background: linear-gradient(
90deg,
$blk3,
$blk3 48%,
rgba($light, 0.9) 49%,
rgba($light, 0.9) 55%,
$blk3 56%,
$blk3
),
$blk3;
transform: translate3d(-0.5rem, 14rem, 0) rotate(107deg);
}
&:after {
width: 25rem;
height: 0.4rem;
background: $blk3;
transform: translate3d(-0.3rem, 14rem, 0) rotate(108deg);
}
}
}
ctrl7 {
transform: translate3d(83rem, 51rem, 0);
width: 1.6rem;
height: 0.5rem;
background: $blk3;
border-radius: 50%;
box-shadow: 0 -0.2rem 0.2rem rgba($blk3, 0.5),
//
-0.25rem -0.2rem 0.2rem $blk3,
//
0 -0.2rem 0 0 lighten($orange, 5%);
&:before {
width: 14rem;
height: 1.6rem;
transform: translate3d(0.6rem, 1rem, 0) skewY(-12deg);
background: repeating-linear-gradient(
90deg,
$none,
$none 4.2rem,
$blk3 4.2rem,
$blk3 4.6rem
),
//
repeating-linear-gradient(
15deg,
$none,
$none 0.9em,
$blk3 0.9rem,
$blk3 1.2rem
);
border-radius: 0.15rem 0.15rem 0.3rem 0.3rem;
border: 0.35rem solid $blk3;
filter: blur(0.025rem);
}
&:after {
width: 1.1rem;
height: 0.3rem;
background: $blk3;
transform: translate3d(0.25rem, 2.6rem, 0);
border-radius: 0.5rem / 0.15rem;
}
& > i:nth-of-type(1) {
width: 1.1rem;
height: 2.7rem;
background: linear-gradient(
to right,
$none,
rgba($legsd, 0.9),
rgba($legsd, 0.6),
$none
),
lighten($orange, 5%);
transform: translate3d(0.25rem, 0.15rem, 0);
border-radius: 0.5rem / 0.15rem;
box-shadow: inset 0 -0.25rem 0.2rem $blk3;
&:before {
transform: translate3d(14.3rem, -0.6rem, 0) rotate(48deg);
width: 35rem;
height: 0.4rem;
background: linear-gradient(
90deg,
$blk3,
$blk3 33%,
rgba($light, 0.9) 35%,
rgba($light, 0.9) 39%,
$blk3 42%,
$blk3
),
$blk3;
transform-origin: 0 0;
border-top: 0.3rem solid $blk3;
}
&:after {
transform: translate3d(14.3rem, 0.4rem, 0) rotate(47deg);
width: 35rem;
height: 0.4rem;
background: linear-gradient(
90deg,
$blk3,
$blk3 33%,
rgba($light, 0.9) 35%,
rgba($light, 0.9) 39%,
$blk3 42%,
$blk3
),
$blk3;
transform-origin: 0 0;
border-top: 0.3rem solid $blk3;
}
}
}
ctrl8 {
transform: translate3d(79.5rem, 49.5rem, 0);
width: 1.6rem;
height: 0.5rem;
background: $blk3;
border-radius: 50%;
box-shadow: 0 -0.2rem 0.2rem rgba($blk3, 0.5),
//
-0.25rem -0.2rem 0.2rem $blk3,
//
0 -0.2rem 0 0 lighten($orange, 5%);
&:after {
width: 1.1rem;
height: 0.3rem;
background: $blk3;
transform: translate3d(0.25rem, 2.6rem, 0);
border-radius: 0.5rem / 0.15rem;
}
& > i:nth-of-type(1) {
width: 1.1rem;
height: 2.7rem;
background: linear-gradient(
to right,
$none,
rgba($legsd, 0.6) 15%,
rgba($legsd, 0.5) 40%,
rgba($legsd, 0.9),
rgba($legsd, 0.9)
),
lighten($orange, 5%);
transform: translate3d(0.25rem, 0.15rem, 0);
border-radius: 0.5rem / 0.15rem;
box-shadow: inset 0 -0.25rem 0.2rem $blk3;
&:before {
width: 2.8rem;
height: 0.7rem;
transform: translate3d(0.5rem, -0.4rem, 0) skewY(-60deg) skewX(28deg);
border-radius: 0.3rem;
background: linear-gradient(
120deg,
$blk3,
$blk3 35%,
rgba($light, 0.9) 59%,
$blk3 59%,
$blk3 65%,
rgba($light, 0.9) 65%,
$blk3,
$blk3
),
$blk3;
box-shadow: 0 0.2rem 0.2rem rgba($blk3, 0.9);
border-bottom: 0.4rem solid $blk3;
}
&:after {
width: 2.7rem;
height: 0.7rem;
transform: translate3d(0.5rem, 0.6rem, 0) skewY(-60deg) skewX(28deg);
border-radius: 0.3rem;
background: linear-gradient(
120deg,
$blk3,
$blk3 50%,
rgba($light, 0.9) 50%,
rgba($light, 0.9) 65%,
$blk3,
$blk3
),
$blk3;
border-bottom: 0.4rem solid $blk3;
}
}
& > i:nth-of-type(2) {
transform: translate3d(3.9rem, -2.5rem, 0) rotate(83deg);
&:before {
width: 30rem;
height: 0.4rem;
background: linear-gradient(
90deg,
$blk3,
$blk3 33%,
rgba($light, 0.9) 35%,
rgba($light, 0.9) 39%,
$blk3 42%,
$blk3
),
$blk3;
transform-origin: 0 0;
border-bottom: 0.3rem solid $blk3;
border-radius: 0.2rem;
}
&:after {
transform: translate3d(1.2rem, 0.4rem, 0) rotate(0deg);
width: 30rem;
height: 0.4rem;
background: linear-gradient(
90deg,
$blk3,
$blk3 20%,
rgba($light, 0.9) 25%,
rgba($light, 0.9) 29%,
$blk3 32%,
$blk3
),
$blk3;
transform-origin: 0 0;
border-top: 0.3rem solid $blk3;
border-radius: 0.2rem;
}
}
}
hilites {
transform: translate3d(70rem, 54.5rem, 0) rotate(-2.5deg) skewX(35deg);
width: 4rem;
height: 0.15rem;
background: lighten($light2, 10);
box-shadow: 0.25rem 0 0.25rem $light2;
border-radius: 0.1rem;
&:before {
transform: translate3d(0.25rem, 1.3rem, 0);
width: 3rem;
height: 0.15rem;
background: lighten($light2, 10);
box-shadow: 0.25rem 0 0.25rem $light2;
border-radius: 0.1rem;
}
&:after {
transform: translate3d(0.2rem, 0.55rem, 0) rotate(-11deg) skewX(-35deg);
width: 3.5rem;
height: 0.15rem;
background: lighten($light2, 10);
box-shadow: 0.25rem 0 0.25rem $light2;
border-radius: 0.1rem;
}
i:nth-of-type(1) {
transform: translate3d(22rem, 0.95rem, 0) rotate(-0.5deg) skewX(-40deg);
width: 3rem;
height: 0.15rem;
background: linear-gradient(
-45deg,
lighten($light2, 20) 10%,
darken($light2, 10)
);
box-shadow: 0.25rem 0 0.25rem $light2, -0.25rem 0 0.25rem $light2;
border-radius: 0.1rem;
&:before {
transform: translate3d(-0.5rem, 0.9rem, 0);
width: 4.5rem;
height: 0.15rem;
background: linear-gradient(
-45deg,
lighten($light2, 10) 10%,
darken($light2, 10)
);
box-shadow: 0.25rem 0 0.25rem $light2, -0.25rem 0 0.25rem $light2;
border-radius: 0.1rem;
}
}
i:nth-of-type(2) {
transform: translate3d(27.5rem, -2.65rem, 0) rotate(-8.5deg) skewX(-40deg);
width: 2rem;
height: 0.15rem;
background: darken($light2, 5);
box-shadow: 0.25rem 0 0.25rem $light2, -0.25rem 0 0.25rem $light2;
border-radius: 0.1rem;
&:before {
transform: translate3d(2.1rem, 0.6rem, 0) skewY(51deg);
width: 1rem;
height: 0.2rem;
background: darken($light2, 5);
box-shadow: 0.25rem 0 0.25rem $light2, 0.25rem 0 0.25rem $light2,
//
-0.1rem 1.1rem 0 $light2,
-0.1rem 1.1rem 0.25rem $light2, -0.1rem 1.1rem 0.25rem $light2;
border-radius: 0.1rem;
}
&:after {
transform: translate3d(1.1rem, 1rem, 0);
width: 0.5rem;
height: 0.2rem;
background: darken($light, 5);
box-shadow: 0.25rem 0 0.25rem $light, 0.25rem 0 0.25rem $light;
border-radius: 0.1rem;
}
}
}
// @import "thrust";
thrust {
transform: translate3d(101rem, 19.5rem, 0) rotate(-9deg) skewX(22deg);
width: 13rem;
height: 20rem;
border-radius: 7rem 6rem / 5rem 4.5rem 0 0;
background: linear-gradient(
90deg,
$bodyd,
$bodyd 55%,
darken($bodyl, 25%),
$bodyl
);
&:before {
transform: translate3d(0, 0, 0) rotate(0deg) skewX(0deg);
width: 13rem;
height: 14rem;
border-radius: 7rem 6rem 13rem 0 / 5rem 4rem 10rem 0;
background: radial-gradient(lighten($bodyd, 3%), $bodyd, $bodyd);
}
i:nth-of-type(2) {
transform: translate3d(7.75rem, 4.9rem, 0) rotate(6deg) skewX(325deg)
skewY(4deg);
width: 3rem;
height: 3.2rem;
border-radius: 50%;
background: linear-gradient(
235deg,
$metall,
$metall 10%,
$shadow 30%,
$shadow
);
box-shadow: 0.75rem 0.75rem 1rem -1rem rgba($blk, 0.5);
&:before {
transform: translate3d(-0.35rem, -0.35rem, 0) rotate(-10deg) skewX(0deg);
width: 3rem;
height: 3.2rem;
border-radius: 50%;
background: conic-gradient(
from -0.1turn,
$none,
$none,
rgba($blk, 0.3),
$none
),
//
linear-gradient(
235deg,
darken($metald, 2%),
darken($metald, 2%) 30%,
$metald 33%,
$metald
); //
}
&:after {
transform: translate3d(-5.6rem, -1.7rem, 0) rotate(45deg) skewX(0deg);
width: 7.5rem;
height: 3.5rem;
border-radius: 2rem 0.25rem 7rem 0 / 2rem 0.35rem 2.75rem 0;
box-shadow: inset 0.1rem 0.1rem 0.1rem rgba($metall, 0.3),
//
inset 0.5rem 0.5rem 0.5rem $shadow,
//
inset 0.5rem 1rem 0.1rem lighten($shadow, 1%),
//
inset 0.6rem 0.9rem 0 lighten($shadow, 10%),
//
-0.2rem -0.2rem 0.1rem rgba($metald, 0.5),
//
-0.5rem -0.2rem 0.1rem lighten($metall, 5%),
//
-0.75rem -0.15rem 0.1rem $metall,
//
-0.1rem -0.15rem 0.1rem $metall,
//
-0.76rem -0.3rem 0.3rem $shadow;
}
}
i:nth-of-type(1) {
transform: translate3d(6.5rem, 1.75rem, 0) rotate(6deg) skewX(325deg)
skewY(4deg);
width: 3rem;
height: 3.2rem;
border-radius: 50%;
background: linear-gradient(
235deg,
$metall,
$metall 10%,
$shadow 30%,
$shadow
);
box-shadow: 0.75rem 0.75rem 1rem -1rem rgba($blk, 0.6);
&:before {
transform: translate3d(-0.35rem, -0.35rem, 0) rotate(-10deg) skewX(0deg);
width: 3rem;
height: 3.2rem;
border-radius: 50%;
background: conic-gradient(
from -0.1turn,
$none,
$none,
rgba($blk, 0.3),
$none
),
//
linear-gradient(
235deg,
darken($metald, 2%),
darken($metald, 2%) 30%,
$metald 33%,
$metald
); //
}
&:after {
transform: translate3d(-4.2rem, -0.9rem, 0) rotate(45deg) skewX(0deg);
width: 6rem;
height: 4rem;
border-radius: 4rem 0.25rem 4rem 0 / 4rem 0.35rem 2.75rem 0;
box-shadow: inset 0.1rem 0.1rem 0.1rem rgba($metall, 0.3),
//
inset 0.5rem 0.5rem 0.5rem $shadow,
//
inset 0.5rem 1rem 0.1rem lighten($shadow, 1%),
//
-0.2rem -0.2rem 0.1rem rgba($metald, 0.5),
//
-0.5rem -0.2rem 0.1rem lighten($metall, 5%),
//
-0.5rem -0.2rem 0.1rem $metall,
//
-0.1rem -0.2rem 0.1rem $metall;
}
}
i:nth-of-type(3) {
transform: translate3d(-40rem, 17rem, 0) skewX(-26deg);
width: 6rem;
height: 40rem;
background: linear-gradient(rgba($sky2, 0.7), rgba($sky2, 0.3));
border-radius: 100%;
filter: blur(0.5rem);
&:before {
transform: translate3d(-3.25rem, 7rem, 0) skewX(-8deg) skewY(80deg);
width: 3.5rem;
height: 35rem;
background: linear-gradient(rgba($sky2, 0.9), rgba($blk2, 0.1));
border-radius: 0.5rem;
}
&:after {
transform: translate3d(3rem, 9rem, 0) skewX(3deg) skewY(-74deg);
width: 5rem;
height: 40rem;
background: linear-gradient(rgba($blk2, 0.4), rgba($sky2, 0.5), $none);
border-radius: 0.5rem;
}
}
i:nth-of-type(4) {
transform: translate3d(-49rem, 17rem, 0) skewX(-26deg);
width: 6rem;
height: 40rem;
background: linear-gradient(rgba($sky2, 0.7), rgba($sky2, 0.3));
border-radius: 100%;
filter: blur(0.5rem);
&:before {
transform: translate3d(-3.25rem, 7rem, 0) skewX(-8deg) skewY(80deg);
width: 3.5rem;
height: 35rem;
background: linear-gradient(rgba($sky2, 0.9), rgba($blk2, 0.1));
border-radius: 0.5rem;
}
&:after {
transform: translate3d(3rem, 9rem, 0) skewX(3deg) skewY(-74deg);
width: 5rem;
height: 40rem;
background: linear-gradient(rgba($blk2, 0.4), rgba($sky2, 0.5), $none);
border-radius: 0.5rem;
}
}
}
upthrust {
transform: translate3d(111.3rem, 34.2rem, 0) skewY(-37deg) skewX(27deg);
width: 11rem;
height: 8rem;
background: $bodyd;
box-shadow: -1rem 0 0 rgba($bodyd, 0.5);
&:before {
transform: translate3d(1rem, -4.5rem, 0) skewX(-20deg);
width: 21rem;
height: 7.2rem;
background: linear-gradient(to right, $bodyd, lighten($bodyd, 2%));
border-radius: 0 0.2rem 0.2rem 3rem;
}
&:after {
transform: translate3d(12.6rem, -9.7rem, 0) skewX(-6deg);
width: 2rem;
height: 17rem;
background: $bodyd;
border-radius: 0 0.2rem 0 2rem / 0 0.2rem 0 4rem;
}
i:nth-of-type(1) {
transform: translate3d(14.45rem, -3.2rem, 0) skewX(-20deg) skewY(-20deg);
width: 7rem;
height: 7.2rem;
background: linear-gradient(darken($legsl, 2), darken($legsl, 4));
border-radius: 0.2rem;
&:before {
transform: translate3d(-6.3rem, 0.2rem, 0) skewX(5deg) skewY(20deg);
width: 10rem;
height: 7.2rem;
background: linear-gradient(to right, $bodyd, lighten($bodyd, 1%));
border-radius: 0 0.2rem 0.2rem 0;
}
&:after {
transform: translate3d(1.5rem, 2.8rem, 0) skewX(5deg) skewY(-32deg);
width: 2.5rem;
height: 7.2rem;
background: darken($legsl, 2);
border-radius: 0.2rem;
}
}
i:nth-of-type(2) {
transform: translate3d(1rem, -4.5rem, 0) skewX(-20deg);
width: 21rem;
height: 7.2rem;
&:before {
transform: translate3d(13.4rem, -5.2rem, 0) skewX(14deg);
width: 2rem;
height: 27rem;
background: linear-gradient(darken($bodyl, 10%), darken($bodyd, 10%));
border-radius: 0 1rem 1rem 0 / 0 10rem 10rem 0;
box-shadow: inset 0 -9rem 0 rgba($bodyl, 0.2);
}
&:after {
transform: translate3d(9.9rem, -5.2rem, 0) skewX(8deg);
width: 2rem;
height: 14rem;
background: $bodyd;
border-radius: 0.2rem 0.2rem 0.2rem 2rem / 0.2rem 0.2rem 0.2rem 10rem;
box-shadow: 0.5rem 5rem 0 darken($legsl, 3);
}
}
i:nth-of-type(3) {
transform: translate3d(11.3rem, 4.3rem, 0) skewX(-6deg);
width: 2rem;
height: 13rem;
background: $bodyd;
border-radius: 0.2rem 0.2rem 1rem 0.2rem;
&:before {
transform: translate3d(-1.2rem, 0, 0) skewX(3deg);
width: 2rem;
height: 13rem;
border-radius: 2rem 0 0 1rem / 6rem 0 0 6rem;
background: $bodyd;
}
&:after {
transform: translate3d(0.5rem, 2rem, 0) skewX(-1deg);
width: 0.8rem;
height: 9rem;
border-radius: 50%;
background: linear-gradient($light, $light, $orange);
box-shadow: 0 0 0.2rem $orange, inset 0 0 0.2rem $orange;
}
}
i:nth-of-type(4) {
transform: translate3d(11.9rem, 6rem, 0) skewX(-16deg);
width: 0.5rem;
height: 4rem;
border-radius: 50% 0 100% 0;
background: lighten($light, 10%);
box-shadow: -0.1rem 0 0.2rem $orange, inset 0 0 0.2rem $orange;
&:before {
transform: translate3d(0.2rem, 3rem, 0) skewX(13deg);
width: 0.5rem;
height: 5rem;
border-radius: 100% 0 100% 0;
background: lighten($light, 10%);
box-shadow: -0.1rem 0 0.2rem $orange, inset 0 0 0.2rem $orange;
}
&:after {
transform: translate3d(-0.75rem, 7rem, 0) skewX(-2deg) skewY(78deg);
width: 2rem;
height: 55rem;
background: linear-gradient(rgba($sky4, 0.5), $none);
border-radius: 0.5rem;
}
}
i:nth-of-type(5) {
transform: translate3d(2rem, 8rem, 0) skewX(-16deg) skewY(0deg);
width: 5rem;
height: 60rem;
background: linear-gradient(rgba(#fff, 0.5), rgba(#fff, 0.3));
border-radius: 100%;
filter: blur(0.5rem);
&:before {
transform: translate3d(-2.25rem, 7rem, 0) skewX(-5deg) skewY(79deg);
width: 3.5rem;
height: 45rem;
background: linear-gradient(rgba(#fff, 0.9), rgba(#fff, 0.3));
border-radius: 0.5rem;
box-shadow: -2rem 0 0 rgba(#000, 0.5);
}
&:after {
transform: translate3d(3rem, 2rem, 0) skewX(3deg) skewY(81deg);
width: 2rem;
height: 60rem;
background: linear-gradient(rgba(#fff, 0.7), rgba(#fff, 0.3));
border-radius: 0.5rem;
}
}
//
i:nth-of-type(6) {
transform: translate3d(8rem, -9.5rem, 0) skewX(-4.5deg);
width: 2rem;
height: 27rem;
background: darken($bodyl, 30);
border-radius: 0 1rem 2rem 0 / 0 10rem 17rem 0;
box-shadow: inset 0 -9.5rem 0 darken($legsl, 2),
//
inset -0.5rem 1rem 0 rgba($legsl, 0.3);
&:before {
transform: translate3d(-1.7rem, 15rem, 0) skewX(3deg);
height: 12rem;
width: 2.8rem;
background: $blk2;
border-radius: 1rem 1rem 1.4rem 1.4rem / 5rem;
}
}
i:nth-of-type(7) {
transform: translate3d(6.9rem, 5rem, 0) skewX(-3deg);
width: 0.9rem;
height: 10rem;
border-radius: 50%;
background: $light;
box-shadow: 0 0 0.2rem $orange, inset 0 0 0.2rem $orange,
//
0.2rem 0 0.5rem -0.1rem $orange,
//
0.3rem 0 0.3rem -0.1rem $orange,
//
;
&:before {
transform: translate3d(-0.2rem, -0.5rem, 0);
width: 0.9rem;
height: 4rem;
border-radius: 100% 0 100% 0;
background: lighten($light, 10%);
box-shadow: -0.1rem 0 0.2rem $orange, inset 0.2rem 0 0.2rem $orange,
//
-0.3rem 3rem 0 $blk2;
}
&:after {
transform: translate3d(-8.5rem, 7rem, 0) skewX(-17deg) skewY(76deg);
width: 2rem;
height: 50rem;
background: linear-gradient(rgba($sky4, 0.5), $none);
border-radius: 0.5rem;
}
}
i:nth-of-type(8) {
transform: translate3d(-7.5rem, 11rem, 0) skewX(-23deg);
width: 5rem;
height: 60rem;
background: linear-gradient(rgba(#fff, 0.7), rgba(#fff, 0.3));
border-radius: 100%;
filter: blur(0.5rem);
box-shadow: -2rem 0 0 rgba(#000, 0.5);
&:before {
transform: translate3d(-2.25rem, 7rem, 0) skewX(-5deg) skewY(79deg);
width: 3.5rem;
height: 45rem;
background: linear-gradient(rgba($sky2, 0.9), rgba($sky2, 0.3));
border-radius: 0.5rem;
}
&:after {
transform: translate3d(3rem, 2rem, 0) skewX(3deg) skewY(81deg);
width: 2rem;
height: 60rem;
background: linear-gradient(rgba($sky2, 0.7), rgba($sky2, 0.3));
border-radius: 0.5rem;
}
}
}
dust {
width: 100rem;
height: 80rem;
transform: translate3d(90rem, 50rem, 0);
border-radius: 50%;
background: radial-gradient($yellow, $none, $none);
opacity: 0.15;
&:before {
width: 100rem;
height: 80rem;
transform: translate3d(-120rem, 0, 0);
border-radius: 50%;
background: radial-gradient($yellow, $none, $none);
}
&:after {
width: 100rem;
height: 80rem;
transform: translate3d(-70rem, 0, 0);
border-radius: 50%;
background: radial-gradient($yellow, $none, $none);
}
}
shadow {
opacity: 0.4;
&:before,
i,
i:before,
i:after,
&:after {
transform: translate3d(39rem, 91rem, 0) rotate(-6deg) skewX(74deg);
background: rgba($blk, 0.8);
width: 5rem;
height: 2rem;
border-radius: 50%;
box-shadow: 0 0 2rem $blk, 0 0 2rem $blk, -1rem 0 2rem $blk,
//
-4rem 0 2rem $blk;
}
i {
transform: translate3d(51rem, 94rem, 0) rotate(-10deg) skewX(74deg);
&:before {
transform: translate3d(-9rem, -10rem, 0);
}
&:after {
transform: translate3d(-26rem, -1rem, 0);
}
}
&:after {
transform: translate3d(89rem, 96rem, 0) rotate(174deg) skewX(74deg);
}
}
$bitscolour: $blk2, $litter1;
@function bits($a, $b) {
$value: "#{random(60)}rem #{random(50)}rem "+$b+" "+"#{nth($bitscolour, random(length($bitscolour)))}";
@for $i from 2 through $a {
$value: "#{$value} , #{random(60)}rem #{random(50)}rem "+$b+" "+"#{nth($bitscolour, random(length($bitscolour)))}";
}
@return unquote($value);
}
$bits: bits(50, 0);
bits {
filter: blur(0.1rem);
opacity: 0.9;
&,
&:before,
&:after,
i,
i:before,
i:after {
transform: translate3d(-5rem, 60rem, 0) skewY(2deg);
width: 1rem;
height: 0.25rem;
background: $blk2;
border-radius: 10% 50%;
box-shadow: $bits;
}
&:before,
i:before {
transform: translate3d(55rem, 1rem, 0) rotate(10deg);
}
&:after,
i:after {
transform: translate3d(110rem, -1rem, 0) rotate(-15deg);
border-radius: 50% 0;
}
i,
i:before,
i:after {
width: 1rem;
height: 0.5rem;
}
i {
transform: translate3d(177rem, 63rem, 0) scale(-1);
}
}
//sig
sig {
&,
* {
height: 9.25em;
overflow: hidden;
border-radius: 0.5em;
}
font-size: 0.5rem;
color: $blk;
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: currentColor;
transform: translate3d(-2.5em, 0, 0) rotate(-45deg);
box-shadow: -3em 3em 0 0 currentColor;
border-radius: 0.5em 2em 0.5em 2em;
}
* {
width: 5em;
transform: translate3d(3.75em, 0, 0) scaleY(0.95);
display: block !important;
&:before {
transform: translate3d(-3em, -2em, 0) rotate(-45deg);
box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor;
border-radius: 0.5em;
}
}
}
// For Zoe
// Pure CSS Sci-fi Art:
// A Vacuum From Space
// No images, just HTML & CSS
Also see: Tab Triggers