<pic>
<face>
<i></i>
</face>
<eyeleft>
<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>
</eyeleft>
<eyeright>
<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>
</eyeright>
<shadows>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</shadows>
<lefteyebrow>
<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>
</lefteyebrow>
<lefteyebrow>
<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>
</lefteyebrow>
<righteyebrow>
<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>
</righteyebrow>
<righteyebrow>
<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>
</righteyebrow>
<cheekbones>
<i></i>
<i></i>
<i></i>
<i></i>
</cheekbones>
<mouth>
<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>
<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>
</mouth>
<moreface>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</moreface>
<nose>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</nose>
<freckles>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</freckles>
<facehair>
<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>
</facehair>
<hairbase>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</hairbase>
<hair>
<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>
</hair>
<hair>
<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>
</hair>
<picframe></picframe>
<sig><x></x></sig>
</pic>$body: #190d23;
$none: rgba(#000,0);
$b1: #010000;
$d1: #51201D;
$d2: #5c4442;
body {
background: $body;
text-align: center;
}
img {
height: 96em;
transform-style: preserve-3d;
perspective: 5000px;
perspective-origin: 50% 50%;
}
pic *, pic *:before, pic *:after {
display: block;
box-sizing: border-box;
border-radius: 50%;
}
pic *, pic i, pic *:after, pic *:before, pic:after, pic:before {
content: '';
position: absolute;
left: 0;
top: 0;
}
pic {
display: inline-block;
height: 96em;
width: 73em;
position: relative;
overflow: hidden;
border-radius: 5em;
background: #0C0C0A;
&:after {
box-shadow: inset 0 0 5em $b1;
width: 100%;
height: 100%;
border-radius: 5em;
}
}
@media (orientation:landscape) {
body {
font-size: 1vh;
}
@function multiple-box-shadow ($a, $b, $c) {
$value: '#{random(73)}em #{random(96)}em '+ $b + ' ' + $c;
@for $i from 2 through $a {
$value: '#{$value} , #{random(73)}em #{random(96)}em '+ $b + ' ' + $c;
}
@return unquote($value);
}
$dots: multiple-box-shadow(500, .25em, #A22429);
$moles: multiple-box-shadow(100, .25em, #A22429);
$noise: multiple-box-shadow(300, .25em, #f8e9eb);
$texture: multiple-box-shadow(500, .25em, rgba( #a07100,.025));
$hair: multiple-box-shadow(300, 0, #f8e9eb);
pic:after {
width: .5em;
height: .4em;
box-shadow: $dots;
opacity: .05;
}
moreface:after {
width: .4em;
height: .3em;
box-shadow: $moles;
opacity: .1;
}
hair:after {
width: .4em;
height: .3em;
box-shadow: $noise;
opacity: .1;
}
nose:after {
width: .1em;
height: 1em;
border-radius: 20%;
box-shadow: $hair;
opacity: .2;
transform: translate3d(0, 50em,0) rotate(-60deg);
}
facehair:after {
width: 5em;
height: 4em;
box-shadow: $texture;
}
}
@media (orientation:portrait) {
body {
font-size: 1vw;
}
hair:nth-of-type(2), lefteyebrow:nth-of-type(2), righteyebrow:nth-of-type(2) {
display: none;
}
}
eyeleft {
filter: contrast(1.3);
overflow: hidden;
width: 30em;
height: 30em;
transform: translate3d(-10.5em,31.5em,0) rotate(-40deg);
border-radius: 5em;
background: linear-gradient(to right bottom, #A06B40,#AC7A51 40%,#E3B79A,#F0C8B1 80%,#E2B087);
box-shadow: inset 0 -1em 1em -1em #5c4442;
//dark
& > i:nth-of-type(1) {
width: 21em;
height: 15em;
transform: translate3d(10em,18em,0) rotate(40deg);
background: radial-gradient( #D1BEB1, rgba(#A98E80, .2),#C0865E);
box-shadow: 0 -.2em .2em #C98152;
&:before {
width: 10em;
height: 10em;
background: #E8C59B;
transform: translate3d(-2em,9em,0) rotate(20deg);
filter: blur(1em);
border-radius: 0;
}
//eye shape top
& > i:nth-of-type(3) {
width: 18em;
height: 10em;
transform: translate3d(2em,2em,0) rotate(-20deg);
overflow: hidden;
box-shadow: .2em -.3em .3em 0 #c78d65;
//eye shape bottom
& > i:nth-of-type(1) {
width: 28em;
height: 20em;
transform: translate3d(-5em, -14.2em, 0);
overflow: hidden;
border-radius: 0 0 40% 60%;
box-shadow: 0 0 .5em .2em #A06C55;
&:after {
width: 28em;
height: 10em;
transform: translate3d(0,14em,0) rotate(30deg);
box-shadow: inset -3em 0 1em rgba($d2,.6), inset -5em -1em 1em rgba($d1,.3), 0 0 .5em .2em #522E25, 0 0 0 10em #C08666;
}
//white
& > i:nth-of-type(1) {
background: radial-gradient(#e8e3de, #A98E80);
width: 30em;
height: 30em;
transform: translate3d(-1em, 1.5em, 0) rotate(20deg);
//back
&:before {
background: radial-gradient( #000 20%, #2b110f 25%, #9ba9b1 40%, #464043 50%);
width: 9.75em;
height: 9.75em;
transform: translate3d(10.25em,10.25em,0);
box-shadow: 0 0 1em #464043;
}
//shine
&:after {
background: radial-gradient( #fff,#fff 15%,#464043 20%, rgba(#464043,.5) 40%,$none,$none);
width: 2.5em;
height: 2em;
border-radius: .25em;
transform: translate3d(13.75em,13.75em,0);
}
& i, & i:before, & i:after {
border-radius: .75em;
transform-origin: 0 0;
width: 2.4em;
height: 1.25em;
opacity: .9;
}
//iris
& i {
&:nth-of-type(1) {
transform: translate3d(17em,15em,0);
background: #838580;
box-shadow: -6em 0 0 #7D7D7C;
&:before {
transform: translate3d(0,.33em,0) rotate(9deg);
background: #A09D9C;
box-shadow: -6em 0 0 #838580;
}
&:after {
transform: translate3d(0,.66em,0) rotate(18deg);
background: #93938C;
box-shadow: -6em 0 0 #777776;
}
}
&:nth-of-type(2) {
transform: translate3d(17em,15.5em,0) rotate(20deg);
background: #96938C;
box-shadow: -6em 0 0 #767B7C;
&:before {
transform: translate3d(0,.33em,0) rotate(9deg);
background: #8F8C83;
box-shadow: -6em 0 0 #7C7A7B;
}
&:after {
transform: translate3d(0,.66em,0) rotate(18deg);
background: #A09F9A;
box-shadow: -6em 0 0 #777979;
}
}
&:nth-of-type(3) {
transform: translate3d(16.5em,16.5em,0) rotate(50deg);
background: #7A716B;
box-shadow: -6em 0 0 #6F6763;
&:before {
transform: translate3d(0,.33em,0) rotate(9deg);
background: #7D7A74;
box-shadow: -6em 0 0 #655B55;
}
&:after {
transform: translate3d(0,.66em,0) rotate(18deg);
background: #8F8D8A;
box-shadow: -6em 0 0 #766E6F;
}
}
&:nth-of-type(4) {
transform: translate3d(16em,17em,0) rotate(80deg);
background: #7A7577;
box-shadow: -6em 0 0 #5C4C4F;
&:before {
transform: translate3d(0,.33em,0) rotate(9deg);
background: #888380;
box-shadow: -6em 0 0 #6B6359;
}
&:after {
transform: translate3d(0,.66em,0) rotate(18deg);
background: #817F81;
box-shadow: -6em 0 0 #443C39;
}
}
&:nth-of-type(5) {
transform: translate3d(15.5em,17.2em,0) rotate(110deg);
background: #807C74;
box-shadow: -6em 0 0 #5E5752;
&:before {
transform: translate3d(0,.33em,0) rotate(9deg);
background: #7B746D;
box-shadow: -6em 0 0 #71716E;
}
&:after {
transform: translate3d(0,.66em,0) rotate(18deg);
background: #85867D;
box-shadow: -6em 0 0 #9B999A;
}
}
&:nth-of-type(6) {
transform: translate3d(14.2em,16.5em,0) rotate(140deg);
background: #808483;
box-shadow: -6em 0 0 #88857F;
&:before {
transform: translate3d(0,.33em,0) rotate(9deg);
background: #7B7B80;
box-shadow: -6em 0 0 #837F7C;
}
&:after {
transform: translate3d(0,.66em,0) rotate(18deg);
background: #868781;
box-shadow: -6em 0 0 #9E9E96;
}
}
&:nth-of-type(7) {
transform: translate3d(13.75em,16.5em,0) rotate(160deg);
background: #9B988F;
box-shadow: -6em 0 0 #76797A;
&:before {
transform: translate3d(0,.33em,0) rotate(9deg);
background: #797D7C;
box-shadow: -6em 0 0 #91968C;
}
&:after {
transform: translate3d(0,.66em,0) rotate(18deg);
background: #A6A19B;
box-shadow: -6em 0 0 #7C7E78;
}
}
}
}
& > i:nth-of-type(2) {
background: radial-gradient( $none 20%, rgba(#000,.5) 22%, rgba( #afbfff,.2), rgba(#000,.3), #464043 );
width: 9.75em;
height: 9.75em;
transform: translate3d(9.25em,12em,0);
filter: contrast(2);
&:before {
width: 20em;
height: 10em;
transform: translate3d(-5em,2em,0);
box-shadow: inset 0 0 3em #262224, inset 0 2em 3em rgba(#262224,.5);
}
&:after {
width: .5em;
height: .15em;
transform: translate3d(4.75em, 2.3em, 0);
background: #fff;
filter: blur(.1em);
}
}
& > i:nth-of-type(3) {
transform: translate3d(0em,10em,0) rotate(4deg);
box-shadow: inset 0 -.5em 0 #4F4145;
width: 28em;
height: 10em;
border-radius: 0 0 40% 60%;
&:after {
width: .5em;
height: .15em;
transform: translate3d(13.8em, 9.5em, 0);
background: #fff;
filter: blur(.1em);
}
}
}
}
//eyelid
& > i:nth-of-type(1) {
width: 10em;
height: 10em;
box-shadow: 0 -1em 0 0 #E1CACB;
transform: translate3d(5em, 1.75em, 0) rotate(-20deg);
&:after {
width: 18em;
height: 4em;
background: linear-gradient(#702D20, $none);
transform: translate3d(-5em, 3em, 0) rotate(5deg);
border-radius: 0 0 50% 50%;
box-shadow: 0 .1em .5em #BD7F62, 0 .1em .5em #BD7F62, inset 0 0 .5em #BD7F62;
}
&:before {
width: 7em;
height: 4em;
background: linear-gradient( #E1CACB, $none);
transform: translate3d(2em, 6.5em, 0);
-webkit-mask-image: radial-gradient(circle at top, #000, $none);
}
}
& > i:nth-of-type(2) {
width: 14em;
height: 6em;
background: linear-gradient( #4C2922,#4C2922, $none, $none);
transform: translate3d(1em, 2.5em, 0) rotate(-25deg);
box-shadow: -1em -1em 1em -1em #4C2922;
}
//eye lashes
& > i:nth-of-type(5) {
width: 2em;
height: 1.4em;
box-shadow: -.1em .1em 0 0 #4C2922;
border-radius: 0 0 0 50%;
transform: translate3d(7em, .8em, 0) skewX(45deg);
&:before {
width: 2em;
height: 1.2em;
box-shadow: -.1em .1em 0 0 #4C2922;
border-radius: 0 0 0 50%;
transform: translate3d(-1.2em, .5em, 0);
}
&:after {
width: 2em;
height: 1.5em;
box-shadow: -.1em .1em 0 0 #4C2922;
border-radius: 50% 0 0 50%;
transform: translate3d(-.75em, .2em, 0);
}
}
& > i:nth-of-type(6) {
width: 1.5em;
height: 1em;
box-shadow: -.1em .1em 0 0 #4C2922;
border-radius: 0 0 0 50%;
transform: translate3d(5.4em, 2em, 0) skewX(50deg);
&:before {
width: 1.5em;
height: .75em;
box-shadow: -.1em .1em 0 0 #4C2922;
border-radius: 0 0 0 50%;
transform: translate3d(-1.5em, 1em, 0);
}
&:after {
width: 1.5em;
height: 1.1em;
box-shadow: -.1em .1em 0 0 #4C2922;
border-radius: 50% 0 0 50%;
transform: translate3d(-.75em, .2em, 0);
}
}
& > i:nth-of-type(7) {
width: 1.5em;
height: 1em;
box-shadow: -.1em .1em 0 0 #4C2922;
border-radius: 0 0 0 50%;
transform: translate3d(4em, 3em, 0) skewX(50deg);
&:before {
width: 1.5em;
height: .75em;
box-shadow: -.1em .1em 0 0 #4C2922;
border-radius: 0 0 0 50%;
transform: translate3d(-.5em, .3em, 0);
}
&:after {
width: 1.5em;
height: .5em;
box-shadow: -.1em .1em 0 0 #4C2922;
border-radius: 50% 0 0 50%;
transform: translate3d(-.75em, .6em, 0);
}
}
& > i:nth-of-type(8) {
width: 1.5em;
height: 1em;
box-shadow: -.1em .1em 0 0 #4C2922;
border-radius: 0 0 0 50%;
transform: translate3d(2.5em, 4em, 0) skewX(55deg);
&:before {
width: 1.5em;
height: 1em;
box-shadow: -.1em .1em 0 0 #4C2922;
border-radius: 0 0 0 50%;
transform: translate3d(-.75em, .3em, 0);
}
&:after {
width: 1.5em;
height: 1em;
box-shadow: -.1em .1em 0 0 #4C2922;
border-radius: 50% 0 0 50%;
transform: translate3d(-1.5em, .6em, 0);
}
}
& > i:nth-of-type(9) {
width: 2em;
height: .5em;
box-shadow: -.1em .1em 0 0 #4C2922;
border-radius: 0 0 0 50%;
transform: translate3d(1em, 6em, 0) skewX(60deg);
&:before {
width: 2em;
height: .5em;
box-shadow: -.1em .1em 0 0 #763d2d;
border-radius: 0 0 0 50%;
transform: translate3d(-1em, .3em, 0);
}
&:after {
width: 2em;
height: 1em;
box-shadow: -.1em .1em 0 0 #4C2922;
border-radius: 50% 0 0 50%;
transform: translate3d(-1.5em, .1em, 0);
}
}
& > i:nth-of-type(10) {
width: 3em;
height: 1em;
box-shadow: 0 .1em 0 0 #6d462f;
transform: translate3d(-.75em, 6.5em, 0) skewY(-10deg);
&:before {
width: 3.2em;
height: 1em;
box-shadow: 0 .1em 0 0 #4C2922;
transform: translate3d(.2em, -.3em, 0) skewY(1deg);
}
&:after {
width: 3em;
height: 1em;
box-shadow: 0 .1em 0 0 #5f3621;
transform: translate3d(.5em, -.5em, 0) skewY(2deg);
}
}
& > i:nth-of-type(11) {
width: 3em;
height: 1em;
box-shadow: 0 .1em 0 0 #4C2922;
transform: translate3d(-1.5em, 7.5em, 0) skewY(-15deg);
&:before {
width: 4em;
height: 1em;
box-shadow: 0 .1em 0 0 #683c26;
transform: translate3d(.2em, -.4em, 0) skewY(1deg);
}
&:after {
width: 3.5em;
height: 1em;
box-shadow: 0 .1em 0 0 #643c28;
transform: translate3d(.5em, -.5em, 0) skewY(2deg);
}
}
& > i:nth-of-type(12) {
width: 3em;
height: 1em;
box-shadow: 0 .1em 0 0 #4C2922;
transform: translate3d(-1.5em, 8em, 0) skewY(-20deg);
&:before {
width: 3em;
height: 1em;
box-shadow: 0 .1em 0 0 #6b422b;
transform: translate3d(.2em, -.5em, 0) skewY(1deg);
}
&:after {
width: 3em;
height: 1em;
box-shadow: 0 .1em 0 0 #4c3522;
transform: translate3d(.5em, -.5em, 0) skewY(2deg);
}
}
& > i:nth-of-type(13) {
width: 1em;
height: 1.4em;
box-shadow: -.1em .1em 0 0 #7e3e25;
border-radius: 0 0 0 50%;
transform: translate3d(8em, .5em, 0) skewX(20deg);
&:before {
width: 1em;
height: 1.2em;
box-shadow: .1em .1em 0 0 #6d4432;
border-radius: 0 0 0 50%;
transform: translate3d(.75em, 0em, 0);
}
&:after {
width: 1em;
height: 1.5em;
box-shadow: .1em .1em 0 0 #743b2f;
border-radius: 50% 0 0 50%;
transform: translate3d(1.5em, 0em, 0);
}
}
& > i:nth-of-type(14) {
width: 1em;
height: 1.4em;
box-shadow: .1em .1em 0 0 #653a2a;
border-radius: 0 0 50% 0;
transform: translate3d(11em, 0em, 0) skewX(-20deg);
&:before {
width: 1em;
height: 1em;
box-shadow: .1em .1em 0 0 #74382c;
border-radius: 0 0 50% 0;
transform: translate3d(.75em, .4em, 0);
}
&:after {
width: 1em;
height: 1.5em;
box-shadow: .1em .1em 0 0 #6b412c;
border-radius: 0 50% 50% 0;
transform: translate3d(1.5em, .1em, 0);
}
}
& > i:nth-of-type(15) {
width: 1em;
height: 1.4em;
box-shadow: .1em .1em 0 0 #653a2a;
border-radius: 0 0 50% 0;
transform: translate3d(13em, .5em, 0) skewX(-30deg);
&:before {
width: 1em;
height: 1em;
box-shadow: .1em .1em 0 0 #74382c;
border-radius: 0 0 50% 0;
transform: translate3d(1em, .4em, 0);
}
&:after {
width: 1em;
height: .75em;
box-shadow: .1em .1em 0 0 #6b412c;
border-radius: 0 50% 50% 0;
transform: translate3d(1.75em, .75em, 0);
}
}
& > i:nth-of-type(16) {
width: 1em;
height: 1.4em;
box-shadow: -.1em .1em 0 0 #805242;
transform: translate3d(15em, 1.5em, 0) skewX(30deg);
&:before {
width: 1em;
height: 1em;
box-shadow: -.1em .1em 0 0 #905139;
transform: translate3d(1em, .4em, 0);
}
&:after {
width: 1em;
height: .75em;
box-shadow: -.1em .1em 0 0 #8e6b4e;
transform: translate3d(1.75em, .75em, 0);
}
}
& > i:nth-of-type(17) {
width: 1em;
height: 2em;
box-shadow: -.1em -.1em 0 0 #805242;
transform: translate3d(10em, 8.25em, 0) skewX(0deg);
&:before {
width: 1em;
height: 1.5em;
box-shadow: -.1em -.1em 0 0 #905139;
transform: translate3d(-.5em, .1em, 0);
}
&:after {
width: 1em;
height: 1.75em;
box-shadow: -.1em -.1em 0 0 #8e6b4e;
transform: translate3d(-1em, .2em, 0);
}
}
& > i:nth-of-type(18) {
width: 1.5em;
height: 2em;
box-shadow: -.1em -.1em 0 0 #805242;
transform: translate3d(8em, 8.5em, 0) skewX(0deg);
&:before {
width: .5em;
height: 1.5em;
box-shadow: -.1em -.1em 0 0 #905139;
transform: translate3d(-.5em, .1em, 0);
}
&:after {
width: 1em;
height: 1.75em;
box-shadow: -.1em -.1em 0 0 #8e6b4e;
transform: translate3d(-1em, .2em, 0);
}
}
& > i:nth-of-type(19) {
width: 1.5em;
height: 2em;
box-shadow: -.1em -.1em 0 0 #533429;
transform: translate3d(7em, 8.5em, 0) skewX(-20deg);
&:before {
width: .5em;
height: 1.5em;
box-shadow: -.1em -.1em 0 0 #905139;
transform: translate3d(-.5em, .1em, 0);
}
&:after {
width: 1em;
height: 1.75em;
box-shadow: -.1em -.1em 0 0 #644c38;
transform: translate3d(-1em, .2em, 0);
}
}
& > i:nth-of-type(20) {
width: 2em;
height: 1em;
box-shadow: -.1em -.1em 0 0 #533429;
transform: translate3d(5em, 8.75em, 0) skewX(0deg);
&:before {
width: 2em;
height: 1em;
box-shadow: -.1em -.1em 0 0 #905139;
transform: translate3d(-.5em, .1em, 0);
}
&:after {
width: 2em;
height: 1em;
box-shadow: -.1em -.1em 0 0 #46241c;
transform: translate3d(-1em, .2em, 0);
}
}
& > i:nth-of-type(21) {
width: 3em;
height: 1em;
box-shadow: -.1em -.1em 0 0 #533429;
transform: translate3d(3em, 8.75em, 0) skewX(0deg);
border-radius: 0;
&:before {
width: 2em;
height: 1em;
box-shadow: -.1em -.1em 0 0 #442f19;
transform: translate3d(-.5em, .1em, 0);
}
&:after {
width: 2em;
height: 1em;
box-shadow: -.1em -.1em 0 0 #331815;
transform: translate3d(-1em, .2em, 0);
}
}
& > i:nth-of-type(22) {
width: 2em;
height: .5em;
box-shadow: -.1em -.1em 0 0 #533429;
transform: translate3d(2em, 8.5em, 0) skewX(-20deg);
&:before {
width: 2em;
height: .5em;
box-shadow: -.1em -.1em 0 0 #331e15;
transform: translate3d(-.5em, .1em, 0);
}
&:after {
width: 2em;
height: .5em;
box-shadow: -.1em -.1em 0 0 #331815;
transform: translate3d(-1em, .2em, 0);
}
}
& > i:nth-of-type(23) {
width: 1em;
height: 2em;
box-shadow: .1em -.1em 0 0 #9D714C;
transform: translate3d(10.5em, 8em, 0) skewX(20deg);
&:before {
width: 1em;
height: 1.5em;
box-shadow: .1em -.1em 0 0 #805242;
transform: translate3d(1.5em, -.2em, 0);
}
&:after {
width: 1em;
height: 1em;
box-shadow: .1em -.1em 0 0 #9D714C;
transform: translate3d(2.5em, -.5em, 0);
}
}
& > i:nth-of-type(24) {
width: 1em;
height: 1em;
box-shadow: .1em -.1em 0 0 #9D714C;
transform: translate3d(14em, 7em, 0) skewX(20deg);
&:before {
width: 1em;
height: .75em;
box-shadow: .1em -.1em 0 0 #9D714C;
transform: translate3d(.75em, -.2em, 0);
}
&:after {
width: 1.5em;
height: .5em;
box-shadow: .1em -.1em 0 0 #9D714C;
transform: translate3d(1.5em, -.5em, 0);
}
}
}
}
eyeright {
width: 40em;
height: 22em;
transform: translate3d(43em,25em,0) rotate(10deg);
border-radius: 5em;
background: linear-gradient(to right, #EFD4BC, #F1C7AC, #D19666,#B45A2D);
box-shadow: -1em 1em 4em -2em rgba(#D79569,.5);
//dark
& > i:nth-of-type(1) {
width: 25em;
height: 13.5em;
transform: translate3d(1.5em,7.5em,0) rotate(-20deg);
box-shadow: inset 2em -1em 1em -2em #D56017, -1em .5em 2em -1em #D56017;
overflow: hidden;
background: linear-gradient(to right, rgba(#D56017,.5) 2%, $none 5%, $none);
&:before {
background: #150101;
width: 18em;
height: 12em;
transform: translate3d(2em,2.5em,0) rotate(0deg);
-webkit-mask-image: linear-gradient(#000, #000 30%, $none 40%,$none);
filter: blur(.2em);
}
& > i:nth-of-type(1) {
width: 8em;
height: 8em;
background: #fff;
transform: translate3d(7em,1.5em,0);
box-shadow: 0 0 1em #fff;
&:before {
width: 5em;
height: 5em;
box-shadow: .25em 0 .25em #CA7D68;
transform: translate3d(3em,-1em,0);
filter: blur(.2em);
}
&:after {
width: 5em;
height: 5em;
box-shadow: -.25em 0 .25em #CA7D68;
transform: translate3d(7em,0em,0);
filter: blur(.2em);
}
}
//eye shape top
& > i:nth-of-type(3) {
width: 21em;
height: 15em;
transform: translate3d(0em,.5em,0) rotate(-11deg);
overflow: hidden;
box-shadow: -.2em -.1em .3em 0 #D35111, 0 -.5em .5em 0 #E4AA52, inset 1em -.5em 1em -.5em #CE903F, inset .2em 0 .3em 0 #D35111;
background: linear-gradient(to right, $none, rgba(#fff,.2), $none);
&:before {
height: 20em;
width: 20em;
background: linear-gradient(to right, #C27028, #DFB299,#fff, #B06766, $none);
opacity: .3;
border-radius: 0;
}
&:after {
height: 10em;
width: 20em;
border-bottom: .25em solid #D45E14;
box-shadow: 0 .25em 0 #D45E14;
transform: translate3d(1.5em, .25em, 0) rotate(10deg);
-webkit-mask-image: linear-gradient(to right, $none 10%, #000 25%, $none 80%, $none);
}
//eye shape top
& > i:nth-of-type(1) {
width: 20em;
height: 17em;
transform: translate3d(-1em, 2.5em, 0);
overflow: hidden;
border-radius: 70% 60% 0 0;
box-shadow: 0 -.2em .1em -.1em #000,-1.5em 0 2em #d4681a, -.5em 0 1em #d13905, -.25em -.5em .1em #9D3E1C;
&:before {
background: radial-gradient( circle at 22% 110%, #fff 10%, #E4B193 20%,#9c2d0b, #C25E33 );
height: 7em;
width: 16em;
transform: translate3d(4em, 0em, 0) skewX(45deg);
box-shadow: 0 .5em .5em #AC3B14;
border: .25em solid #D45E14;
-webkit-mask-image: linear-gradient(to right, $none, #000 20%, $none);
}
//eye shape bottom
& > i:nth-of-type(1) {
width: 35em;
height: 16em;
overflow: hidden;
border-radius: 0 0 100% 100%;
box-shadow: 0 0 2em #AC3B14;
transform: translate3d(-7em, -11em, 0) rotate(7deg);
//white
& > i:nth-of-type(1) {
filter: contrast(1.6);
background: radial-gradient( circle at 45% 50%, #e8e3de, #A98E80, #A98E80);
width: 30em;
height: 30em;
transform: translate3d(3.75em, -2em, 0) rotate(10deg);
border-radius: 0;
//back
&:before {
background: radial-gradient( #000 15%, #2b110f 20%, #424660 40%,#9BA0A4 50%, #464043 60%);
width: 9.5em;
height: 9.75em;
transform: translate3d(10.75em,10em,0);
box-shadow: 0 0 1em #464043;
}
//shine
&:after {
background: radial-gradient( #fff,#fff 15%,#464043 20%, rgba(#464043,.5) 40%,$none,$none);
width: 2.5em;
height: 2em;
border-radius: .25em;
transform: translate3d(13.75em,13.75em,0);
}
& i, & i:before, & i:after {
border-radius: .75em;
transform-origin: 0 0;
width: 2.1em;
height: 1.25em;
opacity: 1;
}
//iris
& i {
&:nth-of-type(1) {
transform: translate3d(17em,15em,0);
background: #838580;
box-shadow: -5.5em 0 0 #7D7D7C;
&:before {
transform: translate3d(0,.33em,0) rotate(9deg);
background: #A09D9C;
box-shadow: -5.5em 0 0 #838580;
}
&:after {
transform: translate3d(0,.66em,0) rotate(18deg);
background: #93938C;
box-shadow: -5.5em 0 0 #777776;
}
}
&:nth-of-type(2) {
transform: translate3d(17em,15.5em,0) rotate(20deg);
background: #96938C;
box-shadow: -5.5em 0 0 #767B7C;
&:before {
transform: translate3d(0,.33em,0) rotate(9deg);
background: #8F8C83;
box-shadow: -5.5em 0 0 #7C7A7B;
}
&:after {
transform: translate3d(0,.66em,0) rotate(18deg);
background: #A09F9A;
box-shadow: -5.5em 0 0 #777979;
}
}
&:nth-of-type(3) {
transform: translate3d(16.5em,16.5em,0) rotate(50deg);
background: #7A716B;
box-shadow: -6em 0 0 #6F6763;
&:before {
transform: translate3d(0,.33em,0) rotate(9deg);
background: #7D7A74;
box-shadow: -6em 0 0 #655B55;
}
&:after {
transform: translate3d(0,.66em,0) rotate(18deg);
background: #8F8D8A;
box-shadow: -6em 0 0 #766E6F;
}
}
&:nth-of-type(4) {
transform: translate3d(16em,17em,0) rotate(80deg);
background: #7A7577;
box-shadow: -6em 0 0 #5C4C4F;
&:before {
transform: translate3d(0,.33em,0) rotate(9deg);
background: #888380;
box-shadow: -6em 0 0 #6B6359;
}
&:after {
transform: translate3d(0,.66em,0) rotate(18deg);
background: #817F81;
box-shadow: -6em 0 0 #443C39;
}
}
&:nth-of-type(5) {
transform: translate3d(15.5em,17.2em,0) rotate(110deg);
background: #807C74;
box-shadow: -6em 0 0 #5E5752;
opacity: .3;
&:before {
transform: translate3d(0,.33em,0) rotate(9deg);
background: #7B746D;
box-shadow: -6em 0 0 #71716E;
}
&:after {
transform: translate3d(0,.66em,0) rotate(18deg);
background: #D8DEDA;
box-shadow: -6em 0 0 #9B999A;
}
}
&:nth-of-type(6) {
transform: translate3d(14.2em,16.5em,0) rotate(140deg);
background: #808483;
box-shadow: -5.75em 0 0 #88857F;
opacity: .5;
&:before {
transform: translate3d(0,.33em,0) rotate(9deg);
background: #A9B0AB;
box-shadow: -5.75em 0 0 #837F7C;
}
&:after {
transform: translate3d(0,.66em,0) rotate(18deg);
background: #868781;
box-shadow: -5.75em 0 0 #9E9E96;
}
}
&:nth-of-type(7) {
transform: translate3d(17.25em,14em,0) rotate(10deg);
background: #868781;
opacity: .5;
}
}
}
& > i:nth-of-type(2) {
background: radial-gradient($none 20%, rgba(#000,.5) 22%, rgba( #afbfff,.1), rgba(#000,.3),#464043 );
width: 9.5em;
height: 9.75em;
transform: translate3d(14.5em,7em,0);
filter: contrast(1.5);
/*background: red;*/
//shadow
&:before {
width: 30em;
height: 10em;
transform: translate3d(-11em, 3em, 0) rotate(20deg);
box-shadow: inset -4em 1.5em 0.5em rgba(#262224,.4), inset -2em 0 2em #262224;
background: radial-gradient(circle at 50% 50%, $none 25%, #464043, #464043);
}
//for shine if needed
&:after {
background: #680202;
width: 3em;
height: 3em;
transform: translate3d(-5.5em,8em,0) rotate(-70deg);
border-radius: 0;
}
}
//water
& > i:nth-of-type(3) {
transform: translate3d(5em,4.85em,0) rotate(0deg);
box-shadow: inset 0 -.15em 0 #fff;
border-bottom: 1em solid #000;
width: 25em;
height: 12em;
border-radius: 0 0 100% 100%;
-webkit-mask-image: linear-gradient(to right, $none,$none, #000, $none,$none);
//for shine if needed
&:after {
}
}
}
}
& > i:nth-of-type(2) {
width: 1em;
height: 1.25em;
background: #CF5E46;
transform: translate3d(.75em,5.5em,0) rotate(-15deg) skewX(25deg) scaleY(-.9);
border-radius: 50% 0 0 50%;
box-shadow: inset .5em -.5em .5em -.5em #680202, inset 0 0 .5em #890f0f, .5em 0 .5em #CF5E46;
}
}
//eye lashes
& > i:nth-of-type(4) {
& > i, & > i:before, & > i:after {
transform-origin: 0 0;
}
$lash: #390d03;
& > i:nth-of-type(1) {
width: 3em;
height: 3em;
box-shadow: 0 .25em 0 -.1em $lash;
transform: translate3d(7em, .5em, 0) rotate(25deg) skewY(-25deg);
opacity: .8;
&:before {
width: 5em;
height: 5em;
box-shadow: 0 .25em 0 -.1em $lash;
transform: translate3d(-1.5em, -1.5em, 0);
}
&:after {
width: 3em;
height: 3em;
box-shadow: 0 .25em 0 -.1em $lash;
transform: translate3d(-1em, 1em, 0);
}
}
& > i:nth-of-type(2) {
width: 2em;
height: 2em;
box-shadow: 0 .25em 0 -.1em $lash;
transform: translate3d(2.5em, 4em, 0) rotate(0deg) skewY(-25deg);
opacity: .75;
&:before {
width: 100%;
height: 100%;
box-shadow: 0 .25em 0 -.1em $lash;
transform: translate3d(-.5em, .25em, 0);
}
&:after {
width: 100%;
height: 100%;
box-shadow: 0 .25em 0 -.1em $lash;
transform: translate3d(-.75em, .75em, 0);
}
}
& > i:nth-of-type(3) {
width: 2em;
height: 2em;
box-shadow: 0 .25em 0 -.1em $lash;
transform: translate3d(4em, 3em, 0) rotate(15deg) skewY(-25deg);
opacity: .8;
&:before {
width: 100%;
height: 100%;
box-shadow: 0 .25em 0 -.1em $lash;
transform: translate3d(-.5em, .25em, 0);
}
&:after {
width: 100%;
height: 100%;
box-shadow: 0 .25em 0 -.1em $lash;
transform: translate3d(-.75em, .75em, 0);
}
}
& > i:nth-of-type(4) {
width: 3em;
height: 3em;
box-shadow: .25em .25em 0 -.1em $lash;
transform: translate3d(7em, -1.1em, 0) rotate(10deg) skewY(25deg);
opacity: .8;
&:before {
width: 100%;
height: 100%;
box-shadow: .25em .25em 0 -.1em $lash;
transform: translate3d(-.5em, .5em, 0);
}
&:after {
width: 100%;
height: 100%;
box-shadow: .25em 0 0 -.1em $lash;
transform: translate3d(0em, 1em, 0);
}
}
& > i:nth-of-type(5) {
width: 3em;
height: 3em;
box-shadow: .25em 0 0 -.1em $lash;
transform: translate3d(10em, -1.5em, 0) rotate(45deg) skewY(25deg);
opacity: .8;
&:before {
width: 100%;
height: 100%;
box-shadow: .25em 0 0 -.1em $lash;
transform: translate3d(.75em, -.75em, 0) rotate(-5deg);
}
&:after {
width: 100%;
height: 100%;
box-shadow: .25em 0 0 -.1em $lash;
transform: translate3d(1em, -1em, 0);
}
}
& > i:nth-of-type(6) {
width: 3em;
height: 3em;
box-shadow: .25em 0 0 -.1em $lash;
transform: translate3d(13em, -1.5em, 0) rotate(55deg) skewY(25deg);
opacity: .8;
&:before {
width: 100%;
height: 100%;
box-shadow: .25em 0 0 -.1em $lash;
transform: translate3d(.75em, -.75em, 0) rotate(-5deg);
}
&:after {
width: 100%;
height: 100%;
box-shadow: .25em 0 0 -.1em $lash;
transform: translate3d(1em, -1em, 0);
}
}
& > i:nth-of-type(7) {
width: 2em;
height: 2em;
box-shadow: 0 .25em 0 -.1em $lash;
transform: translate3d(1em, 5.5em, 0) rotate(0deg) skewY(-25deg);
opacity: .5;
&:before {
width: 100%;
height: 100%;
box-shadow: 0 .25em 0 -.1em $lash;
transform: translate3d(-.5em, .25em, 0);
}
&:after {
width: 100%;
height: 100%;
box-shadow: 0 .25em 0 -.1em $lash;
transform: translate3d(-.75em, .75em, 0);
}
}
& > i:nth-of-type(8) {
width: 3em;
height: 3em;
box-shadow: .25em 0 0 -.1em $lash;
transform: translate3d(15em, -1em, 0) rotate(65deg) skewY(25deg);
opacity: .8;
&:before {
width: 100%;
height: 100%;
box-shadow: .25em 0 0 -.1em $lash;
transform: translate3d(.75em, -.75em, 0) rotate(-5deg);
}
&:after {
width: 100%;
height: 100%;
box-shadow: .25em 0 0 -.1em $lash;
transform: translate3d(1em, -1em, 0);
}
}
& > i:nth-of-type(9) {
width: 3em;
height: 3em;
box-shadow: .25em 0 0 -.1em $lash;
transform: translate3d(18em, -.5em, 0) rotate(65deg) skewY(35deg);
opacity: .8;
&:before {
width: 100%;
height: 100%;
box-shadow: .25em 0 0 -.1em $lash;
transform: translate3d(.75em, -.75em, 0) rotate(-1deg);
}
&:after {
width: 100%;
height: 100%;
box-shadow: .25em 0 0 -.1em $lash;
transform: translate3d(1em, -1em, 0);
}
}
& > i:nth-of-type(10) {
width: 4em;
height: 4em;
box-shadow: .25em 0 0 -.1em $lash;
transform: translate3d(20em, 1em, 0) rotate(85deg) skewY(5deg);
opacity: .8;
&:before {
width: 100%;
height: 100%;
box-shadow: .25em 0 0 -.1em $lash;
transform: translate3d(.75em, -.75em, 0) rotate(-2deg);
}
&:after {
width: 100%;
height: 100%;
box-shadow: .25em 0 0 -.1em $lash;
transform: translate3d(1em, -1em, 0);
}
}
& > i:nth-of-type(11) {
width: 4em;
height: 4em;
box-shadow: 0 .15em 0 -.1em $lash;
transform: translate3d(16em, 1em, 0);
opacity: .8;
&:before {
width: 100%;
height: 100%;
box-shadow: 0 .15em 0 -.1em $lash;
transform: translate3d(.5em, .5em, 0);
}
&:after {
width: 100%;
height: 100%;
box-shadow: 0 .15em 0 -.1em $lash;
transform: translate3d(1em, 1em, 0);
}
}
//second row
& > i:nth-of-type(12) {
width: 3em;
height: 1em;
box-shadow: 0 .15em 0 -.1em $lash;
transform: translate3d(15em, 3em, 0);
opacity: .8;
&:before {
width: 100%;
height: 100%;
box-shadow: 0 .15em 0 -.1em $lash;
transform: translate3d(.5em, .5em, 0) rotate(5deg);
}
&:after {
width: 100%;
height: 100%;
box-shadow: 0 .15em 0 -.1em $lash;
transform: translate3d(1em, 1em, 0);
}
}
& > i:nth-of-type(13) {
width: 4em;
height: 2em;
box-shadow: 0 .25em 0 -.1em $lash;
transform: translate3d(17.5em, 4em, 0) rotate(10deg);
opacity: .8;
&:before {
width: 100%;
height: 100%;
box-shadow: 0 .15em 0 -.1em $lash;
transform: translate3d(.5em, .25em, 0) rotate(5deg);
}
&:after {
width: 100%;
height: 100%;
box-shadow: 0 .25em 0 -.1em $lash;
transform: translate3d(1em, .5em, 0);
}
}
& > i:nth-of-type(14) {
width: 5em;
height: 2em;
box-shadow: 0 .25em 0 -.1em $lash;
transform: translate3d(17em, 3em, 0) rotate(15deg);
opacity: .8;
&:before {
width: 100%;
height: 100%;
box-shadow: 0 .15em 0 -.1em $lash;
transform: translate3d(.5em, .5em, 0) rotate(5deg);
}
&:after {
width: 100%;
height: 100%;
box-shadow: 0 .15em 0 -.1em $lash;
transform: translate3d(1em, 1em, 0);
}
}
//bottom row
& > i:nth-of-type(15) {
width: 2em;
height: 2em;
box-shadow: 0 -.25em 0 -.1em $lash;
transform: translate3d(12em, 7.75em, 0) rotate(0deg) skewY(35deg);
opacity: .8;
&:before {
width: 100%;
height: 100%;
box-shadow: 0 -.25em 0 -.1em $lash;
transform: translate3d(.75em, -.5em, 0) rotate(5deg);
}
&:after {
width: 100%;
height: 100%;
box-shadow: 0 -.25em 0 -.1em $lash;
transform: translate3d(1.5em, -1.25em, 0);
}
}
& > i:nth-of-type(16) {
width: 2em;
height: 2em;
box-shadow: 0 -.25em 0 -.1em $lash;
transform: translate3d(16em, 7em, 0) rotate(-20deg) skewY(35deg);
opacity: .8;
&:before {
width: 100%;
height: 100%;
box-shadow: 0 -.25em 0 -.1em $lash;
transform: translate3d(.75em, -.5em, 0) rotate(5deg);
}
&:after {
width: 100%;
height: 100%;
box-shadow: 0 -.25em 0 -.1em $lash;
transform: translate3d(1.25em, -.75em, 0);
}
}
& > i:nth-of-type(17) {
width: 2em;
height: 2em;
box-shadow: 0 -.25em 0 -.1em $lash;
transform: translate3d(13.5em, 8em, 0) rotate(-35deg) skewY(35deg);
opacity: .8;
&:before {
width: 100%;
height: 100%;
box-shadow: 0 -.25em 0 -.1em $lash;
transform: translate3d(.75em, -.25em, 0) rotate(5deg);
}
&:after {
width: 100%;
height: 100%;
box-shadow: 0 -.25em 0 -.1em $lash;
transform: translate3d(1.25em, -.55em, 0);
}
}
& > i:nth-of-type(18) {
width: 1em;
height: 1em;
box-shadow: 0 -.25em 0 -.1em $lash;
transform: translate3d(10em, 8.45em, 0) rotate(-10deg) skewY(55deg);
opacity: .7;
&:before {
width: 100%;
height: 100%;
box-shadow: 0 -.25em 0 -.1em $lash;
transform: translate3d(1em, -1.35em, 0) rotate(5deg);
}
&:after {
width: 100%;
height: 100%;
box-shadow: 0 -.25em 0 -.1em $lash;
transform: translate3d(2em, -2.65em, 0);
}
}
& > i:nth-of-type(19) {
width: 2em;
height: 2em;
box-shadow: -.25em 0 0 -.1em $lash;
transform: translate3d(11em, 8.2em, 0) rotate(0deg) skewY(40deg);
opacity: .6;
&:before {
width: 100%;
height: 100%;
box-shadow: -.25em 0 0 -.1em $lash;
transform: translate3d(-1em, .75em, 0) rotate(5deg);
}
&:after {
width: 100%;
height: 100%;
box-shadow: -.25em 0 0 -.1em $lash;
transform: translate3d(-1.5em, 1.5em, 0);
}
}
& > i:nth-of-type(20) {
width: 2em;
height: 2em;
box-shadow: -.25em 0 0 -.1em $lash;
transform: translate3d(9em, 8.25em, 0) rotate(20deg) skewY(-40deg);
opacity: .5;
&:before {
width: 100%;
height: 100%;
box-shadow: -.25em 0 0 -.1em $lash;
transform: translate3d(-1em, 0em, 0) rotate(5deg);
}
&:after {
width: 100%;
height: 100%;
box-shadow: -.25em 0 0 -.1em $lash;
transform: translate3d(-1.5em, -.5em, 0);
}
}
& > i:nth-of-type(21) {
width: 1em;
height: 1em;
box-shadow: -.25em 0 0 -.1em $lash;
transform: translate3d(7.5em, 8em, 0) rotate(20deg) skewY(-40deg);
opacity: .4;
&:before {
width: 100%;
height: 100%;
box-shadow: -.25em 0 0 -.1em $lash;
transform: translate3d(-1.25em, 0em, 0) rotate(5deg);
}
&:after {
width: 100%;
height: 100%;
box-shadow: -.25em 0 0 -.1em $lash;
transform: translate3d(-2em, -.5em, 0);
}
}
}
//more eye lashes
& > i:nth-of-type(5) {
width: 6em;
height: .75em;
border-radius: 0 0 100% 100%;
background: rgba(#150101,.5);
transform: translate3d(14.5em, 5.5em, 0) rotate(25deg);
box-shadow: .5em .1em .5em #230704, 0 0 .5em #2f0703;
&:before {
width: 17em;
height: 12em;
border-radius: 40% 60% 1em 0;
box-shadow: 0.4em 0 0.1em -0.15em #2b0101;
transform: translate3d(-11.5em, 2em, 0) rotate(-80deg);
}
&:after {
width: 4em;
height: 2em;
border-radius: 50%;
box-shadow: 0.15em 0.35em 0 -0.15em #410808;
transform: translate3d(2em, -2em, 0) skewX(-15deg);
}
}
& > i:nth-of-type(6) {
width: 4em;
height: 2em;
border-radius: 50%;
box-shadow: 0.15em 0.35em 0 -0.15em #2a0404;
transform: translate3d(17.5em, 5em, 0) skewX(-15deg);
&:before {
width: 4em;
height: 2em;
border-radius: 50%;
box-shadow: 0.15em 0.35em 0 -0.15em #280404;
transform: translate3d(.75em, .25em, 0) skewX(0deg);
}
&:after {
width: 4em;
height: 2em;
border-radius: 50%;
box-shadow: 0.15em 0.35em 0 -0.15em #280202;
transform: translate3d(1.5em, .5em, 0) skewX(0deg);
}
}
}
}
face {
& i:nth-of-type(1) {
width: 79em;
height: 60em;
background: radial-gradient(#FDE3C8,#F8D6B2,#E6C283,#C7813A);
transform: translate3d(-13em, 0, 0) rotate(-20deg);
border-radius: 0;
&:before {
width: 15em;
height: 15em;
transform: translate3d(32em,22em, 0) rotate(-45deg);
background: #fff;
filter: blur(3em);
opacity: .5;
border-radius: 0;
}
&:after {
width: 79em;
height: 40em;
background: radial-gradient(circle at 50% 20%, #ECC09F,#CA8A56,#C4713E,#6B3320);
transform: translate3d(0, 59em, 0);
border-radius: 0;
}
}
}
cheekbones {
& i:nth-of-type(1) {
width: 30em;
height: 5em;
background: #E7B068;
transform: translate3d(0em,57em, 0) rotate(-40deg);
filter: blur(1em);
border-radius: 0;
&:before {
width: 25em;
height: 7em;
background: #F6DDBE;
transform: translate3d(2.5em, 5em, 0) rotate(0deg);
border-radius: 3em;
filter: blur(2em);
}
&:after {
width: 25em;
height: 7em;
background: #F6DDBE;
transform: translate3d(2.5em, 5em, 0) rotate(-10deg);
border-radius: 3em;
transform-origin: 100% 100%;
filter: blur(2em);
}
}
& i:nth-of-type(2) {
width: 30em;
height: 5em;
background: #EBB581;
transform: translate3d(40em,46em, 0);
filter: blur(1em);
border-radius: 0;
&:before {
width: 25em;
height: 7em;
background: #F7D8C3;
transform: translate3d(2.5em, 5em, 0) rotate(0deg);
border-radius: 3em;
filter: blur(2em);
}
&:after {
width: 25em;
height: 7em;
background: #F7D8C3;
transform: translate3d(2.5em, 5em, 0) rotate(10deg);
border-radius: 3em;
transform-origin: 0 0;
filter: blur(2em);
}
}
& i:nth-of-type(3) {
width: 0em;
height: 0em;
transform: translate3d(15em,48em, 0) rotate(-15deg) skewX(-40deg);
filter: blur(.5em);
border-radius: 0;
border: 5em solid $none;
border-bottom: 5em solid #C07226;
border-right: 5em solid #C07226;
opacity: .2;
&:before {
width: 100em;
height: 40em;
border: 6em solid #B63D1D;
border-radius: 15em;
-webkit-mask-image: linear-gradient(140deg, rgba(0, 0, 0, 0) 80%, #000);
transform: translate3d(-82em, -13em, 0) skew(35deg) rotate(-30deg);
}
&:after {
width: 100em;
height: 50em;
border: 8em solid #B63D1D;
border-radius: 49%;
-webkit-mask-image: linear-gradient( $none,$none,#000, $none);
transform: translate3d(14em, -28em, 0) skewX(35deg) rotate(10deg);
}
}
}
lefteyebrow {
filter: contrast(1.5);
&:before {
width: 30em;
height: 10em;
background: linear-gradient(to right, #CA9057, #F1C69F);
transform: translate3d(-7em,25em,0) rotate(20deg) skewX(45deg);
filter: blur(2em);
border-radius: 2em;
}
&:after {
width: 10em;
height: 3em;
background: #EAC581;
border-radius: 2em;
transform: translate3d(15em,40em,0) rotate(35deg);
filter: blur(1em);
}
& i:nth-of-type(1) {
width: 5em;
height: 5em;
transform: translate3d(15em,32em,0) skewX(20deg) rotate(-10deg);
box-shadow: .1em -.1em 0 #c88e68;
border-radius: 0 100% 0 0;
&:before {
width: 5em;
height: 5em;
transform: translate3d(-1em,0,0);
box-shadow: .1em -.1em 0 #bd8562;
border-radius: 0 100% 0 0;
}
&:after {
width: 5em;
height: 4em;
transform: translate3d(-2em,0em,0);
box-shadow: .1em -.1em 0 #c28965;
border-radius: 0 100% 0 0;
}
}
& i:nth-of-type(2) {
width: 5em;
height: 5em;
transform: translate3d(12em,32em,0) skewX(20deg) rotate(-20deg);
box-shadow: .1em -.1em 0 #c2794a;
border-radius: 0 100% 0 0;
&:before {
width: 5em;
height: 5em;
transform: translate3d(-1em,0,0);
box-shadow: .1em -.1em 0 #db8a56;
border-radius: 0 100% 0 0;
}
&:after {
width: 5em;
height: 4em;
transform: translate3d(-2em,0em,0);
box-shadow: .1em -.1em 0 #b77241;
border-radius: 0 100% 0 0;
}
}
& i:nth-of-type(3) {
width: 5em;
height: 5em;
transform: translate3d(10em,33em,0) skewX(20deg) rotate(-30deg);
box-shadow: .1em -.1em 0 #c37f4f;
border-radius: 0 100% 0 0;
&:before {
width: 5em;
height: 5em;
transform: translate3d(-1em,0,0);
box-shadow: .1em -.1em 0 #b67140;
border-radius: 0 100% 0 0;
}
&:after {
width: 5em;
height: 4em;
transform: translate3d(-2em,0em,0);
box-shadow: .1em -.1em 0 #b77749;
border-radius: 0 100% 0 0;
}
}
& i:nth-of-type(4) {
width: 5em;
height: 5em;
transform: translate3d(8em,34em,0) skewX(20deg) rotate(-30deg);
box-shadow: .1em -.1em 0 #c37f4f;
border-radius: 0 100% 0 0;
&:before {
width: 5em;
height: 5em;
transform: translate3d(-1em,0,0);
box-shadow: .1em -.1em 0 #b67140;
border-radius: 0 100% 0 0;
}
&:after {
width: 5em;
height: 4em;
transform: translate3d(-2em,0em,0);
box-shadow: .1em -.1em 0 #b77749;
border-radius: 0 100% 0 0;
}
}
& i:nth-of-type(5) {
width: 5em;
height: 5em;
transform: translate3d(9em,33.5em,0) skewX(20deg) rotate(-30deg);
box-shadow: .1em -.1em 0 #c37f4f;
border-radius: 0 100% 0 0;
&:before {
width: 5em;
height: 5em;
transform: translate3d(-1em,0,0);
box-shadow: .1em -.1em 0 #b67140;
border-radius: 0 100% 0 0;
}
&:after {
width: 5em;
height: 4em;
transform: translate3d(-2em,0em,0);
box-shadow: .1em -.1em 0 #b77749;
border-radius: 0 100% 0 0;
}
}
& i:nth-of-type(6) {
width: 5em;
height: 5em;
transform: translate3d(7em,34em,0) skewX(20deg) rotate(-35deg);
box-shadow: .1em -.1em 0 #c37f4f;
border-radius: 0 100% 0 0;
opacity: .7;
&:before {
width: 5em;
height: 5em;
transform: translate3d(-1em,0,0);
box-shadow: .1em -.1em 0 #b67140;
border-radius: 0 100% 0 0;
}
&:after {
width: 5em;
height: 4em;
transform: translate3d(-2em,0em,0);
box-shadow: .1em -.1em 0 #b77749;
border-radius: 0 100% 0 0;
}
}
& i:nth-of-type(7) {
width: 5em;
height: 5em;
transform: translate3d(7em,34em,0) skewX(20deg) rotate(-35deg);
box-shadow: .1em -.1em 0 #c37f4f;
border-radius: 0 100% 0 0;
opacity: .7;
&:before {
width: 5em;
height: 5em;
transform: translate3d(-1em,0,0);
box-shadow: .1em -.1em 0 #b67140;
border-radius: 0 100% 0 0;
}
&:after {
width: 5em;
height: 4em;
transform: translate3d(-2em,0em,0);
box-shadow: .1em -.1em 0 #b77749;
border-radius: 0 100% 0 0;
}
}
& i:nth-of-type(8) {
width: 5em;
height: 5em;
transform: translate3d(6em,35em,0) skewX(25deg) rotate(-35deg);
box-shadow: .1em -.1em 0 #8C4A2B;
border-radius: 0 100% 0 0;
opacity: .7;
&:before {
width: 5em;
height: 5em;
transform: translate3d(-1em,0,0);
box-shadow: .1em -.1em 0 #78381F;
border-radius: 0 100% 0 0;
}
&:after {
width: 5em;
height: 4em;
transform: translate3d(-2em,0em,0);
box-shadow: .1em -.1em 0 #8B4632;
border-radius: 0 100% 0 0;
}
}
& i:nth-of-type(9) {
width: 5em;
height: 5em;
transform: translate3d(5em,35em,0) skewX(25deg) rotate(-50deg);
box-shadow: .1em -.1em 0 #8C4A2B;
border-radius: 0 100% 0 0;
opacity: .7;
&:before {
width: 5em;
height: 5em;
transform: translate3d(-1em,0,0);
box-shadow: .1em -.1em 0 #78381F;
border-radius: 0 100% 0 0;
}
&:after {
width: 5em;
height: 4em;
transform: translate3d(-2em,0em,0);
box-shadow: .1em -.1em 0 #8B4632;
border-radius: 0 100% 0 0;
}
}
& i:nth-of-type(10) {
width: 5em;
height: 5em;
transform: translate3d(4em,35em,0) rotate(-60deg) skewX(25deg);
box-shadow: .1em -.1em 0 #8C4A2B;
border-radius: 0 100% 0 0;
opacity: .7;
&:before {
width: 5em;
height: 5em;
transform: translate3d(-1em,0,0);
box-shadow: .1em -.1em 0 #78381F;
border-radius: 0 100% 0 0;
}
&:after {
width: 5em;
height: 4em;
transform: translate3d(-2em,0em,0);
box-shadow: .1em -.1em 0 #8B4632;
border-radius: 0 100% 0 0;
}
}
& i:nth-of-type(11) {
width: 5em;
height: 5em;
transform: translate3d(1em,37em,0) rotate(-65deg) skewX(25deg);
box-shadow: .1em -.1em 0 #8C4A2B;
border-radius: 0 100% 0 0;
opacity: .7;
&:before {
width: 5em;
height: 5em;
transform: translate3d(-1em,0,0);
box-shadow: .1em -.1em 0 #78381F;
border-radius: 0 100% 0 0;
}
&:after {
width: 5em;
height: 4em;
transform: translate3d(-2em,0em,0);
box-shadow: .1em -.1em 0 #8B4632;
border-radius: 0 100% 0 0;
}
}
& i:nth-of-type(12) {
width: 5em;
height: 5em;
transform: translate3d(8.5em,33em,0) skewX(20deg) rotate(-30deg);
box-shadow: .1em -.1em 0 #905139;
border-radius: 0 100% 0 0;
&:before {
width: 5em;
height: 5em;
transform: translate3d(-1em,0,0);
box-shadow: .50em -.1em 0 #c37f4f;
border-radius: 0 100% 0 0;
}
&:after {
width: 5em;
height: 4em;
transform: translate3d(-2em,0em,0);
box-shadow: .1em -.1em 0 #965537;
border-radius: 0 100% 0 0;
}
}
& i:nth-of-type(13) {
width: 5em;
height: 5em;
transform: translate3d(10.5em,32em,0) skewX(20deg) rotate(-30deg);
box-shadow: .05em -.1em 0 #b67140;
border-radius: 0 100% 0 0;
&:before {
width: 5em;
height: 5em;
transform: translate3d(-1em,0,0);
box-shadow: .05em -.1em 0 #c37f4f;
border-radius: 0 100% 0 0;
}
&:after {
width: 5em;
height: 4em;
transform: translate3d(-2em,0em,0);
box-shadow: .05em -.1em 0 #8C4A2B;
border-radius: 0 100% 0 0;
}
}
& i:nth-of-type(14) {
width: 5em;
height: 5em;
transform: translate3d(11.5em,33em,0) skewX(20deg) rotate(-30deg);
box-shadow: .1em -.1em 0 #c37f4f;
border-radius: 0 100% 0 0;
&:before {
width: 5em;
height: 5em;
transform: translate3d(-1em,0,0);
box-shadow: .05em -.1em 0 #c37f4f;
border-radius: 0 100% 0 0;
}
&:after {
width: 5em;
height: 4em;
transform: translate3d(-2em,0em,0);
box-shadow: .05em -.1em 0 #9D714C;
border-radius: 0 100% 0 0;
}
}
}
lefteyebrow:nth-of-type(2) {
transform: translate3d(8em, -9em, 0) rotate(7deg) scale(1.2);
opacity: .4;
& i:nth-of-type(1) {
width: 2em;
height: 3em;
transform: translate3d(15em,32em,0) skewX(10deg);
&:before {
width: 1em;
height: 2em;
}
&:after {
width: 2em;
height: 3em;
}
}
& i:nth-of-type(2) {
width: 2em;
height: 3em;
transform: translate3d(15em,33em,0) skewX(20deg);
box-shadow: .1em -.1em 0 #c2794a;
border-radius: 0 100% 0 0;
&:before {
width: 2em;
height: 4em;
transform: translate3d(-1em,0,0);
box-shadow: .1em -.1em 0 #db8a56;
border-radius: 0 100% 0 0;
}
&:after {
width: 3em;
height: 4em;
transform: translate3d(-2em,0em,0);
box-shadow: .1em -.1em 0 #b77241;
border-radius: 0 100% 0 0;
}
}
& i:nth-of-type(3) {
width: 5em;
height: 5em;
transform: translate3d(10em,33em,0) skewX(20deg) rotate(-30deg);
box-shadow: .1em -.1em 0 #c37f4f;
border-radius: 0 100% 0 0;
&:before {
width: 5em;
height: 5em;
transform: translate3d(-1em,0,0);
box-shadow: .1em -.1em 0 #b67140;
border-radius: 0 100% 0 0;
}
&:after {
width: 5em;
height: 4em;
transform: translate3d(-2em,0em,0);
box-shadow: .1em -.1em 0 #b77749;
border-radius: 0 100% 0 0;
}
}
}
righteyebrow {
filter: contrast(2) brightness(70%);
opacity: .75;
& i:nth-of-type(1) {
width: 7em;
height: 7em;
transform: translate3d(42em,22em,0);
box-shadow: -.1em -.1em 0 #c88e68;
border-radius: 100% 0 0 0;
&:before {
width: 7em;
height: 5em;
transform: translate3d(1em,0,0);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 0 0 0;
}
&:after {
width: 7em;
height: 6em;
transform: translate3d(2em,0em,0);
box-shadow: -.1em -.1em 0 #c28965;
border-radius: 100% 0 0 0;
}
}
& i:nth-of-type(2) {
width: 7em;
height: 7em;
transform: translate3d(45em,22em,0);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 0 0 0;
&:before {
width: 7em;
height: 5em;
transform: translate3d(1em,0,0);
box-shadow: -.1em -.1em 0 #B35D36;
border-radius: 100% 0 0 0;
}
&:after {
width: 7em;
height: 6em;
transform: translate3d(2em,0em,0);
box-shadow: -.1em -.1em 0 #4C2922;
border-radius: 100% 0 0 0;
}
}
& i:nth-of-type(3) {
width: 7em;
height: 7em;
transform: translate3d(46em,22em,0) skewX(-10deg) rotate(0deg);
box-shadow: -.1em -.1em 0 #c88e68;
border-radius: 100% 0 0 0;
&:before {
width: 7em;
height: 5em;
transform: translate3d(1em,0,0);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 0 0 0;
}
&:after {
width: 7em;
height: 6em;
transform: translate3d(2em,0em,0);
box-shadow: -.1em -.1em 0 #c28965;
border-radius: 100% 0 0 0;
}
}
& i:nth-of-type(4) {
width: 7em;
height: 6.5em;
transform: translate3d(48em,22em,0) skewX(-10deg) rotate(0deg);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 0 0 0;
&:before {
width: 7em;
height: 5em;
transform: translate3d(1em,0,0);
box-shadow: -.1em -.1em 0 #B35D36;
border-radius: 100% 0 0 0;
}
&:after {
width: 6.5em;
height: 5em;
transform: translate3d(2em,0em,0);
box-shadow: -.1em -.1em 0 #c28965;
border-radius: 100% 0 0 0;
}
}
& i:nth-of-type(5) {
width: 7em;
height: 6.5em;
transform: translate3d(49em,22em,0) skewX(-20deg) rotate(5deg);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 0 0 0;
&:before {
width: 7em;
height: 5em;
transform: translate3d(1em,0,0);
box-shadow: -.1em -.1em 0 #bd8562;
border-radius: 100% 0 0 0;
}
&:after {
width: 6.5em;
height: 5em;
transform: translate3d(2em,0em,0);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 0 0 0;
}
}
& i:nth-of-type(5) {
width: 10em;
height: 2em;
transform: translate3d(48em,22em,0) skewX(-20deg) rotate(5deg);
box-shadow: -.1em -.1em 0 #B35D36;
border-radius: 100% 0 0 0;
&:before {
width: 9em;
height: 3em;
transform: translate3d(1em,0,0);
box-shadow: -.1em -.1em 0 #a57253;
border-radius: 100% 0 0 0;
}
&:after {
width: 10em;
height: 3em;
transform: translate3d(2em,0em,0);
box-shadow: -.1em -.1em 0 #c28965;
border-radius: 100% 0 0 0;
}
}
& i:nth-of-type(6) {
width: 10em;
height: 2em;
transform: translate3d(49em,22em,0) skewX(-20deg) rotate(5deg);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 50% 0 0;
&:before {
width: 9em;
height: 3em;
transform: translate3d(1em,0,0);
box-shadow: -.1em -.1em 0 #bd8562;
border-radius: 100% 50% 0 0;
}
&:after {
width: 10em;
height: 3em;
transform: translate3d(2em,0em,0);
box-shadow: -.1em -.1em 0 #c28965;
border-radius: 100% 50% 0 0;
}
}
& i:nth-of-type(7) {
width: 10em;
height: 4em;
transform: translate3d(48em,23em,0) skewX(-20deg) rotate(5deg);
box-shadow: -.1em -.1em 0 #c88e68;
border-radius: 100% 50% 0 0;
&:before {
width: 9em;
height: 3em;
transform: translate3d(1em,0,0);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 50% 0 0;
}
&:after {
width: 10em;
height: 5em;
transform: translate3d(2em,0em,0);
box-shadow: -.1em -.1em 0 #c28965;
border-radius: 100% 50% 0 0;
}
}
& i:nth-of-type(8) {
width: 10em;
height: 3em;
transform: translate3d(49em,22.5em,0) skewX(-20deg) rotate(10deg);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 50% 0 0;
&:before {
width: 9em;
height: 3em;
transform: translate3d(1em,0,0);
box-shadow: -.1em -.1em 0 #bd8562;
border-radius: 100% 50% 0 0;
}
&:after {
width: 10em;
height: 2em;
transform: translate3d(2em,0em,0);
box-shadow: -.1em -.1em 0 #B35D36;
border-radius: 100% 50% 0 0;
}
}
& i:nth-of-type(9) {
width: 10em;
height: 3em;
transform: translate3d(52em,23em,0) skewX(-20deg) rotate(15deg);
box-shadow: -.1em -.1em 0 #c88e68;
border-radius: 100% 50% 0 0;
&:before {
width: 9em;
height: 3em;
transform: translate3d(1em,0,0);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 50% 0 0;
}
&:after {
width: 10em;
height: 2em;
transform: translate3d(2em,0em,0);
box-shadow: -.1em -.1em 0 #B35D36;
border-radius: 100% 50% 0 0;
}
}
& i:nth-of-type(10) {
width: 10em;
height: 3em;
transform: translate3d(53em,23em,0) skewX(-25deg) rotate(20deg);
box-shadow: -.1em -.1em 0 #c88e68;
border-radius: 100% 50% 0 0;
&:before {
width: 9em;
height: 3em;
transform: translate3d(1em,0,0);
box-shadow: -.1em -.1em 0 #B35D36;
border-radius: 100% 50% 0 0;
}
&:after {
width: 10em;
height: 2em;
transform: translate3d(2em,0em,0);
box-shadow: -.1em -.1em 0 #c28965;
border-radius: 100% 50% 0 0;
}
}
& i:nth-of-type(11) {
width: 10em;
height: 3em;
transform: translate3d(55em,23em,0) skewX(-25deg) rotate(25deg);
box-shadow: -.1em -.1em 0 #c88e68;
border-radius: 100% 50% 0 0;
&:before {
width: 9em;
height: 3em;
transform: translate3d(1.5em,0,0);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 50% 0 0;
}
&:after {
width: 10em;
height: 2em;
transform: translate3d(3em,0em,0);
box-shadow: -.1em -.1em 0 #c28965;
border-radius: 100% 50% 0 0;
}
}
& i:nth-of-type(12) {
width: 10em;
height: 3em;
transform: translate3d(56em,24em,0) skewX(-45deg) rotate(30deg);
box-shadow: -.1em -.1em 0 #c88e68;
border-radius: 100% 0 0 0;
&:before {
width: 9em;
height: 3em;
transform: translate3d(1.5em,0,0);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 0 0 0;
}
&:after {
width: 10em;
height: 2em;
transform: translate3d(3em,0em,0);
box-shadow: -.1em -.1em 0 #c28965;
border-radius: 100% 0 0 0;
}
}
& i:nth-of-type(13) {
width: 10em;
height: 3em;
transform: translate3d(47em,23em,0) skewX(-30deg) rotate(0deg);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 0 0 0;
&:before {
width: 9em;
height: 3em;
transform: translate3d(1.1em,0,0);
box-shadow: -.1em -.1em 0 #bd8562;
border-radius: 100% 0 0 0;
}
&:after {
width: 10em;
height: 2em;
transform: translate3d(3em,0em,0);
box-shadow: -.1em -.1em 0 #c28965;
border-radius: 100% 0 0 0;
}
}
& i:nth-of-type(14) {
width: 2em;
height: 3em;
transform: translate3d(49em,25em,0) skewX(-30deg) rotate(10deg);
box-shadow: -.1em -.1em 0 #c88e68;
border-radius: 100% 0 0 0;
opacity: .5;
&:before {
width: 2.5em;
height: 3em;
transform: translate3d(2em,-3em,0);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 0 0 0;
}
&:after {
width: 2em;
height: 2em;
transform: translate3d(3em,0em,0);
box-shadow: -.1em -.1em 0 #c28965;
border-radius: 100% 0 0 0;
}
}
& i:nth-of-type(15) {
width: 2em;
height: 3em;
transform: translate3d(53em,25em,0) skewX(-30deg) rotate(30deg);
box-shadow: -.1em -.1em 0 #c88e68;
border-radius: 100% 0 0 0;
opacity: .5;
&:before {
width: 2.5em;
height: 3em;
transform: translate3d(1em,-3em,0);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 0 0 0;
}
&:after {
width: 2em;
height: 2em;
transform: translate3d(1.5em,0em,0);
box-shadow: -.1em -.1em 0 #c28965;
border-radius: 100% 0 0 0;
}
}
& i:nth-of-type(16) {
width: 2em;
height: 3em;
transform: translate3d(55em,25em,0) skewX(-30deg) rotate(30deg);
box-shadow: -.1em -.1em 0 #c88e68;
border-radius: 100% 0 0 0;
opacity: .5;
&:before {
width: 2.5em;
height: 3em;
transform: translate3d(1em,-3em,0);
box-shadow: -.1em -.1em 0 #bd8562;
border-radius: 100% 0 0 0;
}
&:after {
width: 2em;
height: 2em;
transform: translate3d(1.5em,0em,0);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 0 0 0;
}
}
& i:nth-of-type(17) {
width: 3em;
height: 3em;
transform: translate3d(58em,26em,0) skewX(-30deg) rotate(45deg);
box-shadow: -.1em -.1em 0 #c88e68;
border-radius: 100% 0 0 0;
opacity: .75;
&:before {
width: 2.5em;
height: 3em;
transform: translate3d(-1em,-1em,0);
box-shadow: -.1em -.1em 0 #bd8562;
border-radius: 100% 0 0 0;
}
&:after {
width: 3em;
height: 2em;
transform: translate3d(-1.5em,-1.5em,0);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 0 0 0;
}
}
& i:nth-of-type(18) {
width: .5em;
height: 3em;
transform: translate3d(40em,26em,0) rotate(-40deg) skewX(-30deg);
box-shadow: -.1em -.1em 0 #c88e68;
border-radius: 100% 0 0 0;
opacity: .5;
&:before {
width: .5em;
height: 2.5em;
transform: translate3d(-1em,-.5em,0) rotate(-15deg);
box-shadow: -.1em -.1em 0 #bd8562;
border-radius: 100% 0 0 0;
}
&:after {
width: .5em;
height: 2em;
transform: translate3d(-1.5em,-1.5em,0) rotate(-10deg);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 0 0 0;
}
}
& i:nth-of-type(19) {
width: .5em;
height: 3.1em;
transform: translate3d(42em,26em,0) rotate(-40deg) skewX(-35deg);
box-shadow: -.1em -.1em 0 #c88e68;
border-radius: 100% 0 0 0;
opacity: .5;
&:before {
width: .5em;
height: 2.75em;
transform: translate3d(-1em,-.5em,0) rotate(-15deg);
box-shadow: -.1em -.1em 0 #bd8562;
border-radius: 100% 0 0 0;
}
&:after {
width: .5em;
height: 3.2em;
transform: translate3d(-1.5em,-1.5em,0) rotate(-10deg);
box-shadow: -.1em -.1em 0 #9D714C;
border-radius: 100% 0 0 0;
}
}
& i:nth-of-type(20) {
width: .5em;
height: 3.1em;
transform: translate3d(38em,26em,0) rotate(-55deg) skewX(-35deg);
box-shadow: .1em -.1em 0 #c88e68;
border-radius: 0 100% 0 0;
opacity: .5;
&:before {
width: .5em;
height: 2.75em;
transform: translate3d(-1em,-.5em,0) rotate(-15deg);
box-shadow: .1em -.1em 0 #bd8562;
border-radius: 0 100% 0 0;
}
&:after {
width: .5em;
height: 3.2em;
transform: translate3d(-1.5em,-1.5em,0) rotate(-10deg);
box-shadow: .1em -.1em 0 #9D714C;
border-radius: 0 100% 0 0;
}
}
& i:nth-of-type(21) {
width: .5em;
height: 3em;
transform: translate3d(41em,24em,0) rotate(-40deg) skewX(-30deg);
box-shadow: -.1em -.1em 0 #c88e68;
border-radius: 100% 0 0 0;
opacity: .75;
&:before {
width: .5em;
height: 2.5em;
transform: translate3d(-1em,-.5em,0) rotate(-15deg);
box-shadow: -.1em -.1em 0 #bd8562;
border-radius: 100% 0 0 0;
}
&:after {
width: .5em;
height: 2em;
transform: translate3d(-1.5em,-1.5em,0) rotate(-10deg);
box-shadow: -.1em -.1em 0 #905139;
border-radius: 100% 0 0 0;
}
}
& i:nth-of-type(22) {
width: .5em;
height: 3.1em;
transform: translate3d(43em,24em,0) rotate(-40deg) skewX(-35deg);
box-shadow: -.1em -.1em 0 #c88e68;
border-radius: 100% 0 0 0;
opacity: .5;
&:before {
width: .5em;
height: 2.75em;
transform: translate3d(-1em,-.5em,0) rotate(-15deg);
box-shadow: -.1em -.1em 0 #bd8562;
border-radius: 100% 0 0 0;
}
&:after {
width: .5em;
height: 3.2em;
transform: translate3d(-1.5em,-1.5em,0) rotate(-10deg);
box-shadow: -.1em -.1em 0 #9D714C;
border-radius: 100% 0 0 0;
}
}
& i:nth-of-type(23) {
width: .5em;
height: 3.1em;
transform: translate3d(39em,24em,0) rotate(-55deg) skewX(-35deg);
box-shadow: .1em -.1em 0 #c88e68;
border-radius: 0 100% 0 0;
opacity: .5;
&:before {
width: .5em;
height: 2.75em;
transform: translate3d(-1em,-.5em,0) rotate(-15deg);
box-shadow: .1em -.1em 0 #bd8562;
border-radius: 0 100% 0 0;
}
&:after {
width: .5em;
height: 3.2em;
transform: translate3d(-1.5em,-1.5em,0) rotate(-10deg);
box-shadow: .1em -.1em 0 #9D714C;
border-radius: 0 100% 0 0;
}
}
}
righteyebrow:nth-of-type(2) {
transform: translate3d(-6em, 2em, 0) rotate(-7deg) scaleY(1.2);
opacity: .5;
}
nose {
//nostril
//6
& > i:nth-of-type(6) {
width: 4.5em;
height: 4.5em;
border-radius: 45% 45% 20% 0;
overflow: hidden;
/*background: red;*/
transform: translate3d(29.5em, 61em,0) rotate(-40deg) skewX(22deg);
filter: blur(.1em);
&:before {
width: 5em;
height: 5em;
transform: translate3d(2em,-1em, 0) rotate(0deg) skewY(22deg);
background: linear-gradient(to right, #6E0305, #2A0208,#2A0208);
box-shadow: -1em 0 5em -1em #910704, -1em 0 5em -1em #910704, -1em 0 5em 0 #910704, 0 0 2em #910704, 0 0 1em #910704, 0 0 1em #910704;
border-radius: 1em;
}
&:after {
width: 3em;
height: 6em;
transform: translate3d(3.5em, 0em, 0) rotate(40deg) skewX(-8deg);
background: linear-gradient(#2A0208 40%,#910704 60%,#D19063 80%, #D19063);
-webkit-mask-image: linear-gradient(to rgba(#000,.5),#000 );
filter: blur(.1em);
border-radius: 0;
}
}
//nostril
//7
& > i:nth-of-type(7) {
width: 6.5em;
height: 6em;
border-radius: 50% 50% 0 0;
overflow: hidden;
transform: translate3d(40em, 58em,0) rotate(-20deg) skewX(10deg);
filter: blur(.1em);
&:before {
width: 5em;
height: 3em;
transform: translate3d(1em,-1em, 0) rotate(50deg) skewX(-10deg);
background: linear-gradient( #2A0208, #6E0305);
box-shadow: -1em 0 5em -1em #910704, -1em 0 5em -1em #910704, -1em 0 5em 0 #910704, 0 0 2em #910704, 0 0 1em #910704, 0 0 1em #910704;
border-radius: 1em;
}
&:after {
width: 3em;
height: 6em;
transform: translate3d(0em, -2em, 0) rotate(0deg) skewX(10deg);
background: linear-gradient(#480000 40%,#A81506 60%,#E09A7F 80%, #E09A7F);
filter: blur(.1em);
border-radius: 0;
}
}
//3
& > i:nth-of-type(3) {
width: 6em;
height: 6em;
transform: translate3d(34em, 58em,0) rotate(-10deg);
background: linear-gradient(#D77842, #c46331);
box-shadow: 0 0 .5em #CD7D44,0 0 1em #CD7D44,0 0 1em #B2522A;
filter: blur(.5em), contrast(2);
&:after {
width: 10em;
height: 10em;
transform: translate3d(-3em,-9em, 0);
background: radial-gradient( #fff, #F3C693 );
box-shadow: 2em 2em 2em #C6643C;
filter: blur(.5em);
opacity: .5;
}
&:before {
width: 18em;
height: 18em;
transform: translate3d(-5.5em,-11em, 0);
background: radial-gradient( #FBE8D5,#F7BE8C, #F0AD5D,#E9AE6D,#D1742D );
box-shadow: 0 0 2em #B73D15,0 0 2em #B73D15;
-webkit-mask-image: linear-gradient($none, #000, $none);
filter: blur(.25em);
}
}
//nose back
//1
& > i:nth-of-type(1) {
width: 8em;
height: 10em;
transform: translate3d(28em, 54em,0) rotate(15deg);
background: #B63915;
box-shadow: 0 0 2em #B63915,0 0 3em #B63915,0 0 3em #B63915,0 0 3em #B63915;
&:after {
width: 8em;
height: 15em;
border-radius: 2em;
transform: translate3d(7em, -10em, 0) rotate(-65deg);
background: #B63915;
box-shadow: 0 0 2em #B63915,0 0 3em #B63915,0 0 3em #B63915,0 0 3em #B63915;
}
&:before {
width: 8em;
height: 10em;
border-radius: 3em;
transform: translate3d(-1.5em, -4em, 0) rotate(-20deg);
background: #B63915;
box-shadow: 0 0 2em #B63915,0 0 3em #B63915,0 0 3em #B63915,0 0 3em #B63915;
opacity: .5;
}
}
//nostril cuffs
//2
& > i:nth-of-type(2) {
width: 8em;
height: 9em;
transform: translate3d(25.5em, 58em,0) rotate(-10deg);
background: linear-gradient( #E0B478, #CE813E,#C45E32);
box-shadow: 0 1em 1em #CD7D44,0 0 1em #B63915,0 0 1em #B63915, inset 0 0 1em #B63915;
filter: blur(.2em);
/*filter: blur(.5em);*/
&:after {
width: 18em;
height: 18em;
transform: translate3d(3em, -9em,0);
box-shadow: .5em 0 2em #BC4A23,0 0 2em #BC4A23, inset 0 0 1em #BC4A23, inset 0 0 2em #BC4A23;
-webkit-mask-image: linear-gradient($none 10%, #000 40%,$none, $none);
}
&:before {
width: 8em;
height: 12em;
border-radius: 2em 60% 60% 2em;
transform: translate3d(16.5em, -5em,0) rotate(-45deg) skewY(10deg);
background: linear-gradient( #DD9A4B, #CE8942,#A31A0C);
box-shadow: 0 0 1em #C54611,0 0 .5em #A31A0C,inset 0 0 1em #A31A0C;
opacity: .9;
}
}
//hilites
//4
& > i:nth-of-type(4) {
width: 12em;
height: 12em;
transform: translate3d(28em, 43em,0);
background: linear-gradient( rgba(#F3B552, .85), rgba(#FCCA94,.5));
filter: blur(.75em);
&:after {
width: 8em;
height: 3em;
border-radius: 1.5em;
transform: translate3d(-2em, 15em,0) rotate(-60deg) skewX(45deg);
background: #E5C08C;
}
&:before {
width: 5em;
height: 4em;
border-radius: 1.5em;
transform: translate3d(13em, 12em,0) rotate(20deg) skewX(-45deg);
background: #E5C08C;
box-shadow: 1em 1em 1em #C96726;
}
}
//hilites2
//8
& > i:nth-of-type(8) {
width: 1.25em;
height: 2em;
transform: translate3d(31.5em, 64em,0) rotate(20deg);
background: #f1ddc1;
filter: blur(.5em);
box-shadow: 0 0 .5em #BF5521;
&:after {
width: 3em;
height: 1.75em;
border-radius: 1em;
background: #E5C08C;
transform: translate3d(-3em, .25em, 0) rotate(-20deg);
opacity: .9;
}
&:before {
width: 3em;
height: 5em;
border-radius: 1.5em;
background: #E6B37A;
transform: translate3d(1.5em, -1.5em, 0) rotate(-20deg);
opacity: .9;
}
}
//5
& > i:nth-of-type(5) {
width: 7.5em;
height: 15em;
border-radius: 2em 80% 2em 2em;
transform: translate3d(37.5em, 47.5em,0) rotate(-45deg) skewX(5deg);
background: linear-gradient(#EDAE77, #E2B966);
filter: blur(.5em);
opacity: .4;
&:after {
width: 7em;
height: 3em;
background: #930907;
transform: translate3d(-2em, 10em, 0) rotate(25deg);
}
&:before {
width: 6em;
height: 3em;
background: #930907;
transform: translate3d(-12em, 3.5em, 0) rotate(25deg);
}
}
//9
& > i:nth-of-type(9) {
width: 4em;
height: 5em;
border-radius: 2em;
transform: translate3d(40.5em, 60.5em,0);
background: #ECBD92;
filter: blur(.5em);
/*opacity: .4;*/
&:after {
width: 5em;
height: 6em;
background: #910704;
transform: translate3d(-4.5em, 0em, 0);
opacity: .3;
filter: blur(.5em);
}
&:before {
width: 4.5em;
height: 3em;
background: #d18b3e;
transform: translate3d(3em, -7.5em, 0) rotate(25deg);
box-shadow: .5em 0 .5em -.5em #910704;
opacity: .8;
filter: blur(.5em);
}
}
}
mouth {
& > i:nth-of-type(1) {
width: 43em;
height: 20em;
background: #EEBD83;
/*background: yellow;*/
transform: translate3d(23em,70em,0) rotate(-17deg);
overflow: hidden;
& > i:nth-of-type(1) {
width: 43em;
height: 7em;
background: #070305;
transform: translate3d(0em,7em,0);
overflow: hidden;
border-radius: 0;
& > i:nth-of-type(9) {
width: 5em;
height: 5em;
background: #BBBCB7;
transform: translate3d(15em, -2em, 0) skewY(5deg);
border-radius: .75em;
box-shadow: inset -1em 0 .5em #BBBCB7, inset 0 -.5em .5em #a37f77;
&:after {
width: 3em;
height: 5em;
background: #BBBCB7;
transform: translate3d(-.5em,.25em, 0) skewY(-20deg);
border-radius: 0 0 2em 2em / 0 0 2em 4em;
box-shadow: inset 0 -.5em .5em #B3A4A6, inset .75em 0 .5em #A28796;
}
&:before {
width: .5em;
height: .3em;
background: #fff;
transform: translate3d(8.5em, 5.7em, 0);
}
}
& > i:nth-of-type(5) {
width: 4em;
height: 5em;
background: #9A939B;
transform: translate3d(21em, -2em, 0) skewY(-2deg);
border-radius: .75em;
box-shadow: inset 1em 0 .5em #896D72;
&:after {
width: 4em;
height: 5em;
background: #a8a3a9;
transform: translate3d(1.6em,.5em, 0) skewY(11deg) skewX(-10deg);
border-radius: 0 0 1.5em .5em / 0 0 3em .5em;
box-shadow: inset 1em -1em .5em #9f9aa0, inset -1em 0 1em #896D72, inset 1em -1em .5em #a39da4;
}
&:before {
width: 2em;
height: 2em;
background: #EFC29E;
transform: translate3d(-1.5em, 5em, 0) rotate(20deg);
border-radius: .5em;
filter: blur(.5em);
opacity: .1;
}
}
& > i:nth-of-type(4) {
width: 3em;
height: 4.25em;
background: #5d374a;
transform: translate3d(27em, -1.5em, 0) rotate(5deg);
border-radius: 0 0 2em 1.5em / 0 0 1.5em 2em;
box-shadow: inset 0 -.5em .5em rgba( #A497A1,.5), inset 0 0 1em #34202a, inset 0 -.5em 1em #452b38, inset -.5em 0 .5em #fff, -.25em .5em .5em .5em rgba(#0B0002,.5), inset -.5em 0 .5em #fff;
&:before {
width: 4em;
height: 5em;
background: linear-gradient(to right, #260806, #7E3D4A);
transform: translate3d(3em,0, 0) rotate(30deg) skewY(-5deg);
border-radius: 0 0 .5em 3em / 0 0 4em 3em;
box-shadow: inset 0 -.5em 1em #452b38, inset -.5em 0 .5em #fff, .25em .5em .5em .5em rgba(#0B0002,.5);
}
&:after {
width: 2.5em;
height: 4.5em;
background: linear-gradient(to right, #260806, #320F10);
transform: translate3d(7.5em,0, 0) rotate(30deg) skewY(-5deg);
border-radius: 0 0 1.5em .5em / 0 0 3em .5em;
box-shadow: inset 0 -.5em 1em -.5em #452b38;
}
}
& > i:nth-of-type(2) {
width: 20em;
height: 20em;
background: linear-gradient(#180405, #72130F);
transform: translate3d(35em, -1.5em, 0) rotate(20deg);
&:before {
background: radial-gradient(#93342F,#9F111C);
width: 5em;
height: 5em;
border-radius: 1em;
transform: translate3d(-11em,8em, 0);
filter: blur(1em);
}
&:after {
background: radial-gradient(#8A1410,#8F2B20);
width: 6em;
height: 5em;
border-radius: 2em;
transform: translate3d(-16em,10em, 0);
filter: blur(1em);
}
}
& > i:nth-of-type(7) {
width: 3em;
height: 5em;
background: #B4CFCC;
border-radius: .75em;
transform: translate3d(32em, 6em, 0) rotate(-5deg);
box-shadow: 0 -.5em .5em #73642C, inset 0 0 .25em #73642C, 0 -.5em 0 #B4CFCC, .5em 0 0 #73642C;
&:before {
width: 5em;
height: 2em;
background: #B4CFCC;
border-radius: 1em;
transform: translate3d(-.5em, .5em, 0) rotate(60deg) skewY(-20deg);
box-shadow: 0 -.25em .25em #73642C, inset 0 0 .5em #73642C;
}
&:after {
width: 3em;
height: 3em;
background: #B4CFCC;
transform: translate3d(-25em, -4.5em, 0);
box-shadow: 0 0 .25em #73642C, inset 0 0 .5em #73642C;
}
}
& > i:nth-of-type(8) {
width: 4em;
height: 6em;
background: rgba(#010002,.4);
border-radius: 2em;
transform: translate3d(11em, -2.5em, 0) rotate(0deg) skewY(5deg);
box-shadow: 0 0 1em rgba(#010002,.4);
&:after {
width: 3.5em;
height: 5em;
background: linear-gradient(to right, #62303F, #936A78);
border-radius: 0 0 1em 1.5em / 0 0 1em 5em;
box-shadow: inset 0 0 .5em #62303F, inset -.5em 0 .5em #B4CFCC;
transform: translate3d(0, 0, 0);
}
&:before {
width: 3.5em;
height: 5em;
background: linear-gradient(to right, #370B0D, #280406);
border-radius: 2em;
box-shadow: 3em 0 .5em rgba(#170506,.5), inset -.5em 0 .5em #170506, 0 0 1.5em #170506, 1em .2em .1em rgba(#170506,.5);
transform: translate3d(-3.5em, .75em, 0);
}
}
//shadows
& > i:nth-of-type(3) {
width: 6em;
height: 6em;
background: rgba(#0B0002,.5);
border-radius: 2em;
transform: translate3d(15em, -2em, 0) skewY(-10deg);
filter: blur(.25em);
&:before {
width: 7em;
height: 7em;
background: rgba(#0B0002,.5);
border-radius: 2em;
transform: translate3d(5em, 0, 0) skewY(5deg);
}
}
$tshad: #400505;
& > i:nth-of-type(10) {
width: 6.5em;
height: 2em;
border: 5em solid $none;
border-top-color: $tshad;
transform: translate3d(9em, -3em, 0) rotate(7deg);
box-sizing: content-box;
filter: blur(.15em);
opacity: .75;
&:before {
width: 4em;
height: 6em;
background: linear-gradient( to right, rgba($tshad,.3 ), $tshad);
transform: translate3d(-3.5em, -5.75em, 0) rotate(-5deg);
border-radius: 0;
}
&:after {
width: 6em;
height: 6em;
background: linear-gradient( to right, rgba($tshad,.8 ), $tshad);
transform: translate3d(6em, -6.5em, 0) rotate(-15deg);
border-radius: 0;
}
}
& > i:nth-of-type(11) {
width: 3em;
height: 3em;
border: 5em solid $none;
border-top-color: $tshad;
transform: translate3d(21.5em, -3.25em, 0) rotate(7deg);
box-sizing: content-box;
filter: blur(.15em);
opacity: .6;
&:before {
width: 4.5em;
height: 6em;
background: $tshad;
transform: translate3d(4em,-5.5em, 0) rotate(-7deg) skewX(-30deg);
border-radius: 0;
}
}
& > i:nth-of-type(12) {
width: 16em;
height: 5em;
transform: translate3d(16em, 6em, 0) rotate(-7deg);
box-shadow: 0 0 1em #050402;
&:before {
width: 16em;
height: 5em;
transform: translate3d(-10em, -2em, 0) rotate(14deg);
box-shadow: 0 0 1em #050402;
background: #A22429;
}
&:after {
width: .5em;
height: .5em;
background: #C3BDBD;
transform: translate3d(5em, -.5em, 0);
box-shadow: .5em 0 0 0 rgba(#C3BDBD,.75), 1em 0 0 -.1em rgba(#C3BDBD,.5);
opacity: .5;
}
}
//tongue
& > i:nth-of-type(1) {
width: 23em;
height: 24em;
background: linear-gradient( #471A17, #541717);
transform: translate3d(9.5em, -12em, 0);
overflow: hidden;
box-shadow: inset 0 0 2em #000202;
&:after {
width: 30em;
height: 15em;
background: radial-gradient(#8F2720,#571719);
transform: translate3d(-4em,3em,0);
box-shadow: 0 0 .5em #571719;
}
}
}
//lips
$lip: $none;
& > i:nth-of-type(2) {
&:before {
background: linear-gradient(to right, #E5B582, #AB6235);
width: 25em;
height: 9em;
transform: translate3d(24em,-1em,0) rotate(10deg);
border-radius: 10em 10em 0 0;
}
&:after {
background: #faeab6;
height: 1.5em;
width: 1.5em;
transform: translate3d(20em,4em,0) rotate(-18deg);
box-shadow: 1.5em 0 0 -.15em #fff, 2.5em 0 0 -.25em rgba(#fff,.5),3.25em .25em 0 -.3em rgba(#fff,.8), 4em .5em 0 -.35em rgba(#fff,.5);
filter: blur(.2em);
opacity: .5;
}
& > i:before, & > i:after {
filter: blur(.1em);
border-radius: 1.25em;
opacity: .6;
}
& > i:nth-of-type(9) {
background: linear-gradient( $lip,#BF363A, #290309);
width: 3.5em;
height: 3.75em;
transform: translate3d(20.5em,4.75em,0) skewY(-10deg);
border-radius: .5em;
&:before {
background: linear-gradient( #D2403B, #A51B23);
width: 2em;
height: 3.1em;
transform: translate3d(0,0em,0) skewX(-2deg) skewY(-5deg);
border-radius: .5em;
}
&:after {
background: linear-gradient( #D04043,#A51B23 );
width: 2.1em;
height: 3.2em;
transform: translate3d(1.5em,-.1em,0) skewX(-1deg) skewY(1deg);
border-radius: .5em;
}
}
& > i:nth-of-type(8) {
background: linear-gradient( $lip,#8F1822, #290309);
width: 3.5em;
height: 3.75em;
transform: translate3d(23.5em,4.25em,0) skewY(-5deg);
border-radius: .5em;
/*box-shadow: 0 1em 1em -.5em #180506;*/
/*background: #fff;*/
&:before {
background: linear-gradient( #D25B55, #A62528);
width: 2em;
height: 3em;
transform: translate3d(0,.2em,0) skewX(-3deg) skewY(-5deg);
border-radius: .5em;
}
&:after {
background: linear-gradient( #D25B55,#A62528 );
width: 2.3em;
height: 2.9em;
transform: translate3d(1.5em,.3em,0) skewX(-4deg) skewY(1deg);
border-radius: .5em;
}
}
& > i:nth-of-type(7) {
background: linear-gradient( $lip,#BF363A, #290309);
width: 3.5em;
height: 3.75em;
transform: translate3d(26em,4.25em,0) skewY(0deg);
border-radius: .5em;
&:before {
background: linear-gradient( #BC2E3A, #85111D);
width: 2.1em;
height: 2.8em;
transform: translate3d(0,.4em,0) skewX(-5deg) skewY(-5deg);
border-radius: .5em;
}
&:after {
background: linear-gradient( #C64048,#85111D );
width: 2em;
height: 2.7em;
transform: translate3d(1.5em,.5em,0) skewX(-6deg) skewY(1deg);
border-radius: .5em;
}
}
& > i:nth-of-type(6) {
background: linear-gradient( $lip,#93212c, #290309);
width: 3.5em;
height: 3.75em;
transform: translate3d(29em,4.5em,0) skewX(-5deg) rotate(10deg);
border-radius: .5em;
&:before {
background: linear-gradient( #D2403B, #A51B23);
width: 2.1em;
height: 2.6em;
transform: translate3d(0,.7em,0) skewX(-7deg) skewY(-5deg);
border-radius: .5em;
}
&:after {
background: linear-gradient( #D04043,#A51B23 );
width: 2.2em;
height: 2.5em;
transform: translate3d(1.5em,.8em,0) skewX(-8deg) skewY(1deg);
border-radius: .5em;
}
}
& > i:nth-of-type(5) {
background: linear-gradient( $lip 10%, #9a242c, #290309);
width: 3.5em;
height: 3.75em;
transform: translate3d(32em,5em,0) skewX(-10deg) rotate(10deg);
border-radius: .5em;
&:before {
background: linear-gradient( #992327, rgba(#841119,.8));
width: 2em;
height: 2.4em;
transform: translate3d(0,.9em,0) skewY(-5deg);
border-radius: .5em;
}
&:after {
background: linear-gradient( #992327, rgba(#841119,.8));
width: 2.3em;
height: 2.3em;
transform: translate3d(1.5em,1em,0) skewY(1deg);
border-radius: .5em;
}
}
& > i:nth-of-type(4) {
background: linear-gradient( $lip 15%,#6E1B1F, #290309);
width: 3.5em;
height: 3.75em;
transform: translate3d(35em,5.75em,0) skewX(-10deg) rotate(15deg);
border-radius: .5em;
&:before {
background: linear-gradient( #6C1917, rgba(#6C1917,.7));
width: 2.1em;
height: 2.2em;
transform: translate3d(0,1.1em,0) skewY(-5deg);
border-radius: .5em;
}
&:after {
background: linear-gradient( #6C1917, rgba(#6C1917,.7));
width: 2.4em;
height: 2.1em;
transform: translate3d(1.5em,1.2em,0) skewY(1deg);
border-radius: .5em;
}
}
& > i:nth-of-type(3) {
background: linear-gradient( $lip 20%,#6E181D, #290309);
width: 3.5em;
height: 3.75em;
transform: translate3d(37.5em,6.25em,0) skewX(-10deg) rotate(10deg);
border-radius: .5em;
&:before {
background: linear-gradient( #6C1917, rgba(#6C1917,.6));
width: 2em;
height: 2.2em;
transform: translate3d(0,1.3em,0) skewY(-5deg);
border-radius: .5em;
}
&:after {
background: linear-gradient( #6C1917, rgba(#6C1917,.6));
width: 2em;
height: 1.9em;
transform: translate3d(1.5em,1.4em,0) skewY(1deg);
border-radius: .5em;
}
}
& > i:nth-of-type(2) {
background: linear-gradient( $lip 30%,#631119, #290309);
width: 3.5em;
height: 3.75em;
transform: translate3d(40em,6.75em,0) skewX(-10deg) rotate(10deg);
border-radius: .5em;
&:before {
background: linear-gradient( #6C1917, rgba(#6C1917,.5));
width: 2.1em;
height: 1.8em;
transform: translate3d(0,1.5em,0) skewY(-5deg);
border-radius: .5em;
}
&:after {
background: linear-gradient( #6C1917, rgba(#6C1917,.5));
width: 2em;
height: 1.7em;
transform: translate3d(1.5em,1.6em,0) skewY(1deg);
border-radius: .5em;
}
}
}
//left
//left
//left
& > i:nth-of-type(3) {
&:before {
background: linear-gradient( to right, #B36232, #E6A47E);
width: 25em;
height: 9em;
transform: translate3d(-8em,-1em,0) rotate(-10deg);
border-radius: 10em 10em 0 0;
}
&:after {
background: #faeab6;
height: 1.5em;
width: 1.5em;
transform: translate3d(20em,4em,0) rotate(18deg);
box-shadow: -1.5em 0 0 -.15em #fff, -2.5em 0 0 -.25em rgba(#fff,.5), -3.25em .25em 0 -.3em rgba(#fff,.8), -4em .5em 0 -.35em rgba(#fff,.5);
filter: blur(.2em);
opacity: .5;
}
& > i:before, & > i:after {
filter: blur(.1em);
border-radius: 1.25em;
opacity: .6;
}
& > i:nth-of-type(9) {
background: linear-gradient( $lip 20%,#BF363A, #290309);
width: 3.5em;
height: 3.75em;
transform: translate3d(17em,4.75em,0) rotate(-20deg) skewY(25deg);
border-radius: .5em;
&:before {
background: linear-gradient( #D2403B, #A51B23);
width: 2em;
height: 3.1em;
transform: translate3d(0,0em,0) skewX(2deg) skewY(5deg);
border-radius: .5em;
}
&:after {
background: linear-gradient( #D04043,#A51B23 );
width: 2.1em;
height: 3.2em;
transform: translate3d(1.5em,-.1em,0) skewX(1deg) skewY(-1deg);
border-radius: .5em;
}
}
& > i:nth-of-type(8) {
background: linear-gradient( $lip 30%,#8F1822, #290309);
width: 3.5em;
height: 3.75em;
transform: translate3d(14em, 4.5em, 0) rotate(-20deg) skewY(25deg);
border-radius: .5em;
&:before {
background: linear-gradient( #D25B55, #A62528);
width: 2em;
height: 3.2em;
transform: translate3d(0,0em,0) skewX(3deg) skewY(5deg);
border-radius: .5em;
}
&:after {
background: linear-gradient( #D25B55,#A62528 );
width: 2.3em;
height: 3.4em;
transform: translate3d(1.5em,0em,0) skewX(4deg) skewY(-1deg);
border-radius: .5em;
}
}
& > i:nth-of-type(7) {
background: linear-gradient( $lip 40%,#BF363A, #290309);
width: 3.5em;
height: 3.75em;
transform: translate3d(11em,4.25em,0) rotate(-15deg) skewY(20deg);
border-radius: .5em;
&:before {
background: linear-gradient( #BC2E3A, #85111D);
width: 2.1em;
height: 2.5em;
transform: translate3d(0,1em,0) skewX(5deg) skewY(5deg);
border-radius: .5em;
}
&:after {
background: linear-gradient( #C64048,#85111D );
width: 2em;
height: 2.5em;
transform: translate3d(1.5em,.5em,0) skewX(6deg) skewY(-1deg);
border-radius: .5em;
}
}
& > i:nth-of-type(6) {
background: linear-gradient( $lip 50%,#93212c, #290309);
width: 3.5em;
height: 3.75em;
transform: translate3d(8em,4.25em,0) skewX(5deg) rotate(-10deg);
border-radius: .5em;
&:before {
background: linear-gradient( #D2403B, #A51B23);
width: 2.1em;
height: 2.6em;
transform: translate3d(0,.7em,0) skewX(7deg) skewY(5deg);
border-radius: .5em;
}
&:after {
background: linear-gradient( #D04043,#A51B23 );
width: 2.2em;
height: 2.5em;
transform: translate3d(1.5em,.8em,0) skewX(8deg) skewY(-1deg);
border-radius: .5em;
}
}
& > i:nth-of-type(5) {
background: linear-gradient( $lip 40%, $lip, #9a242c, #290309);
width: 3.5em;
height: 3.75em;
transform: translate3d(5em,4.5em,0) skewX(10deg) rotate(-10deg);
border-radius: .5em;
&:before {
background: linear-gradient( #992327, rgba(#841119,.8));
width: 2em;
height: 1.7em;
transform: translate3d(0,2.05em,0) skewY(5deg);
border-radius: .5em;
}
&:after {
background: linear-gradient( #992327, rgba(#841119,.8));
width: 2.3em;
height: 1.9em;
transform: translate3d(1.5em,1.85em,0) skewY(-1deg);
border-radius: .5em;
}
}
& > i:nth-of-type(4) {
background: linear-gradient( $lip 50%, $lip 70%,#6E1B1F 90%, #290309);
width: 3.5em;
height: 3.75em;
transform: translate3d(2em,4.75em,0) skewX(10deg) rotate(0deg);
border-radius: .5em;
&:before {
background: linear-gradient( #6C1917, rgba(#6C1917,.7));
width: 2.1em;
height: 1.1em;
transform: translate3d(0,2.65em,0) skewY(5deg);
border-radius: .5em;
}
&:after {
background: linear-gradient( #6C1917, rgba(#6C1917,.7));
width: 2.4em;
height: 1.5em;
transform: translate3d(1.5em,2.25em,0) skewY(-1deg);
border-radius: .5em;
}
}
& > i:nth-of-type(3) {
background: linear-gradient( $lip 50%, $lip,#6E181D, #290309);
width: 3.5em;
height: 3.75em;
transform: translate3d(-.3em,5em,0) skewX(40deg) rotate(-5deg);
border-radius: .5em;
&:before {
background: linear-gradient( #6C1917, rgba(#6C1917,.6));
width: 2em;
height: .8em;
transform: translate3d(0,2.95em,0) skewY(5deg);
border-radius: .5em;
}
&:after {
background: linear-gradient( #6C1917, rgba(#6C1917,.6));
width: 2em;
height: .75em;
transform: translate3d(1.5em,3em,0) skewY(-1deg);
border-radius: .5em;
}
}
}
//bottom
& > i:nth-of-type(4) {
& > i:nth-of-type(4) {
background: #B72327;
width: 17em;
height: 2em;
transform: translate3d(18em, 13em, 0) rotate(1deg);
&:before {
background: #B72327;
width: 16em;
height: 2em;
transform: translate3d(-13em, -1em, 0) rotate(7deg);
}
&:after {
background: #B72327;
width: 5em;
height: 2em;
transform: translate3d(-14em, -1.75em, 0) rotate(20deg);
}
}
& > i:nth-of-type(3) {
background: #B72327;
width: 7em;
height: 2em;
transform: translate3d(0em, 9.75em, 0) rotate(25deg);
&:before {
background: #B72327;
width: 12em;
height: 3em;
border-radius: 40%;
transform: translate3d(29em, -11.5em, 0) rotate(-60deg);
}
&:after {
background: #B72327;
width: 10em;
height: 2em;
transform: translate3d(26em, -9em, 0) rotate(-35deg);
}
}
& > i:nth-of-type(5) {
width: 43.5em;
height: 30em;
transform: translate3d(-.5em, -10.5em, 0) rotate(5deg);
overflow: hidden;
&:before {
background: #B72327;
width: 50em;
height: 50em;
transform: translate3d(-4.5em, 24.5em, 0) rotate(5deg);
border-radius: 0;
}
&:after {
background: #B72327;
width: 10em;
height: 2em;
transform: translate3d(25em, 24em, 0);
border-radius: 0;
}
}
& > i:nth-of-type(2) {
width: 30em;
height: 10em;
transform: translate3d(-4em, 14em, 0) rotate(25deg);
background: #B37F50;
border-radius: 0;
&:before {
background: #C07A55;
width: 30em;
height: 10em;
transform: translate3d(21.5em,-10em, 0) rotate(-50deg);
border-radius: 0;
}
}
& > i:nth-of-type(6) {
width: 2em;
height: 5em;
transform: translate3d(21em, 14em, 0) rotate(-5deg);
background: linear-gradient($none, #f8e9eb,#A22429);
border-radius: 1em;
border-right: .25em solid #A22429;
opacity: .5;
-webkit-mask-image: linear-gradient($none,#000);
&:before {
width: 2em;
height: 5em;
transform: translate3d(-1em, 0em, 0) rotate(5deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .25em solid #A22429;
}
&:after {
width: 2em;
height: 5em;
transform: translate3d(-1.5em, 0em, 0) rotate(10deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .25em solid #A22429;
}
}
& > i:nth-of-type(7) {
width: 2em;
height: 5em;
transform: translate3d(19.5em, 14em, 0) rotate(0deg);
background: linear-gradient($none, #f8e9eb,#A22429);
border-radius: 1em;
border-right: .25em solid #A22429;
opacity: .5;
-webkit-mask-image: linear-gradient($none,#000);
&:before {
width: 2em;
height: 5em;
transform: translate3d(-1em, 0em, 0) rotate(5deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .25em solid #A22429;
}
&:after {
width: 2em;
height: 5em;
transform: translate3d(-2em, 0em, 0) rotate(10deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .25em solid #A22429;
}
}
& > i:nth-of-type(8) {
width: 2em;
height: 5em;
transform: translate3d(18em, 14em, 0) rotate(5deg);
background: linear-gradient($none, #f8e9eb,#A22429);
border-radius: 1em;
border-right: .15em solid #A22429;
opacity: .5;
-webkit-mask-image: linear-gradient($none,#000);
&:before {
width: 2em;
height: 5em;
transform: translate3d(-1em, 0em, 0) rotate(5deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em .5em 1.5em;
border-right: .25em solid #A22429;
}
&:after {
width: 2em;
height: 5em;
transform: translate3d(-1.5em, 0em, 0) rotate(10deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .25em solid #A22429;
}
}
& > i:nth-of-type(9) {
width: 2em;
height: 5em;
transform: translate3d(17em, 13.75em, 0) rotate(10deg);
background: linear-gradient($none, #f8e9eb,#A22429);
border-radius: 1em;
border-right: .25em solid #A22429;
opacity: .5;
-webkit-mask-image: linear-gradient($none,#000);
&:before {
width: 2em;
height: 5em;
transform: translate3d(-1em, 0em, 0) rotate(5deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .15em solid #A22429;
}
&:after {
width: 2em;
height: 5em;
transform: translate3d(-1.5em, 0em, 0) rotate(10deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 2em 0em;
border-right: .25em solid #A22429;
}
}
& > i:nth-of-type(10) {
width: 2em;
height: 5em;
transform: translate3d(16em, 13.5em, 0) rotate(11deg);
background: linear-gradient($none, #f8e9eb,#A22429);
border-radius: 1em;
border-right: .25em solid #A22429;
opacity: .5;
-webkit-mask-image: linear-gradient($none,#000);
&:before {
width: 2em;
height: 5em;
transform: translate3d(-1em, 0em, 0) rotate(5deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .15em solid #A22429;
}
&:after {
width: 2em;
height: 5em;
transform: translate3d(-1.5em, 0em, 0) rotate(10deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .15em solid #A22429;
}
}
& > i:nth-of-type(11) {
width: 2em;
height: 4.5em;
transform: translate3d(15em, 13.75em, 0) rotate(12deg);
background: linear-gradient($none, #f8e9eb,#A22429);
border-radius: 1em;
border-right: .15em solid #A22429;
opacity: .5;
-webkit-mask-image: linear-gradient($none,#000);
&:before {
width: 2em;
height: 5em;
transform: translate3d(-1em, 0em, 0) rotate(5deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .25em solid #A22429;
}
&:after {
width: 2em;
height: 5em;
transform: translate3d(-1.5em, 0em, 0) rotate(10deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .15em solid #A22429;
}
}
& > i:nth-of-type(12) {
width: 2em;
height: 4em;
transform: translate3d(13em, 13.5em, 0) rotate(13deg);
background: linear-gradient($none, rgba(#f8e9eb,.8),#A22429);
border-radius: 1em;
border-right: .15em solid #A22429;
opacity: .4;
-webkit-mask-image: linear-gradient($none,#000);
&:before {
width: 2em;
height: 5em;
transform: translate3d(-1em, 0em, 0) rotate(5deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .25em solid #A22429;
}
&:after {
width: 2em;
height: 5em;
transform: translate3d(-1.5em, 0em, 0) rotate(10deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .15em solid #A22429;
}
}
& > i:nth-of-type(13) {
width: 3em;
height: 3em;
transform: translate3d(10em, 13.5em, 0) rotate(14deg);
background: linear-gradient($none, rgba(#f8e9eb,.8),#A22429);
border-radius: 1em;
border-right: .15em solid #A22429;
opacity: .3;
-webkit-mask-image: linear-gradient($none,#000);
&:before {
width: 2em;
height: 5em;
transform: translate3d(-1em, 0em, 0) rotate(5deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .25em solid #A22429;
}
&:after {
width: 2em;
height: 5em;
transform: translate3d(-1.5em, 0em, 0) rotate(10deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .15em solid #A22429;
}
}
& > i:nth-of-type(14) {
width: 4em;
height: 3em;
transform: translate3d(7em, 12.5em, 0) rotate(15deg);
background: linear-gradient($none, rgba(#f8e9eb,.8),#A22429);
border-radius: 1em;
border-right: .15em solid #A22429;
opacity: .2;
-webkit-mask-image: linear-gradient($none,#000);
&:before {
width: 2em;
height: 5em;
transform: translate3d(-1em, 0em, 0) rotate(5deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .25em solid #A22429;
}
&:after {
width: 2em;
height: 5em;
transform: translate3d(-1.5em, 0em, 0) rotate(10deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .15em solid #A22429;
}
}
& > i:nth-of-type(15) {
width: 4em;
height: 3em;
transform: translate3d(3em, 11em, 0) rotate(18deg);
background: linear-gradient($none, rgba(#f8e9eb,.8),#A22429);
border-radius: 1em;
border-right: .15em solid #A22429;
opacity: .2;
-webkit-mask-image: linear-gradient($none,#000);
&:before {
width: 2em;
height: 5em;
transform: translate3d(-1em, 0em, 0) rotate(5deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .15em solid #A22429;
}
&:after {
width: 2em;
height: 5em;
transform: translate3d(-1.5em, 0em, 0) rotate(10deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .15em solid #A22429;
}
}
& > i:nth-of-type(17) {
width: 13em;
height: 5em;
transform: translate3d(8em, 12.5em, 0) rotate(10deg);
background: radial-gradient(rgba(#f8e9eb,.1),$none, $none);
box-shadow: -.5em -.5em 0 #B42423;
&:before {
width: 10em;
height: 2em;
transform: translate3d(5em, 3em, 0) rotate(-5deg);
background: radial-gradient(rgba(#f8e9eb,.3),$none);
-webkit-mask-image: linear-gradient(to right,$none,#000, $none);
border-bottom: .5em double rgba(#A62720,.5);
}
&:after {
width: .5em;
height: .5em;
background: rgba(#f8e9eb,.3);
transform: translate3d(6em, 1.75em, 0);
box-shadow: 1em 0 0 rgba(#f8e9eb,.5), 1.5em 0 0 rgba(#f8e9eb,.3), 2.5em 0 0 -.25em rgba(#f8e9eb,.3);
}
}
& > i:nth-of-type(16) {
width: 5em;
height: 2em;
transform: translate3d(4em, 11em, 0) rotate(15deg);
background: radial-gradient(rgba(#f8e9eb,.2), #B42423);
&:before {
width: 6em;
height: 4em;
transform: translate3d(2.5em, -.5em, 0) rotate(-5deg);
background: radial-gradient(rgba(#f8e9eb,.1), #B42423);
-webkit-mask-image: linear-gradient(to right,#000, $none);
}
&:after {
}
}
& > i:nth-of-type(18) {
width: 2em;
height: 5em;
transform: translate3d(24em, 14em, 0) rotate(-5deg);
background: linear-gradient($none, rgba(#f8e9eb,.1),#A22429);
border-radius: 1em;
border-right: .25em solid #A22429;
opacity: .5;
-webkit-mask-image: linear-gradient($none,#000);
&:before {
width: 2em;
height: 5em;
transform: translate3d(-1em, 0em, 0) rotate(5deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .25em solid #A22429;
}
&:after {
width: 2em;
height: 5em;
transform: translate3d(-1.5em, 0em, 0) rotate(10deg);
background: linear-gradient($none, #ede3e5,#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .25em solid #A22429;
}
}
& > i:nth-of-type(19) {
width: 3em;
height: 5em;
transform: translate3d(26em, 14em, 0) rotate(-10deg);
background: linear-gradient($none, rgba(#f8e9eb,.3),#A22429);
border-right: .25em solid #A22429;
opacity: .5;
-webkit-mask-image: linear-gradient($none,#000);
&:before {
width: 2em;
height: 5em;
transform: translate3d(-.5em, 0em, 0) rotate(5deg);
background: linear-gradient($none, rgba(#f8e9eb,.1),#A22429);
border-right: .25em solid #A22429;
}
&:after {
width: 2em;
height: 5em;
transform: translate3d(-2em, 0em, 0) rotate(10deg);
background: linear-gradient($none, rgba(#f8e9eb,.1),#A22429);
border-radius: 1em 1em 1.5em .5em;
border-right: .25em solid #A22429;
}
}
& > i:nth-of-type(20) {
width: 5em;
height: 5em;
transform: translate3d(28em, 14em, 0);
border-radius: 0 50% 50% 0;
border-right: .25em solid #86181F;
opacity: .9;
-webkit-mask-image: linear-gradient($none,#000);
&:before {
width: 4em;
height: 5em;
transform: translate3d(-3em, 0, 0);
border-right: .25em solid #86181F;
-webkit-mask-image: linear-gradient($none,#000);
}
&:after {
width: 5em;
height: 5em;
transform: translate3d(-4em, 0, 0);
border-right: .25em solid #86181F;
-webkit-mask-image: linear-gradient($none,#000);
}
}
& > i:nth-of-type(21) {
width: 10em;
height: 2em;
transform: translate3d(21em, 15em, 0) rotate(-5deg);
background: radial-gradient(#FAE2B9,$none);
opacity: .1;
&:before {
width: 10em;
height: 4em;
transform: translate3d(0em, -2em, 0) rotate(5deg);
background: radial-gradient(#FAE2B9,$none,$none);
}
&:after {
width: 2em;
height: 4em;
transform: translate3d(12em, 1em, 0) rotate(10deg) skewX(-20deg);
background: #FAE2B9;
}
}
}
}
& > i:nth-of-type(2) {
width: 12em;
height: 15em;
background: radial-gradient(#EAB675,#F4D0B5, #F4D0B5);
transform: translate3d(34em, 61em, 0) rotate(-18deg);
border-radius: 6em;
filter: blur(1em);
&:before {
width: 20em;
height: 12em;
background: linear-gradient(to bottom right, #EDC097,#B65A32);
transform: translate3d(12em, 5em, 0) rotate(18deg);
border-radius: 2em;
}
&:after {
width: 20em;
height: 12em;
background: linear-gradient(to bottom left, #F1C9A2,#B7572E);
transform: translate3d(-20em, 4.5em, 0) rotate(-15deg);
border-radius: 2em;
}
}
& > i:nth-of-type(3) {
width: 12em;
height: 15em;
transform: translate3d(34em, 61em, 0) rotate(-18deg);
border-radius: 6em;
filter: blur(1em);
&:before {
width: 18em;
height: 5em;
background: #EEBC86;
transform: translate3d(12em, 1em, 0) rotate(40deg);
border-radius: 2em;
}
&:after {
width: 20em;
height: 5em;
background: #E4B368;
transform: translate3d(-16em, -3em, 0) rotate(-60deg);
border-radius: 2em;
}
}
& > i:nth-of-type(6) {
width: 18em;
height: 18em;
transform: translate3d(5em, 59em, 0);
filter: blur(2em);
background: radial-gradient(#F3D6C2,#ECC379);
&:before {
width: 18em;
height: 18em;
transform: translate3d(48em, -13em, 0);
background: radial-gradient(#F8D6BC,#ECBD88);
}
&:after {
width: 4em;
height: 4em;
background: #5d1514;
transform: translate3d(18em, 23em, 0);
border-radius: 2em;
}
}
& > i:nth-of-type(5) {
width: 3em;
height: 2em;
transform: translate3d(24em, 85.5em, 0) rotate(-50deg);
box-shadow: 0 1em 0 rgba(#C2884D,.9), 0 4em 0 rgba(#C2884D,.5);
background: rgba(#d58e58,.85);
&:before {
border: 1em solid $none;
border-left: 2em solid #000105;
transform: translate3d(1.5em, -.75em, 0) rotate(40deg) skewX(20deg);
border-radius: .5em;
-webkit-mask-image: linear-gradient(to right, $none,#000, #000);
opacity: .85;
}
&:after {
width: 8em;
height: 25em;
background: linear-gradient(#C69E6F,#B27A49);
transform: translate3d(-5.5em, -10em, 0) skewY(20deg);
border-radius: 1em;
-webkit-mask-image: radial-gradient(circle at 100% 45%,#000, $none);
filter: blur(.5em);
}
}
& > i:nth-of-type(4) {
width: 10em;
height: 1.5em;
transform: translate3d(39em, 89em, 0) rotate(-5deg);
background: linear-gradient(to right, $none, #5F150D);
filter: blur(.5em);
border-radius: 0 1em 1em 100%;
box-shadow: inset 0 .5em 0 #AF6D30;
&:before {
width: 30em;
height: 10em;
transform: translate3d(-5em, 1em, 0) rotate(0deg);
border-radius: 1em;
background: linear-gradient(to right, #88492E,#60291B,#3F211A);
filter: blur(.5em);
}
&:after {
width: 30em;
height: 7em;
transform: translate3d(-15em, 1em, 0) rotate(15deg);
border-radius: 1em;
background: linear-gradient(to right, #AF6D30,#965C34,#572017);
filter: blur(.5em);
}
}
& > i:nth-of-type(7) {
width: 10em;
height: 1.5em;
transform: translate3d(48em, 86.5em, 0) rotate(-25deg);
background: linear-gradient(to left, $none, #5F150D);
filter: blur(.5em);
border-radius: 1em 0 100% 1em;
box-shadow: inset 0 .5em 0 #AF6D30;
&:before {
width: 30em;
height: 10em;
transform: translate3d(-5em, -.5em, 0) rotate(-10deg);
border-radius: 1em;
background: linear-gradient(to right, #88492E,#60291B,#3F211A);
filter: blur(.5em);
}
&:after {
width: 30em;
height: 14em;
transform: translate3d(-2em, 1em, 0) skewY(-25deg) rotate(-25deg);
border-radius: 1em;
background: linear-gradient(to left, #CB9059,#622A18,#0A0605);
filter: blur(.5em);
}
}
//top lip
& > i:nth-of-type(8) {
width: 10em;
height: 3.5em;
transform: translate3d(32em, 76.5em, 0) rotate(-15deg);
background: linear-gradient(to right, #BE3837, #B01F2A);
filter: blur(.25em);
border-radius: 60% 40% 1em 1em;
opacity: .5;
&:before {
width: 8em;
height: 2em;
transform: translate3d(-6em, 2em, 0) rotate(-16deg) skewX(45deg);
background: linear-gradient(to right, #711916, #BE3837);
border-radius: 1em;
}
&:after {
width: 4em;
height: 1.5em;
transform: translate3d(-8.5em, 3.5em, 0) rotate(-16deg) skewX(60deg);
background: linear-gradient(to right, #5D1814, #711916);
border-radius: 1em;
}
}
& > i:nth-of-type(9) {
width: 10em;
height: 3em;
transform: translate3d(42em, 73.5em, 0) rotate(-20deg);
background: linear-gradient(to right, #C52E3B, #BF353C);
filter: blur(.25em);
border-radius: 40% 60% 1em 1em;
opacity: .5;
-webkit-mask-image: linear-gradient(#000, $none );
}
& > i:nth-of-type(10) {
width: 30em;
height: 10em;
transform: translate3d(46em, 63.5em, 0) rotate(0deg);
background: linear-gradient(to right, #E4B280, #BA7145, #BA6435);
filter: blur(.25em);
-webkit-mask-image: radial-gradient( circle at 50% 100%, #000,$none,$none );
}
& > i:nth-of-type(11) {
width: 4em;
height: 4em;
transform: translate3d(60em, 71em, 0) rotate(0deg);
background: #5D1514;
filter: blur(2em);
}
}
moreface {
& > i:nth-of-type(1) {
width: 100em;
height: 50em;
background: linear-gradient($none,#010100 15%,#010100);
transform: translate3d(20em, 82em, 0) rotate(-30deg);
border-radius: 30%;
filter: blur(1em);
&:before {
width: 15em;
height: 10em;
background: linear-gradient(to bottom left,#DFB187,#D19862,#BA6340,#C09557);
transform: translate3d(10em, -30em, 0) rotate(0deg);
filter: blur(1em);
}
&:after {
width: 40em;
height: 100em;
background: linear-gradient(to left, $none,rgba(#C3383D,.3),#010100 50%, #010100);
transform: translate3d(-18em, -80em, 0) rotate(-5deg);
}
}
& > i:nth-of-type(2) {
width: 80em;
height: 107em;
transform: translate3d(-6em, 0em, 0) rotate(-25deg);
border-radius: 30% 30% 30% 10% / 50% 50% 50% 40%;
box-shadow: 0 0 0 30em #010100;
}
& > i:nth-of-type(3) {
width: 10em;
height: 8em;
transform: translate3d(58em, 40em, 0);
background: rgba(#E0AE79, .5);
filter: blur(1em);
&:before {
width: 22em;
height: 6em;
transform: translate3d(-23em, 2em, 0) rotate(15deg);
background: radial-gradient(#D37E28, #EBB868);
opacity: .3;
}
&:after {
width: 20em;
height: 2em;
transform: translate3d(-2em, 6em, 0) rotate(10deg) skewX(-70deg);
border-radius: 70% 70% 30% 30%;
background: rgba(#c22f00, .5);
box-shadow: 0 -2em 0 rgba( #f6e4ab,.1), 10em 1em 0 rgba(#c22f00, .3), 15em 2em 0 rgba(#c22f00, .2);
}
}
& > i:nth-of-type(4) {
width: 3em;
height: 2em;
transform: translate3d(60em, 43em, 0) rotate(-40deg);
background: rgba( #A22429,.5);
box-shadow: 1.75em .7em 0 rgba( #A22429,.5), 2em .7em 0 rgba( #A22429,.1), 3.5em .1em 0 rgba( #A22429,.3), 4.75em -1em 0 rgba( #A22429,.4), .25em 1.25em 0 rgba( #A22429,.2), 1.75em 1.7em 0 rgba( #A22429,.2), 2.3em 1.7em 0 rgba( #A22429,.5), 3.4em 1.9em 0 rgba( #A22429,.4), 4.35em 1em 0 rgba( #A22429,.3), .1em 3.25em 0 rgba( #A22429,.2), 1.25em 3.7em 0 rgba( #A22429,.1), 2.1em 3.5em 0 rgba( #A22429,.4), 3.4em 3.9em 0 rgba( #A22429,.2), 4em 3.2em 0 rgba( #A22429,.5);
opacity: .2;
filter: blur(.25em);
&:before {
width: 3em;
height: 2em;
transform: translate3d(9em, 0em, 0);
background: rgba( #A22429,.5);
box-shadow: 1.75em .7em 0 rgba( #A22429,.5), 2em .7em 0 rgba( #A22429,.1), 3.5em .1em 0 rgba( #A22429,.3), 4.75em -1em 0 rgba( #A22429,.4), .25em 1.25em 0 rgba( #A22429,.2), 1.75em 1.7em 0 rgba( #A22429,.2), 2.3em 1.7em 0 rgba( #A22429,.5), 3.4em 1.9em 0 rgba( #A22429,.4), 4.35em 1em 0 rgba( #A22429,.3), .1em 3.25em 0 rgba( #A22429,.2), 1.25em 3.7em 0 rgba( #A22429,.1), 2.1em 3.5em 0 rgba( #A22429,.4), 3.4em 3.9em 0 rgba( #A22429,.2), 4em 3.2em 0 rgba( #A22429,.5);
}
&:after {
width: 3em;
height: 2em;
transform: translate3d(1em, 10em, 0);
background: rgba( #A22429,.5);
box-shadow: 1.75em .7em 0 rgba( #A22429,.5), 2em .7em 0 rgba( #A22429,.1), 3.5em .1em 0 rgba( #A22429,.3), 4.75em -1em 0 rgba( #A22429,.4), .25em 1.25em 0 rgba( #A22429,.2), 1.75em 1.7em 0 rgba( #A22429,.2), 2.3em 1.7em 0 rgba( #A22429,.5), 3.4em 1.9em 0 rgba( #A22429,.4), 4.35em 1em 0 rgba( #A22429,.3), .1em 3.25em 0 rgba( #A22429,.2), 1.25em 3.7em 0 rgba( #A22429,.1), 2.1em 3.5em 0 rgba( #A22429,.4), 3.4em 3.9em 0 rgba( #A22429,.2), 4em 3.2em 0 rgba( #A22429,.5);
}
}
& > i:nth-of-type(5) {
width: 3em;
height: 2em;
transform: translate3d(70em, 55em, 0) rotate(20deg);
background: rgba( #A22429,.5);
box-shadow: 1.75em .7em 0 rgba( #A22429,.5), 2em .7em 0 rgba( #A22429,.1), 3.5em .1em 0 rgba( #A22429,.3), 4.75em -1em 0 rgba( #A22429,.4), .25em 1.25em 0 rgba( #A22429,.2), 1.75em 1.7em 0 rgba( #A22429,.2), 2.3em 1.7em 0 rgba( #A22429,.5), 3.4em 1.9em 0 rgba( #A22429,.4), 4.35em 1em 0 rgba( #A22429,.3), .1em 3.25em 0 rgba( #A22429,.2), 1.25em 3.7em 0 rgba( #A22429,.1), 2.1em 3.5em 0 rgba( #A22429,.4), 3.4em 3.9em 0 rgba( #A22429,.2), 4em 3.2em 0 rgba( #A22429,.5);
opacity: .2;
filter: blur(.25em);
&:before {
width: 3em;
height: 2em;
transform: translate3d(0em, 8em, 0);
background: rgba( #A22429,.5);
box-shadow: 1.75em .7em 0 rgba( #A22429,.5), 2em .7em 0 rgba( #A22429,.1), 3.5em .1em 0 rgba( #A22429,.3), 4.75em -1em 0 rgba( #A22429,.4), .25em 1.25em 0 rgba( #A22429,.2), 1.75em 1.7em 0 rgba( #A22429,.2), 2.3em 1.7em 0 rgba( #A22429,.5), 3.4em 1.9em 0 rgba( #A22429,.4), 4.35em 1em 0 rgba( #A22429,.3), .1em 3.25em 0 rgba( #A22429,.2), 1.25em 3.7em 0 rgba( #A22429,.1), 2.1em 3.5em 0 rgba( #A22429,.4), 3.4em 3.9em 0 rgba( #A22429,.2), 4em 3.2em 0 rgba( #A22429,.5);
}
&:after {
width: 3em;
height: 2em;
transform: translate3d(-7em, 13em, 0);
background: rgba( #A22429,.5);
box-shadow: 1.75em .7em 0 rgba( #A22429,.5), 2em .7em 0 rgba( #A22429,.1), 3.5em .1em 0 rgba( #A22429,.3), 4.75em -1em 0 rgba( #A22429,.4), .25em 1.25em 0 rgba( #A22429,.2), 1.75em 1.7em 0 rgba( #A22429,.2), 2.3em 1.7em 0 rgba( #A22429,.5), 3.4em 1.9em 0 rgba( #A22429,.4), 4.35em 1em 0 rgba( #A22429,.3), .1em 3.25em 0 rgba( #A22429,.2), 1.25em 3.7em 0 rgba( #A22429,.1), 2.1em 3.5em 0 rgba( #A22429,.4), 3.4em 3.9em 0 rgba( #A22429,.2), 4em 3.2em 0 rgba( #A22429,.5);
}
}
}
hairbase {
& > i:nth-of-type(1) {
width: 92em;
height: 110em;
border-radius: 50% 42% 0 0 / 50% 100% 0 0;
transform: translate3d(-10em,-2em,0) rotate(-15deg);
box-shadow: 0 0 0 10em #130E0B,inset 0 0 10em #130E0B, inset 0 0 3em #5B2810,inset 0 0 1em #130E0B, inset 0 0 3em #5B2810,inset 0 0 5em #5B2810;
}
& > i:nth-of-type(2) {
width: 8em;
height: 8em;
transform: translate3d(32em,-5em,0) rotate(-55deg);
background: #400603;
border-radius: 1em;
filter: blur(1em) contrast(1.5);
opacity: .8;
&:before {
background: #ffe8d2;
transform: translate3d(7em, 33em, 0) rotate(90deg);
width: 12em;
height: 5em;
opacity: .25;
}
&:after {
background: #fff7c6;
transform: translate3d(6em, 32em, 0) rotate(0deg);
width: 10em;
height: 3em;
opacity: .5;
}
}
& > i:nth-of-type(3) {
width: 30em;
height: 10em;
transform: translate3d(0em,0em,0) rotate(-20deg);
background: repeating-radial-gradient(circle at top left, $none, $none .5em, #0C0A08 .25em, #0C0A08 .75em );
border-radius: 0 0 10em 5em;
-webkit-mask-image: linear-gradient(#000,$none);
opacity: .25;
}
& > i:nth-of-type(4) {
width: 17em;
height: 17em;
border: .2em solid rgba(#000,.1);
border-right: 6em solid #893303;
transform: translate3d(1em, -1em, 0) rotate(-45deg);
filter: blur(.5em);
&:before {
width: 25em;
height: 17em;
border: 1em solid #893303;
transform: translate3d(-4em, -2em, 0);
}
&:after {
width: 25em;
height: 17em;
border: 1em solid #893303;
transform: translate3d(-23em, -1em, 0);
}
}
& > i:nth-of-type(5) {
width: 30em;
height: 30em;
border: .2em solid rgba(#000,.1);
border-right: 4em solid #8e0b08;
border-top: 4em solid #892003;
transform: translate3d(-20em, 50em, 0);
opacity: .65;
filter: blur(.5em);
&:before {
width: 20em;
height: 20em;
border: .2em solid rgba(#000,.1);
border-right: 3em solid #6d0f0d;
border-top: 4em solid #6C1917;
transform: translate3d(5em, 0em, 0);
}
&:after {
width: 2em;
height: 30em;
background: linear-gradient(#8e0b08,#722710, #40140F,#010101);
transform: translate3d(27em, 10em, 0) rotate(2deg);
}
}
}
$hair1: rgba(#B4782A,.25);
$hair2: rgba(#651e08,.1);
$hair3: rgba(#96660F,.2);
$hair4: rgba(#7B1D0A,.2);
$hshad: rgba(#0F0504,.25);
$origin: 20% 100%;
hair {
filter: brightness(1.1);
opacity: .9;
& > i:nth-of-type(2) {
width: 40em;
height: 40em;
transform: translate3d(38em, -20em, 0) rotate(10deg);
border-radius: 20%;
box-shadow: -.1em 0 0 #96310D;
opacity: .5;
&:before {
width: 40em;
height: 40em;
transform: translate3d(-.5em, -1em, 0);
border-radius: 30%;
box-shadow: -.1em 0 0 #964414;
opacity: .5;
}
&:after {
width: 20em;
height: 40em;
transform: translate3d(2em, 2em, 0) rotate(40deg);
box-shadow: -.05em 0 0 #96310D, -.05em .075em 0 -.05em #C0A643;
}
}
& > i:nth-of-type(3) {
width: 30em;
height: 40em;
transform: translate3d(38.25em, -20em, 0) rotate(11deg);
border-radius: 20%;
box-shadow: -.1em 0em 0 #A05115;
opacity: .5;
&:before {
width: 40em;
height: 38em;
transform: translate3d(-.5em, -.5em, 0);
border-radius: 30%;
box-shadow: -.1em 0 0 #964414;
opacity: .5;
}
&:after {
width: 40em;
height: 40em;
transform: translate3d(.5em, .25em, 0);
border-radius: 20%;
box-shadow: -.1em 0 .5em #A05115, inset .1em 0 .5em #A05115;
opacity: .5;
-webkit-mask-image: linear-gradient(to right, #000, $none);
}
}
& > i:nth-of-type(4) {
width: 30em;
height: 30em;
transform: translate3d(5em, -18em, 0) rotate(-10deg);
box-shadow: .1em 0 0 #96310D;
&:before {
width: 30em;
height: 30em;
transform: translate3d(0em, -1em, 0);
box-shadow: .1em 0 0 #964414;
opacity: .5;
}
&:after {
width: 30em;
height: 30em;
transform: translate3d(-.25em, -.25em, 0);
box-shadow: .1em 0 0 #964414;
opacity: .5;
}
}
& > i:nth-of-type(5) {
width: 25em;
height: 25em;
transform: translate3d(15em, -15em, 0) rotate(-10deg);
box-shadow: .1em 0 0 #96310D;
&:before {
width: 25em;
height: 25em;
transform: translate3d(0em, -2em, 0);
box-shadow: .1em 0 0 #964414;
opacity: .5;
}
&:after {
width: 25em;
height: 25em;
transform: translate3d(-.25em, -.5em, 0);
box-shadow: .1em 0 0 #964414;
opacity: .5;
}
}
& > i:nth-of-type(6) {
width: 25em;
height: 25em;
transform: translate3d(5em, -15em, 0) rotate(-10deg);
box-shadow: 0 .1em 0 #96310D;
&:before {
width: 25em;
height: 25em;
transform: translate3d(0em, -2em, 0);
box-shadow: 0 .1em 0 #964414;
opacity: .5;
}
&:after {
width: 20em;
height: 10em;
transform: translate3d(20em, 20em, 0);
border-radius: 100% 100% 0 0;
box-shadow: 0 -.1em 0 -.05em #964414;
opacity: .5;
}
}
& > i:nth-of-type(8) {
filter: blur(.25em);
width: 30em;
height: 60em;
transform: translate3d(65em, -10em, 0) rotate(-22deg);
background: repeating-linear-gradient( 90deg, $hair3, $hair1 .25em, $hair4 .25em, $hair2 .5em ),linear-gradient(#100C0A,#100C0A,#8A4C1C);
opacity: .7;
border-radius: 0;
&:before {
width: 20em;
height: 20em;
transform: translate3d(0em, 20em, 0);
background: repeating-radial-gradient(circle at top left, #7D2E10, #75331a .25em, $none .25em, $none .5em );
opacity: .5;
}
&:after {
width: 25em;
height: 20em;
transform: translate3d(0em, 10em, 0);
background: repeating-radial-gradient(circle at bottom right,#0B0002, #2c1c0a .25em, $none .25em, $none .5em );
opacity: .9;
}
}
& > i:nth-of-type(9) {
width: 5em;
height: 10em;
transform: translate3d(55em, 4em, 0) rotate(-15deg);
background: repeating-linear-gradient( 90deg, rgba(#b53411,.5), #b53411 .25em, $none .5em, $none 1em );
opacity: .7;
&:after {
width: 4em;
height: 22em;
transform: translate3d(5em, 7em, 0) rotate(-5deg);
background: repeating-linear-gradient( 90deg, #806431, #AD7F2E .25em, $none .25em, $none .5em );
border-radius: 90% 10% 10% 90%;
-webkit-mask-image: linear-gradient($none, #000,#000,$none);
}
&:before {
width: 10em;
height: 22em;
transform: translate3d(0em, -5em, 0) rotate(15deg);
background: repeating-linear-gradient( 90deg, #806431, #AD7F2E .25em, $none .25em, $none .5em );
-webkit-mask-image: linear-gradient( $none,#000,$none);
}
}
& > i:nth-of-type(15) {
width: 30em;
height: 60em;
transform: translate3d(58em, -30em, 0) rotate(0deg);
box-shadow: -.5em .5em 0 -.5em #B47D2B, 0 0 2em $hshad;
transform-origin: $origin;
&:before {
width: 30em;
height: 60em;
transform: rotate(2deg);
box-shadow: -.5em .5em 0 -.5em #C29B43, 0 0 2em $hshad;
transform-origin: $origin;
}
&:after {
width: 30em;
height: 60em;
transform: rotate(5deg);
box-shadow: -.5em .5em 0 -.5em #a5752d, 0 0 2em $hshad;
transform-origin: $origin;
}
}
& > i:nth-of-type(10) {
width: 30em;
height: 60em;
transform: translate3d(58em, -30em, 0) rotate(8deg);
box-shadow: -.5em .5em 0 -.5em #C29B43, 0 0 2em $hshad;
transform-origin: $origin;
&:before {
width: 30em;
height: 60em;
transform: rotate(3deg);
box-shadow: -.5em .5em 0 -.5em #B47D2B, 0 0 2em $hshad;
transform-origin: $origin;
}
&:after {
width: 30em;
height: 60em;
transform: rotate(5deg);
box-shadow: -.5em .5em 0 -.5em #C29B43, 0 0 2em $hshad;
transform-origin: $origin;
}
}
& > i:nth-of-type(11) {
width: 20em;
height: 25em;
transform: translate3d(63em, -5em, 0) rotate(-20deg);
box-shadow: -.5em .5em 0 -.5em #B47D2B, 0 0 2em $hshad;
transform-origin: $origin;
&:before {
width: 20em;
height: 25em;
transform: translate3d(.7em, 0, 0) rotate(2deg);
box-shadow: -.5em .5em 0 -.5em #C29B43, 0 0 2em $hshad;
transform-origin: $origin;
}
&:after {
width: 20em;
height: 25em;
transform: translate3d(1.8em, 0, 0) rotate(5deg);
box-shadow: -.5em .5em 0 -.5em #a5752d, 0 0 2em $hshad;
transform-origin: $origin;
}
}
& > i:nth-of-type(14) {
width: 20em;
height: 25em;
transform: translate3d(64em, -5em, 0) rotate(-28deg);
box-shadow: -.5em .5em 0 -.5em #74320C, 0 0 2em $hshad;
transform-origin: $origin;
&:before {
width: 20em;
height: 25em;
transform: translate3d(-1em, 0, 0) rotate(3deg);
box-shadow: -.5em .5em 0 -.5em #7c3811, 0 0 2em $hshad;
transform-origin: $origin;
}
&:after {
width: 20em;
height: 25em;
transform: translate3d(-2.1em, 0, 0) rotate(5deg);
box-shadow: -.5em .5em 0 -.5em #7a3812, 0 0 2em $hshad;
transform-origin: $origin;
}
}
& > i:nth-of-type(13) {
border-radius: 0;
width: .15em;
height: 20em;
background: #443A2D;
transform: translate3d(71em, -5em, 0) rotate(-30deg);
box-shadow: .3em 0 0 #32291C,.8em 0 0 #432E16, 1.5em 0 0 #443A2D, 1.8em 0 0 #32291C,2.2em 0 0 #432E16, 2.5em 0 0 #443A2D;
&:before {
border-radius: 0;
width: .15em;
height: 20em;
background: #443A2D;
transform: translate3d(0em, 0em, 0) rotate(10deg);
box-shadow: .3em 0 0 #32291C,.8em 0 0 #432E16, 1.5em 0 0 #443A2D, 1.8em 0 0 #32291C,2.2em 0 0 #432E16, 2.5em 0 0 #443A2D;
}
&:after {
border-radius: 0;
width: .15em;
height: 20em;
background: #443A2D;
transform: translate3d(-15em, -10em, 0) rotate(-20deg);
box-shadow: .3em 0 0 #32291C,.8em 0 0 #432E16, 1.5em 0 0 #443A2D, 1.8em 0 0 #32291C,2.2em 0 0 #432E16, 2.5em 0 0 #443A2D;
}
}
& > i:nth-of-type(12) {
width: 10em;
height: 30em;
transform: translate3d(54em, -3em, 0) rotate(-20deg);
border: .25em solid $none;
box-shadow: .15em 0 0 #8C681D,.3em 0 0 #4f1c0c,.6em 0 0 #805c12, inset -.15em 0 0 #80601f,inset -.3em 0 0 #581c08,inset -.5em 0 0 #86682b;
&:before {
width: 10em;
height: 30em;
transform: translate3d(-2em, -5em, 0) rotate(-20deg);
border: .25em solid $none;
box-shadow: .2em 0 0 #5D300C,.4em 0 0 #33170e,.9em 0 0 #A16517, inset -.15em 0 0 #97621e, inset -.3em 0 0 #311910,inset -.6em 0 0 #A16517;
}
&:after {
width: 7em;
height: 31em;
transform: translate3d(0em, -7em, 0) rotate(-20deg);
border: .25em solid $none;
box-shadow: -.3em 0 0 #8C681D,-.6em 0 0 #4f1c0c,-.8em 0 0 #805c12, inset .15em 0 0 #80601f,inset .4em 0 0 #581c08,inset .6em 0 0 #86682b;
}
}
& > i:nth-of-type(16) {
width: 40em;
height: 40em;
transform: translate3d(58em, 6em, 0) rotate(30deg);
border-radius: 30%;
box-shadow: -.1em .1em 0 -.05em #9C7030;
opacity: .75;
&:before {
width: 40em;
height: 40em;
border-radius: 30%;
box-shadow: -.1em 0 0 #9C7030;
transform: translate3d(-9em, -8em, 0) rotate(-20deg);
}
&:after {
width: 40em;
height: 40em;
border-radius: 30%;
box-shadow: -.1em 0 0 #f1ba6b;
transform: translate3d(-36em, -19em, 0) rotate(-60deg);
}
}
& > i:nth-of-type(17) {
width: 20em;
height: 40em;
transform: translate3d(55em, -15em, 0) rotate(-10deg);
border-radius: 40%;
box-shadow: -.15em 0 0 #996B2D;
opacity: .85;
&:before {
width: 20em;
height: 40em;
transform: translate3d(0, 0, 0) rotate(-10deg);
border-radius: 40%;
box-shadow: -.15em 0 0 #ba7417;
}
&:after {
width: 20em;
height: 40em;
transform: translate3d(0, 0, 0) rotate(-23deg);
border-radius: 40%;
box-shadow: -.15em 0 0 #7a5939;
}
}
& > i:nth-of-type(18) {
width: 20em;
height: 40em;
transform: translate3d(55em, -15em, 0) rotate(-30deg);
border-radius: 40%;
box-shadow: -.15em 0 0 #c4a234;
opacity: .85;
&:before {
width: 20em;
height: 40em;
transform: translate3d(0, 0, 0) rotate(-11deg);
border-radius: 40%;
box-shadow: -.15em 0 0 #e1471c;
}
&:after {
width: 20em;
height: 40em;
transform: translate3d(0, 0, 0) rotate(-19deg);
border-radius: 40%;
box-shadow: -.15em 0 0 #aa770d;
}
}
& > i:nth-of-type(7) {
width: 5em;
height: 10em;
border-radius: 50% 0 0 0;
transform: translate3d(40em, -2em, 0) rotate(-80deg);
border: .25em solid $none;
box-shadow: -.15em 0 0 #9A6119, -.3em 0 0 #7C1F05, -.6em 0 0 #9A6119, inset .15em 0 0 #9A6119,inset .3em 0 0 #7C1F05, inset .5em 0 0 #9A6119;
&:after {
width: 5em;
height: 12em;
border-radius: 50% 0 0 0;
transform: translate3d(-2em, 0em, 0) rotate(4deg);
border: .25em solid $none;
box-shadow: -.15em 0 0 #AA5D31, -.3em 0 0 #8B2B0D, -.6em 0 0 #9A6119, inset .15em 0 0 #AA5D31,inset .3em 0 0 #8B2B0D, inset .5em 0 0 #9A6119;
}
&:before {
width: 5em;
height: 10em;
border-radius: 50% 0 0 0;
transform: translate3d(-3em, 0em, 0) rotate(-10deg);
border: .25em solid $none;
box-shadow: -.15em 0 0 #AA5D31, -.3em 0 0 #74190A, -.6em 0 0 #9A6119, inset .15em 0 0 #AA5D31,inset .3em 0 0 #74190A, inset .5em 0 0 #9A6119;
}
}
& > i:nth-of-type(1) {
opacity: .5;
width: 10em;
height: 30em;
transform: translate3d(39em, -8em, 0) rotate(-60deg);
border: .25em solid $none;
box-shadow: .15em 0 0 #8C681D, .3em 0 0 #4f1c0c, .6em 0 0 #805c12, inset -.15em 0 0 #80601f,inset -.3em 0 0 #581c08, inset -.5em 0 0 #86682b;
&:before {
width: 10em;
height: 30em;
border: .25em solid $none;
box-shadow: .2em 0 0 #5D300C, .4em 0 0 #65140B, .9em 0 0 #A16517, inset -.15em 0 0 #C19550, inset -.3em 0 0 #65140B, inset -.6em 0 0 #A16517;
transform: translate3d(-4em, 10em, 0) rotate(0deg);
}
&:after {
width: 10em;
height: 30em;
border: .25em solid $none;
box-shadow: .2em 0 0 #5D300C, .4em 0 0 #65140B, .9em 0 0 #A16517, inset -.15em 0 0 #eacb81, inset -.3em 0 0 #65140B, inset -.6em 0 0 #A16517;
transform: translate3d(-4em, 8.5em, 0) rotate(6deg);
}
}
& > i:nth-of-type(19) {
width: 4em;
height: 10em;
transform: translate3d(37em, -2em, 0) rotate(-5deg);
border: .25em solid $none;
box-shadow: -.15em 0 0 #7E4C24, -.3em 0 0 #6B240E, -.6em 0 0 #8F3B0D, inset .15em 0 0 #7A5A42,inset .3em 0 0 #761809, inset .5em 0 0 #A24616, inset 1em 0 1em -1em #0E0C07;
&:after {
width: 4em;
height: 10em;
transform: translate3d(-1.5em, -.5em, 0) rotate(-10deg);
border: .25em solid $none;
box-shadow: -.15em 0 0 #9E3A10, -.3em 0 0 #581308, -.6em 0 0 #933C10, inset .15em 0 0 #913616,inset .3em 0 0 #641A0A, inset .5em 0 0 #933C10;
}
&:before {
width: 5em;
height: 10em;
transform: translate3d(-7em, -1em, 0) rotate(-20deg);
border: .25em solid $none;
box-shadow: .15em 0 0 #9E3A10, .3em 0 0 #74190A, .6em 0 0 #9E3A10, inset -.15em 0 0 #B7611D,inset -.3em 0 0 #74190A, inset -.5em 0 0 #B7611D;
}
}
& > i:nth-of-type(20) {
width: 20em;
height: 25em;
transform: translate3d(47em, -10em, 0) rotate(-15deg);
box-shadow: 0 0 0 .1em #7E4C24;
opacity: .5;
&:after {
width: 2em;
height: 25em;
transform: translate3d(16em, 2em, 0) rotate(-15deg);
box-shadow: 0 0 0 .1em #7E4C24;
}
&:before {
width: 2em;
height: 25em;
transform: translate3d(17em, 5em, 0) rotate(-5deg);
box-shadow: 0 0 0 .1em #7E4C24;
}
}
& > i:nth-of-type(21) {
width: 2em;
height: 25em;
transform: translate3d(67em, -2em, 0) rotate(-15deg);
box-shadow: .1em 0 0 0 #c28965, -.1em 0 0 0 #7E4C24;
opacity: .5;
&:after {
width: 2em;
height: 25em;
transform: translate3d(2em, 2em, 0) rotate(-15deg);
box-shadow: 0 0 0 .1em #7E4C24;
}
&:before {
width: 2em;
height: 25em;
transform: translate3d(4em, 5em, 0) rotate(-5deg);
box-shadow: 0 0 0 .1em #7E4C24;
}
}
& > i:nth-of-type(22) {
width: 2em;
height: 25em;
transform: translate3d(40em, -10em, 0) rotate(-45deg);
box-shadow: .1em 0 0 0 #c28965, -.1em 0 0 0 #8D6A3A;
&:after {
width: 2em;
height: 25em;
transform: translate3d(2em, 2em, 0) rotate(15deg);
box-shadow: 0 0 0 .1em #8D6A3A;
}
&:before {
width: 2em;
height: 25em;
transform: translate3d(1em, 3em, 0) rotate(-5deg);
box-shadow: 0 0 0 .1em #8D6A3A;
}
}
& > i:nth-of-type(23) {
width: 2em;
height: 25em;
transform: translate3d(69em, 15em, 0) rotate(-15deg);
box-shadow: .1em 0 0 0 #c28965, -.1em 0 0 0 #7E4C24;
opacity: .5;
&:after {
width: 2em;
height: 25em;
transform: translate3d(2em, 2em, 0) rotate(-15deg);
box-shadow: 0 0 0 .1em #7E4C24;
}
&:before {
width: 2em;
height: 25em;
transform: translate3d(4em, 5em, 0) rotate(-5deg);
box-shadow: 0 0 0 .1em #7E4C24;
}
}
& > i:nth-of-type(24) {
width: 50em;
height: 50em;
border: .25em solid $none;
box-shadow: 0 -.14em 0 0 #C18A0D, 0 -.35em 0 0 #531d16, 0 -.55em 0 0 #B86A31, 0 -.7em 0 0 #500A08, 0 -.86em 0 0 #81270B, 0 -1.1em 0 0 #B86A31, inset 0 .16em 0 0 #81270B, inset 0 .4em 0 0 #2f201e, inset 0 .5em 0 0 #B86A31, inset 0 .76em 0 0 #531d16, inset 0 .84em 0 0 #C18A0D, inset 0 1.05em 0 0 #B86A31;
transform: translate3d(-47em, 1em, 0) rotate(90deg);
&:after {
width: 50em;
height: 50em;
border: .25em solid $none;
box-shadow: 0 -.14em 0 0 #734623, 0 -.35em 0 0 #13070A, 0 -.55em 0 0 #B86A31, 0 -.7em 0 0 #13070A, 0 -.86em 0 0 #C18A0D, 0 -1.1em 0 0 #13070A, inset 0 .16em 0 0 #13070A, inset 0 .4em 0 0 #C18A0D, inset 0 .5em 0 0 #13070A, inset 0 .76em 0 0 #BD732C, inset 0 .84em 0 0 #2f201e, inset 0 1.05em 0 0 #B86A31;
transform: translate3d(-10em, -1em, 0);
}
&:before {
transform: translate3d(0em, -38em, 0) rotate(-90deg);
width: 10em;
height: 80em;
background: #13070A;
border-radius: 0 0 100% 0;
box-shadow: 0 0 1em #13070A;
opacity: .7;
}
}
//this
& > i:nth-of-type(27) {
width: 20em;
height: 30em;
border-radius: 10em;
transform: translate3d(-4em, -10em, 0) rotate(10deg);
border: .25em solid $none;
box-shadow: .15em .15em 0 0 #B86A31, .3em .3em 0 0 #741C11, .5em .5em 0 0 #C4B32D, inset .15em 0 0 0 #C4B32D, inset .3em 0 0 0 #741C11, inset .5em 0 0 0 #B86A31, inset -.15em 0 0 0 #B86A31, inset -.3em 0 0 0 #741C11, inset -.5em 0 0 0 #C4B32D;
&:before {
background: #200F0C;
width: 14em;
height: 10em;
transform: translate3d(7em, 3.5em, 0) rotate(-10deg);
border: .25em solid #200F0C;
box-shadow: 0 .15em 0 #C4B32D, 0 .3em 0 #200F0C, 0 .7em 0 #9A732B, 0 1em 0 #200F0C, 0 1em .5em #200F0C, inset 0 -.15em 0 #96660F, inset 0 -.3em 0 #13070C, inset 0 -.5em 0 #9A732B;
}
&:after {
width: 15em;
height: 15em;
transform: translate3d(9em, 3em, 0) rotate(-20deg);
border: .25em solid $none;
box-shadow: 0 .25em 0 #6E280B,inset 0 -.25em 0 #6E280B;
}
}
//right dark
& > i:nth-of-type(25) {
width: 20em;
height: 12em;
transform: translate3d(-4em, 2em, 0) rotate(-40deg);
border: .25em solid $none;
box-shadow: .3em .3em 0 0 #BB9853, .6em .6em 0 0 #911F0D, 1em 1em 0 0 #4F2307, inset .3em 0 0 0 #4F2307, inset .6em 0 0 0 #911F0D, inset 1em 0 0 0 #4F2307;
&:before {
width: 24em;
height: 22em;
border: .2em solid rgba(#893303,.5);
border-right: 3em solid #893303;
border-left: 2em solid rgba(#000,.1);
filter: blur(.25em);
opacity: .4;
transform: translate3d(10em, -3em, 0) rotate(40deg);
}
&:after {
width: 20em;
height: 22em;
border-radius: 30%;
border: .2em solid rgba(#893303,.5);
border-right: 3em solid #893303;
border-left: 2em solid rgba(#000,.1);
filter: blur(.25em);
opacity: .2;
transform: translate3d(12em, -7em, 0) rotate(40deg);
}
}
//right
& > i:nth-of-type(26) {
width: 50em;
height: 50em;
transform: translate3d(-40em, -20em, 0) rotate(20deg);
border: .25em solid $none;
box-shadow: 0 .14em 0 0 #C4B32D, 0 .35em 0 0 #531d16, 0 .55em 0 0 #B86A31, 0 .7em 0 0 #C4B32D, 0 .86em 0 0 #531d16, 0 1.1em 0 0 #B86A31, inset 0 -.16em 0 0 #BD732C, inset 0 -.4em 0 0 #2f201e, inset 0 -.5em 0 0 #B86A31, inset 0 -.76em 0 0 #BD732C, inset 0 -.84em 0 0 #2f201e, inset 0 -1.05em 0 0 #B86A31;
&:before {
width: 50em;
height: 51em;
transform: translate3d(-1.5em, -3em, 0) rotate(-10deg);
border: .25em solid $none;
box-shadow: 0 .14em 0 0 #B49344, 0 .35em 0 0 #30160C, 0 .55em 0 0 #B86A31, 0 .7em 0 0 #C4B32D, 0 .86em 0 0 #531d16, 0 1.1em 0 0 #B86A31, inset 0 -.16em 0 0 #8D3B0E, inset 0 -.4em 0 0 #2f201e, inset 0 -.5em 0 0 #B86A31, inset 0 -.76em 0 0 #B49344, inset 0 -.84em 0 0 #30160C, inset 0 -1.05em 0 0 #843829;
}
&:after {
width: 50em;
height: 52em;
transform: translate3d(-2.8em, -6.5em, 0) rotate(-20deg);
border: .2em solid $none;
box-shadow: 0 .14em 0 0 #C4B32D, 0 .35em 0 0 #531d16, 0 .55em 0 0 #843829, 0 .7em 0 0 #C4B32D, 0 .86em 0 0 #30160C, 0 1.1em 0 0 #8D3B0E, inset 0 -.16em 0 0 #BD732C, inset 0 -.4em 0 0 #2f201e, inset 0 -.5em 0 0 #CBB64E, inset 0 -.76em 0 0 #BD732C, inset 0 -.84em 0 0 #2f201e, inset 0 -1.05em 0 0 #B86A31;
}
}
& > i:nth-of-type(28) {
width: 50em;
height: 50em;
transform: translate3d(-33em, -30em, 0) rotate(0deg);
border: .25em solid $none;
box-shadow: 0 .14em 0 0 #C4B32D, 0 .35em 0 0 #531d16, 0 .55em 0 0 #B86A31, 0 .7em 0 0 #C4B32D, 0 .86em 0 0 #531d16, 0 1.1em 0 0 #B86A31, inset 0 -.16em 0 0 #BD732C, inset 0 -.4em 0 0 #2f201e, inset 0 -.5em 0 0 #B86A31, inset 0 -.76em 0 0 #BD732C, inset 0 -.84em 0 0 #2f201e, inset 0 -1.05em 0 0 #B86A31;
-webkit-mask-image: linear-gradient(to right, #000, #000 80%, $none);
&:before {
width: 50em;
height: 51em;
transform: translate3d(-1em, -3em, 0) rotate(-10deg);
border: .25em solid $none;
box-shadow: 0 .14em 0 0 #B49344, 0 .35em 0 0 #30160C, 0 .55em 0 0 #B86A31, 0 .7em 0 0 #C4B32D, 0 .86em 0 0 #531d16, 0 1.1em 0 0 #B86A31, inset 0 -.16em 0 0 #8D3B0E, inset 0 -.4em 0 0 #2f201e, inset 0 -.5em 0 0 #B86A31, inset 0 -.76em 0 0 #B49344, inset 0 -.84em 0 0 #30160C, inset 0 -1.05em 0 0 #843829;
}
&:after {
width: 50em;
height: 52em;
transform: translate3d(-2em, -6.5em, 0) rotate(-20deg);
border: .2em solid $none;
box-shadow: 0 .14em 0 0 #C4B32D, 0 .35em 0 0 #531d16, 0 .55em 0 0 #843829, 0 .7em 0 0 #C4B32D, 0 .86em 0 0 #30160C, 0 1.1em 0 0 #8D3B0E, inset 0 -.16em 0 0 #BD732C, inset 0 -.4em 0 0 #2f201e, inset 0 -.5em 0 0 #CBB64E, inset 0 -.76em 0 0 #BD732C, inset 0 -.84em 0 0 #2f201e, inset 0 -1.05em 0 0 #B86A31;
}
}
& > i:nth-of-type(29) {
width: 85em;
height: 85em;
transform: translate3d(-8em, -7em, 0) rotate(-30deg);
border: .25em solid $none;
box-shadow: 0 -.14em 0 0 #C4B32D, 0 -.35em 0 0 #531d16, 0 -.55em 0 0 #B86A31, 0 -.7em 0 0 #C4B32D, 0 -.86em 0 0 #531d16, 0 -1.1em 0 0 #B86A31, inset 0 .16em 0 0 #BD732C, inset 0 .4em 0 0 #2f201e, inset 0 .5em 0 0 #B86A31, inset 0 .76em 0 0 #BD732C, inset 0 .84em 0 0 #2f201e, inset 0 1.05em 0 0 #B86A31;
&:before {
width: 85em;
height: 90em;
transform: translate3d(-1em, -3em, 0) rotate(-10deg);
border: .25em solid $none;
box-shadow: 0 -.14em 0 0 #B49344, 0 -.35em 0 0 #30160C, 0 -.55em 0 0 #B86A31, 0 -.7em 0 0 #C4B32D, 0 -.86em 0 0 #531d16, 0 -1.1em 0 0 #B86A31, inset 0 .16em 0 0 #8D3B0E, inset 0 .4em 0 0 #2f201e, inset 0 .5em 0 0 #B86A31, inset 0 .76em 0 0 #B49344, inset 0 .84em 0 0 #30160C, inset 0 1.05em 0 0 #843829;
}
&:after {
width: 85em;
height: 87em;
transform: translate3d(-2em, -6.5em, 0) rotate(-20deg);
border: .2em solid $none;
box-shadow: 0 -.14em 0 0 #C4B32D, 0 -.35em 0 0 #531d16, 0 -.55em 0 0 #843829, 0 -.7em 0 0 #C4B32D, 0 -.86em 0 0 #30160C, 0 -1.1em 0 0 #8D3B0E, inset 0 .16em 0 0 #BD732C, inset 0 .4em 0 0 #2f201e, inset 0 .5em 0 0 #CBB64E, inset 0 .76em 0 0 #BD732C, inset 0 .84em 0 0 #2f201e, inset 0 1.05em 0 0 #B86A31;
}
}
& > i:nth-of-type(30) {
width: 15em;
height: 15em;
transform: translate3d(-19em, -5em, 0) rotate(0deg);
border: 10em solid #190b09;
box-sizing: content-box;
-webkit-mask-image: linear-gradient(to right bottom, #000, #000 60%, $none 65%, $none);
opacity: .6;
box-shadow: inset 0 0 1em #190b09, 0 0 1em #190b09;
&:after {
width: 16em;
height: 16em;
transform: translate3d(10em, -9em, 0) rotate(0deg);
background: #150C06;
box-shadow: 0 0 1em #150C06;
-webkit-mask-image: linear-gradient(to right, $none,#000, #000, #000);
}
}
//top rings
& > i:nth-of-type(31) {
width: 17em;
height: 15em;
transform: translate3d(7em, -5em, 0) rotate(-30deg);
border: .25em solid $none;
box-shadow: 0 .15em 0 0 #C4B32D, 0 .3em 0 0 #741C11, -.5em .5em 0 0 #B86A31, inset 0 -.3em 0 #BD732C, inset 0 -.6em 0 #5a110a, inset .15em -1em 0 #B86A31, inset .15em .15em 0 #bb3516;
&:before {
width: 18em;
height: 13em;
transform: translate3d(2em, 4em, 0) rotate(-5deg);
border: .25em solid $none;
box-shadow: 0 .15em 0 #C4B32D, -.3em .3em 0 #741C11, -.7em .7em 0 #B86A31, inset .15em -.15em 0 #BD732C, inset .3em -.3em 0 #741C11, inset .5em -.5em 0 #B86A31;
}
&:after {
width: 18em;
height: 10em;
transform: translate3d(4em, -2.5em, 0) rotate(-10deg);
border: .25em solid $none;
box-shadow: 0 .15em 0 #C4B32D, -.3em .3em 0 #13070C, -.7em .7em 0 #9A732B, inset .15em -.15em 0 #96660F, inset .3em -.3em 0 #13070C, inset .5em -.5em 0 #9A732B;
}
}
& > i:nth-of-type(32) {
width: 14em;
height: 10em;
transform: translate3d(17em, -9.5em, 0) rotate(0deg);
box-shadow: 0 .2em 0 #C4B32D, 0 .4em 0 #C7A050;
&:before {
width: 15em;
height: 15em;
transform: translate3d(-3em, 3em, 0) rotate(-20deg);
border: .25em solid $none;
box-shadow: 0 .25em 0 #6E280B,inset 0 -.25em 0 #6E280B;
opacity: .5;
}
&:after {
width: 15em;
height: 15em;
transform: translate3d(-5em, 3em, 0) rotate(-20deg);
border: .25em solid $none;
box-shadow: 0 .25em 0 #6E280B,inset 0 -.25em 0 #6E280B;
opacity: .5;
}
}
& > i:nth-of-type(33) {
width: 17em;
height: 22em;
transform: translate3d(-2em, 39em, 0) rotate(10deg);
border: .2em solid rgba(#893303,.5);
border-left: 2em solid #893303;
border-right: 2em solid rgba(#000,.1);
filter: blur(.25em);
opacity: .5;
&:before {
width: 17em;
height: 22em;
border: .2em solid #893303;
border-bottom: 2em solid #893303;
transform: translate3d(-9em, -36em, 0) skewX(-20deg);
opacity: .8;
}
}
& > i:nth-of-type(34) {
width: 40em;
height: 25em;
border-radius: 50% 50% 60% 40%;
transform: translate3d(-19em, 33em, 0) scaleX(.5) rotate(-2deg);
box-shadow: 0 -.25em 0 #eebc3c, .25em .25em 0 #B2541A, inset 0 -.25em 0 #CBB64E, inset .25em .35em 0 #B2541A;
&:before {
width: 40em;
height: 30em;
box-shadow: 0.25em 0 0 #964414;
opacity: .5;
transform: translate3d(-5em, 10em, 0) rotate(-50deg);
}
&:after {
width: 20em;
height: 20em;
border-radius: 30%;
box-shadow: 0.25em 0 0 #964414;
opacity: .5;
transform: translate3d(5em, 0em, 0) rotate(-50deg);
}
}
& > i:nth-of-type(35) {
width: 15em;
height: 15em;
border-radius: 40%;
transform: translate3d(70em, 37em, 0) rotate(-35deg);
box-shadow: -.1em -.1em 0 #9F491D;
opacity: .75;
&:before {
width: 15em;
height: 13em;
border-radius: 40%;
transform: translate3d(-1em, -6em, 0);
box-shadow: -.1em -.1em 0 #cb6916;
opacity: .5;
}
&:after {
width: 15em;
height: 13em;
border-radius: 40%;
transform: translate3d(3em, -11em, 0) rotate(-55deg);
box-shadow: -.1em -.1em 0 #9F491D;
opacity: .5;
}
}
& > i:nth-of-type(39) {
width: 50em;
height: 50em;
transform: translate3d(-42em, 48em, 0);
box-shadow: .25em 0 0 #C1A33B, inset -.2em .2em 0 #d0c18e, 0 1em 0 #c1953b;
opacity: .75;
border: .5em solid $none;
&:before {
width: 50em;
height: 40em;
border-radius: 0 50% 30% 0;
transform: translate3d(-2em, 1em, 0);
box-shadow: .25em .25em 0 #C1A33B, inset -.2em .2em 0 #d0c18e, inset 0 1em 0 #c1953b, inset 0 -1em 0 #c1953b;
opacity: .75;
border: .5em solid $none;
}
&:after {
width: 50em;
height: 50em;
transform: translate3d(-4em, -1em, 0);
box-shadow: .25em 0 0 #C1A33B, inset -.2em .2em 0 #d0c18e, 0 2em 0 #c1953b;
opacity: .75;
border: .5em solid $none;
}
}
& > i:nth-of-type(40) {
width: 50em;
height: 50em;
transform: translate3d(-47em, 45em, 0);
box-shadow: .25em 0 0 #C1A33B, inset -.2em .2em 0 #d0c18e, 0 1em 0 #c1953b;
border: .5em solid $none;
&:before {
width: 50em;
height: 40em;
border-radius: 0 50% 30% 0;
transform: translate3d(-2em, 1em, 0);
box-shadow: .25em .25em 0 #C1A33B, inset -.2em .2em 0 #d0c18e, inset 0 1em 0 #c1953b, inset 0 -1em 0 #c1953b;
opacity: .75;
border: .5em solid $none;
}
&:after {
width: 50em;
height: 50em;
box-shadow: .15em 0 0 #C1A33B, inset -.15em .15em 0 #d0c18e;
border: .5em solid $none;
transform: translate3d(2em, 0em, 0);
}
}
& > i:nth-of-type(36) {
width: 30em;
height: 30em;
box-shadow: .25em 0 0 #C1A33B, inset -.2em .2em 0 #d0c18e, 0 -1em 0 #c1953b;
border: .5em solid $none;
transform: translate3d(-21em, 48em, 0);
&:before {
width: 30em;
height: 27em;
border-radius: 0 50% 30% 0;
box-shadow: .25em .25em 0 #C1A33B, inset -.2em .2em 0 #d0c18e, inset 0 -1em 0 #c1953b;
opacity: .75;
border: .5em solid $none;
transform: translate3d(-2em, 0em, 0);
}
&:after {
width: 30em;
height: 23em;
box-shadow: .15em 0 0 #C1A33B, inset -.15em .15em 0 #d0c18e;
border: .5em solid $none;
transform: translate3d(2em, 1em, 0);
}
}
& > i:nth-of-type(37) {
width: 30em;
height: 30em;
box-shadow: .25em 0 0 #C1A33B, inset -.2em .2em 0 #d0c18e, 0 -1em 0 #c1953b;
border: .5em solid $none;
transform: translate3d(-23em, 48em, 0);
&:before {
width: 30em;
height: 27em;
border-radius: 0 50% 30% 0;
box-shadow: .25em .25em 0 #C1A33B, inset -.2em .2em 0 #d0c18e, inset 0 -1em 0 #c1953b;
opacity: .75;
border: .5em solid $none;
transform: translate3d(-1em, 0em, 0);
}
&:after {
width: 30em;
height: 23em;
box-shadow: .15em 0 0 #C1A33B, inset -.15em .15em 0 #d0c18e;
border: .5em solid $none;
transform: translate3d(-2em, 1em, 0);
}
}
& > i:nth-of-type(38) {
width: 30em;
height: 30em;
box-shadow: .25em -.25em 0 #D07B3C;
transform: translate3d(-16em, 52em, 0);
&:before {
width: 30em;
height: 30em;
box-shadow: 0 .25em 0 #D07B3C;
transform: translate3d(-3em, -20em, 0);
}
&:after {
width: 30em;
height: 30em;
box-shadow: 0 .15em 0 #571A0C;
transform: translate3d(-5em, -35em, 0);
opacity: .5;
}
}
}
hair:nth-of-type(2) {
transform: translate3d(1em,0,0);
opacity: .3;
filter: hue-rotate(-30deg);
}
shadows {
& > i:nth-of-type(1) {
width: 12em;
height: 12em;
transform: translate3d(55em, 12em, 0) rotate(20deg);
background: linear-gradient(to right,$none, #8F441C);
border-radius: 0;
&:before {
width: 30em;
height: 30em;
transform: translate3d(-20em, -15em, 0) rotate(-20deg);
background: linear-gradient(to right,$none, #c3812c);
opacity: .5;
border-radius: 0;
}
&:after {
width: 20em;
height: 50em;
background: linear-gradient(to right,$none, #A22429);
opacity: .5;
transform: translate3d(-25em, -26em, 0) rotate(-60deg) skewY(40deg);
border-radius: 0;
}
}
& > i:nth-of-type(2) {
width: 80em;
height: 107em;
transform: translate3d(-6em, 0em, 0) rotate(-25deg);
border-radius: 30% 30% 30% 10% / 50% 50% 50% 40%;
box-shadow: inset -1em -1em 5em #732519, inset -2em -2em 5em #CD904C;
&:after {
width: 20em;
height: 50em;
background: #070707;
transform: translate3d(80.5em, 35em, 0) rotate(-10deg);
box-shadow: 0 0 1em #070707;
}
&:before {
height: 5em;
width: 20em;
background: #b5654b;
border-radius: 1em;
transform: translate3d(71em, 47em, 0) rotate(30deg) skewX(45deg);
opacity: .5;
filter: blur(1em);
box-shadow: 3em -1.5em 0 0 #b5654b;
}
}
}
facehair {
opacity: .75;
& > i:nth-of-type(1) {
width: .15em;
height: 1.5em;
transform: translate3d(34em, 30em, 0) rotate(-75deg) skewX(-35deg);
background: #c88e68;
border-radius: 0 30% 70% 0;
opacity: .15;
box-shadow: 2em .5em 0 #c88e68, 1.25em -.4em 0 #c88e68, 2.75em -.25em 0 #c88e68, 3em .25em 0 #c88e68;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, 1em, 0);
background: #c88e68;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #c88e68, 1.25em -.4em 0 #c88e68, 2.75em -.25em 0 #c88e68, 3em .25em 0 #c88e68;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, .5em, 0);
background: #c88e68;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #c88e68, 1.25em -.4em 0 #c88e68, 2.75em -.25em 0 #c88e68, 3em .25em 0 #c88e68;
}
}
& > i:nth-of-type(2) {
width: .15em;
height: 1.5em;
transform: translate3d(32em, 30em, 0) rotate(-70deg) skewX(-35deg);
background: #c88e68;
border-radius: 0 30% 70% 0;
opacity: .15;
box-shadow: 2em .5em 0 #c88e68, 1.25em -.4em 0 #c88e68, 2.75em -.25em 0 #c88e68, 3em .25em 0 #c88e68;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, 1em, 0);
background: #c88e68;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #c88e68, 1.25em -.4em 0 #c88e68, 2.75em -.25em 0 #c88e68, 3em .25em 0 #c88e68;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, .5em, 0);
background: #c88e68;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #c88e68, 1.25em -.4em 0 #c88e68, 2.75em -.25em 0 #c88e68, 3em .25em 0 #c88e68;
}
}
& > i:nth-of-type(3) {
width: .15em;
height: 1.5em;
transform: translate3d(30em, 30em, 0) rotate(-50deg) skewX(-35deg);
background: #c88e68;
border-radius: 0 30% 70% 0;
opacity: .2;
box-shadow: 2em .5em 0 #c88e68, 1.25em -.4em 0 #c88e68, 2.75em -.25em 0 #c88e68, 3em .25em 0 #c88e68;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, 1em, 0);
background: #c88e68;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #c88e68, 1.25em -.4em 0 #c88e68, 2.75em -.25em 0 #c88e68, 3em .25em 0 #c88e68;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, .5em, 0);
background: #c88e68;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #c88e68, 1.25em -.4em 0 #c88e68, 2.75em -.25em 0 #c88e68, 3em .25em 0 #c88e68;
}
}
& > i:nth-of-type(4) {
width: .15em;
height: 1.5em;
transform: translate3d(24em, 33em, 0) rotate(-60deg) skewX(-35deg);
background: #c88e68;
border-radius: 0 30% 70% 0;
opacity: .15;
box-shadow: 2em .5em 0 #c88e68, 1.25em -1em 0 #c88e68, 2.75em .25em 0 #c88e68, 3em .75em 0 #c88e68;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, -1em, 0);
background: #c88e68;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #c88e68, 1.25em -.4em 0 #c88e68, 2.75em -.25em 0 #c88e68, 3em .25em 0 #c88e68;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, -.5em, 0);
background: #c88e68;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #c88e68, 1.25em -.4em 0 #c88e68, 2.75em -.25em 0 #c88e68, 3em .25em 0 #c88e68;
}
}
& > i:nth-of-type(5) {
width: .15em;
height: 1.5em;
transform: translate3d(25em, 34em, 0) rotate(-50deg) skewX(-35deg);
background: #c88e68;
border-radius: 0 30% 70% 0;
opacity: .15;
box-shadow: 2em .5em 0 #c88e68, 1.25em -1em 0 #c88e68, 2.75em .25em 0 #c88e68, 3em .75em 0 #c88e68;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, -1em, 0);
background: #c88e68;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #c88e68, 1.25em -.4em 0 #c88e68, 2.75em -.25em 0 #c88e68, 3em .25em 0 #c88e68;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, -.5em, 0);
background: #c88e68;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #c88e68, 1.25em -.4em 0 #c88e68, 2.75em -.25em 0 #c88e68, 3em .25em 0 #c88e68;
}
}
& > i:nth-of-type(20) {
width: .15em;
height: 1.5em;
transform: translate3d(20em, 30em, 0) rotate(-80deg) skewX(-35deg);
background: #c88e68;
border-radius: 0 30% 70% 0;
opacity: .15;
box-shadow: 2em .5em 0 #c88e68, 1.25em -1em 0 #c88e68, 2.75em .25em 0 #c88e68, 3em .75em 0 #c88e68;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, -1em, 0);
background: #c88e68;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #c88e68, 1.25em -.4em 0 #c88e68, 2.75em -.25em 0 #c88e68, 3em .25em 0 #c88e68;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, -.5em, 0);
background: #c88e68;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #c88e68, 1.25em -.4em 0 #c88e68, 2.75em -.25em 0 #c88e68, 3em .25em 0 #c88e68;
}
}
& > i:nth-of-type(22) {
width: .15em;
height: 1.5em;
transform: translate3d(21em, 32em, 0) rotate(-75deg) skewX(-35deg);
background: #c88e68;
border-radius: 0 30% 70% 0;
opacity: .15;
box-shadow: 2em .5em 0 #c88e68, 1.25em -1em 0 #c88e68, 2.75em .25em 0 #c88e68, 3em .75em 0 #c88e68;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, -1em, 0);
background: #c88e68;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #c88e68, 1.25em -.4em 0 #c88e68, 2.75em -.25em 0 #c88e68, 3em .25em 0 #c88e68;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, -.5em, 0);
background: #c88e68;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #c88e68, 1.25em -.4em 0 #c88e68, 2.75em -.25em 0 #c88e68, 3em .25em 0 #c88e68;
}
}
& > i:nth-of-type(6) {
width: .15em;
height: 1.5em;
transform: translate3d(28em, 78em, 0) rotate(-25deg) skewX(-35deg);
background: #faecd9;
border-radius: 0 30% 70% 0;
opacity: .2;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, 1em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, .5em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
}
& > i:nth-of-type(7) {
width: .15em;
height: 1.5em;
transform: translate3d(29em, 75em, 0) rotate(-30deg) skewX(-35deg);
background: #faecd9;
border-radius: 0 30% 70% 0;
opacity: .15;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, 1em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, .5em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
}
& > i:nth-of-type(8) {
width: .15em;
height: 1.5em;
transform: translate3d(30em, 72em, 0) rotate(-35deg) skewX(-35deg);
background: #faecd9;
border-radius: 0 30% 70% 0;
opacity: .2;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, 1em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, .5em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
}
& > i:nth-of-type(9) {
width: .15em;
height: 1.5em;
transform: translate3d(30em, 74em, 0) rotate(-45deg) skewX(-35deg);
background: #faecd9;
border-radius: 0 30% 70% 0;
opacity: .15;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, 1em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, .5em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
}
& > i:nth-of-type(10) {
width: .15em;
height: 1.5em;
transform: translate3d(35em, 71em, 0) rotate(-45deg) skewX(-35deg);
background: #faecd9;
border-radius: 0 30% 70% 0;
opacity: .2;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, 1em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, .5em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
}
& > i:nth-of-type(21) {
width: .15em;
height: 1.5em;
transform: translate3d(34em, 68em, 0) rotate(-55deg) skewX(-35deg);
background: #faecd9;
border-radius: 0 30% 70% 0;
opacity: .2;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, 1em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, .5em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
}
& > i:nth-of-type(11) {
width: .15em;
height: 1.5em;
transform: translate3d(45em, 65em, 0) rotate(-75deg) skewX(-35deg);
background: #faecd9;
border-radius: 0 30% 70% 0;
opacity: .25;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, -1em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, -.5em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
}
& > i:nth-of-type(12) {
width: .15em;
height: 1.5em;
transform: translate3d(46em, 68em, 0) rotate(-75deg) skewX(-35deg);
background: #faecd9;
border-radius: 0 30% 70% 0;
opacity: .25;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, -1em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, -.5em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
}
& > i:nth-of-type(13) {
width: .15em;
height: 1.5em;
transform: translate3d(50em, 69em, 0) rotate(-65deg) skewX(-35deg);
background: #faecd9;
border-radius: 0 30% 70% 0;
opacity: .25;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, -1em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, -.5em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
}
& > i:nth-of-type(14) {
width: .15em;
height: 1.5em;
transform: translate3d(47em, 65em, 0) rotate(-75deg) skewX(-35deg);
background: #faecd9;
border-radius: 0 30% 70% 0;
opacity: .2;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, -1em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, -.5em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
}
& > i:nth-of-type(15) {
width: .15em;
height: 1.5em;
transform: translate3d(49em, 66em, 0) rotate(-80deg) skewX(-35deg);
background: #faecd9;
border-radius: 0 30% 70% 0;
opacity: .15;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, -1em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, -.5em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
}
& > i:nth-of-type(16) {
width: .15em;
height: 1.5em;
transform: translate3d(54em, 68em, 0) rotate(-70deg) skewX(-35deg);
background: #faecd9;
border-radius: 0 30% 70% 0;
opacity: .15;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-5em, -1em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(-2em, -.5em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
}
& > i:nth-of-type(17) {
width: .15em;
height: 1.5em;
transform: translate3d(56em, 69em, 0) rotate(-75deg) skewX(-35deg);
background: #faecd9;
border-radius: 0 30% 70% 0;
opacity: .2;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-1em, 2em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(2em, 3em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
}
& > i:nth-of-type(18) {
width: .15em;
height: 1.5em;
transform: translate3d(58em, 70em, 0) rotate(-70deg) skewX(-35deg);
background: #faecd9;
border-radius: 0 30% 70% 0;
opacity: .15;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-1em, 2em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(2em, 3em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
}
& > i:nth-of-type(19) {
width: .15em;
height: 1.5em;
transform: translate3d(60em, 71em, 0) rotate(-65deg) skewX(-35deg);
background: #faecd9;
border-radius: 0 30% 70% 0;
opacity: .1;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
&:before {
width: .15em;
height: 1.5em;
transform: translate3d(-1em, 2em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
&:after {
width: .15em;
height: 1.5em;
transform: translate3d(2em, 3em, 0);
background: #faecd9;
border-radius: 0 30% 70% 0;
box-shadow: 2em .5em 0 #faecd9, 1.25em -.4em 0 #faecd9, 2.75em -.25em 0 #faecd9, 3em .25em 0 #faecd9;
}
}
}
freckles {
& > i:nth-of-type(1) {
width: .5em;
height: .35em;
transform: translate3d(38em, 40em, 0) rotate(20deg);
background: #c15914;
opacity: .5;
filter: blur(.15em);
box-shadow: .5em 2.5em 0 #BF1D24, 4em 2em 0 -.05em #BF1D24;
&:before {
width: .5em;
height: .35em;
transform: translate3d(8em, 2.5em, 0) rotate(-10deg);
background: #c15914;
box-shadow: .5em 2em 0 #BF1D24, 4em 1em 0 -.05em #BF1D24;
}
&:after {
width: .5em;
height: .35em;
transform: translate3d(-3em, 2.5em, 0) rotate(-20deg);
background: #c15914;
box-shadow: .5em 3em 0 -.05em #BF1D24, -1em 1em 0 -.05em #BF1D24;
}
}
& > i:nth-of-type(2) {
width: .5em;
height: .35em;
transform: translate3d(70em, 70em, 0) rotate(20deg);
background: #BF1D24;
opacity: .5;
filter: blur(.15em);
box-shadow: .5em 2.5em 0 #BF1D24, 4em 2em 0 -.05em #BF1D24;
&:before {
width: .75em;
height: .5em;
transform: translate3d(-3em, -9em, 0) rotate(-10deg);
background: #BF1D24;
box-shadow: -1em 6em 0 #BF1D24, -2em 1em 0 -.1em #BF1D24;
}
&:after {
width: .5em;
height: .35em;
transform: translate3d(-3em, 2.5em, 0) rotate(-20deg);
background: #c15914;
box-shadow: .5em 3em 0 -.05em #9d4409, -1em 1em 0 -.05em #9d4409;
}
}
& > i:nth-of-type(3) {
width: .5em;
height: .35em;
transform: translate3d(52em, 58em, 0) rotate(-20deg);
background: rgba(#c15914,.5);
opacity: .45;
filter: blur(.15em);
box-shadow: -1em 4em 0 -.1em #c15914, 5em 4em 0 -.05em #BF1D24;
&:before {
width: .5em;
height: .35em;
transform: translate3d(-22em, -15em, 0) rotate(-60deg);
background: #c15914;
box-shadow: 4em -1em 0 #BF1D24, 9em .5em 0 -.05em #BF1D24;
opacity: .8;
}
}
& > i:nth-of-type(4) {
width: .5em;
height: .35em;
transform: translate3d(16em, 60em, 0);
background: #BF1D24;
opacity: .5;
filter: blur(.15em);
box-shadow:
-3.5em 2.5em 0 #BF1D24,
-1em 7em 0 -0.05em #BF1D24,
.5em -2em 0 -0.05em #BF1D24,
-.25em -1em 0 -0.025em #BF1D24;
&:before {
width: .75em;
height: .5em;
transform: translate3d(20em, 15em, 0);
background: #BF1D24;
box-shadow: -1em 2em 0 #BF1D24, -2em 1em 0 -0.1em #BF1D24;
opacity:.5;
}
&:after {
width: .5em;
height: .35em;
transform: translate3d(15em, -45em, 0) rotate(-20deg);
background: #c15914;
box-shadow: -5em 3em 0 -.05em #9d4409, -10em 1em 0 -.05em #9d4409;
}
}
}
picframe {
width: 100%;
height: 100%;
box-shadow: inset 0 0 5em #000, inset 0 0 5em #000, inset 0 5em 5em -5em #000;
border-radius: 5em;
}
sig {
&, * {
height: 9.25em;
overflow: hidden;
border-radius: .5em;
}
font-size: .5em;
color: $body;
opacity:.75;
width: 10em;
top: auto;
left: auto;
bottom: 2em;
right: 2em;
transform: skewX(10deg) scaleY(.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: .5em 2em .5em 2em;
}
* {
width: 5em;
transform: translate3d(3.75em,0,0) scaleY(.95);
&:before {
transform: translate3d(-3em,-2em,0) rotate(-45deg);
box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor;
border-radius: .5em;
}
}
}// A Pure CSS Portrait
// No images, just CSS
// Probably doesn't work on Edge and it's going to struggle on mobile
// www.instagram.com/ivorjetski
// twitter.com/ivorjetski
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.