├── thumb.jpg
├── preview.png
├── README.md
├── style.css
└── index.html
/thumb.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cyanharlow/purecss-lace/HEAD/thumb.jpg
--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cyanharlow/purecss-lace/HEAD/preview.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Pure CSS Lace
2 |
3 | An ongoing series in which I create art using only CSS and HTML.
4 |
5 | Inspired by Flemish baroque portraits.
6 |
7 | Rules I have for myself:
8 |
9 | 1. All elements must be typed out by hand
10 | 2. Only Atom text editor and Chrome Developer Tools allowed.
11 | 3. ~~SVG use is limited, and all shapes can only use hand-plotted coordinates and bezier curves - without the aid of any graphics editor.~~
12 | (Note: at one point I was using one or two SVG elements but I eventually grew tired of them and they've since been deleted, so this rule no longer applies. No offense to SVG.)
13 |
14 | Because of the artistic nature of this project I have not concerned myself with cross-browser-compatibility, so the live preview will most likely look laughable in anything other than chrome.
15 |
16 | [cyanharlow.github.io/purecss-lace](https://cyanharlow.github.io/purecss-lace/)
17 |
18 | 
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | overflow-x: hidden;
3 | font-size: 10px;
4 | }
5 |
6 | html, body {
7 | background-color: #080707;
8 | }
9 |
10 | body {
11 | padding: 0;
12 | margin: 4em auto;
13 | text-align: center;
14 | font-family: 'Arial', sans-serif;
15 | }
16 |
17 | .linksection {
18 | font-size: 12px;
19 | text-align: center;
20 | position: static;
21 | padding: 0 0 36px;
22 | font-family: 'Century Gothic', Arial, sans-serif;
23 | color: #423730;
24 | }
25 |
26 | .linksection .separator {
27 | padding: 0 5px;
28 | }
29 |
30 | .linksection a {
31 | color: #584937;
32 | }
33 |
34 | .frame {
35 | margin: auto;
36 | width: 80.0em;
37 | height: 79.3em;
38 | overflow: hidden;
39 | background-image: linear-gradient(to bottom, #211c17, #080707);
40 | background-size: 100% 100%;
41 | position: relative;
42 | }
43 |
44 | .inner-frame {
45 | height: 100%;
46 | width: 100%;
47 | position: absolute;
48 | overflow: hidden;
49 | }
50 |
51 | body .inner-frame * {
52 | box-sizing: border-box;
53 | position: absolute;
54 | }
55 |
56 | div:after, div:before {
57 | content: "";
58 | display: block;
59 | position: absolute;
60 | }
61 |
62 | .character {
63 | width: 50.0em;
64 | height: 90.0em;
65 | margin: auto;
66 | right: 0;
67 | left: -7%;
68 | top: -16%;
69 | position: absolute;
70 | transform: scale(0.5);
71 | /* overflow: hidden; */
72 | }
73 |
74 | .character * {
75 | position: absolute;
76 | }
77 |
78 | .head {
79 | background-color: #f3d5bb;
80 | background-image: radial-gradient(circle at 56% 9%, #da1f2821 8%, rgba(254, 251, 251, 0) 29%), radial-gradient(circle at 52% 16%, #f7f2e2 5%, rgba(253, 246, 235, 0) 27%), radial-gradient(circle at 16% 16%, #907b65b8 15%, rgba(115, 92, 59, 0) 26%), linear-gradient(98deg, rgba(125, 91, 61, 0.76) 14%, rgba(111, 80, 51, 0) 31%) ,radial-gradient(ellipse closest-corner at 35% 50%, #dac5a6, #c39f7d);
81 | overflow: hidden;
82 | width: 90%;
83 | height: 70%;
84 | margin: auto;
85 | position: absolute;
86 | border-radius: 29% 54% 70% 30% / 43% 45% 50% 56%;
87 | box-shadow: -0.3em -2.7em 1.1em -2em #b59e83, 3.5em -5.1em 1.5em -4.4em #b79c7d, inset -0.5em -1.1em 1.8em -1.1em #7b6246, inset -0.4em 1.6em 0.9em -0.8em #b59c7f, inset -0.7em -0.9em 1.9em -1em #af8376, inset 2.2em -3em 2.4em -1em #291010, inset -4em -2.7em 8em 0.3em #947968, inset -6em -0.2em 8em 3em #cdccaf, 1.3em 2.7em 0.8em -2em #2d040442, -14px -1px 8px -11px #150d0da8;
88 | text-shadow: 0 0 black;
89 | z-index: 9;
90 | transform: translateZ(99em);
91 | }
92 |
93 | .noseshadow {
94 | height: 16%;
95 | bottom: 13%;
96 | left: 15%;
97 | box-shadow: 0 0 3.0em 2.2em #613e34, -2.5em 0 3.5em 1.0em #2f1407cf;
98 | }
99 |
100 | .nose {
101 | width: 29%;
102 | height: 31%;
103 | top: 38%;
104 | left: 12%;
105 | }
106 |
107 | .nose:after {
108 | bottom: 29%;
109 | right: 41%;
110 | box-shadow: -2em 1.9em 1em 0.9em #f9eeee, 0 0 5.8em 3.6em #c56854de;
111 | }
112 |
113 | .nose .tip {
114 | border-radius: 34% 54% 30% 46% / 62% 52% 45% 37%;
115 | background-color: #deb4a5;
116 | background-image: radial-gradient(ellipse at 44% 7%, #fdf6f6 9%, rgba(247, 228, 226, 0) 29%), linear-gradient(105deg, #461a1a 9%, transparent 21%), radial-gradient(ellipse at 71% 37%, #f7f0e2, rgba(252, 251, 250, 0) 55%), radial-gradient(ellipse farthest-corner at 130% 33%, transparent 49%, #9e7b5a 133%), radial-gradient(ellipse at 62% 33%, #ecddc2, rgba(237, 223, 216, 0));
117 | width: 80%;
118 | height: 37%;
119 | bottom: 0;
120 | left: 5%;
121 | overflow: hidden;
122 | box-shadow: inset 1.6em -2.3em 1em -1.8em #5f3b31, inset 2.6em -0.1em 1.5em -1.8em #8e7357, -1.7em 2.9em 1.1em -2.1em #2b1915, 0.3em 1.6em 0.6em -1.1em #29120d91, -1.6em 1.8em 2.3em -1.1em #29120d9c, 2.2em 0.2em 2em -2em #c7998f, inset -0.7em -1.7em 1.6em -0.6em #b39a8b, 1.3em 0.8em 0.8em -1em #b39a8b, 3.4em 3.4em 1.4em -1.7em #fdeeddcf, 1.3em -3em 0.951em -2em #e8d5d0;
123 | transform: rotate(1deg);
124 | }
125 |
126 | .nose .edge {
127 | height: 58%;
128 | left: 71%;
129 | top: 8%;
130 | transform: rotate(18deg);
131 | box-shadow: 0 0 2em 0.2em #b78a68, -2em 0 1.4em 0.58em #fffaef;
132 | }
133 |
134 | .nose .edge:before {
135 | height: 70%;
136 | top: 55%;
137 | box-shadow: -2em 0 1em 1.5em #f7e4d0;
138 | }
139 |
140 | .nose .edge:after {
141 | height: 58%;
142 | top: 18%;
143 | transform: rotate(-5deg);
144 | box-shadow: -0.6em 0 1.2em 0.2em #967861c4, -1.7em 0 0.86em 0.3em #fffefc;
145 | }
146 |
147 | .nose .tipshadow {
148 | box-shadow: 0 0 2.0em 1.1em #7337318f;
149 | bottom: 3%;
150 | left: 19%;
151 | width: 47%;
152 | transform: rotate(9deg);
153 | }
154 |
155 | .nostril.left {
156 | transform: rotate(-55deg);
157 | box-shadow: 0 0 0.4em 0.3em #130101, -0.7em 0.4em 0.5em 1.4em #48291d, 1.5em 0.6em 0.7em 0.6em #b7a082;
158 | bottom: -4%;
159 | height: 26%;
160 | left: 20%;
161 | }
162 |
163 | .nostril.right {
164 | transform: rotate(2deg);
165 | box-shadow: 0 0 0.4em 0.3em #0a0101, -0.8em 0.1em 0.7em 0.7em #48291d;
166 | bottom: 6%;
167 | width: 26%;
168 | height: 6%;
169 | left: 53%;
170 | border-radius: 50%;
171 | background: #0a0101;
172 | }
173 |
174 | .outer-bridge {
175 | overflow: hidden;
176 | transform: rotate(13deg);
177 | background-image: radial-gradient(ellipse at 100% 0, rgba(88, 20, 17, 0.12) 28%, transparent 56%);
178 | border-radius: 45% 53% 2% 17% / 6% 26% 49% 15%;
179 | box-shadow: 0.1em -2.3em 1.7em -1.4em #674037, 1.2em -0.6em 1.0em -0.4em #8e7267;
180 | width: 25%;
181 | height: 35%;
182 | top: 33%;
183 | left: -5%;
184 | }
185 |
186 | .inner-bridge {
187 | height: 100%;
188 | width: 100%;
189 | border-radius: inherit;
190 | box-shadow: inset -0.3em 3.3em 2.0em -1.4em #48292291;
191 | }
192 |
193 | .inner-bridge:after {
194 | height: 90%;
195 | right: 0;
196 | box-shadow: 0 0 1.0em 1.1em #613e39;
197 | transform: rotate(4deg);
198 | }
199 |
200 | .mouth {
201 | bottom: 17%;
202 | width: 30%;
203 | height: 9%;
204 | left: 13%;
205 | transform: rotate(3deg);
206 | }
207 |
208 | .toplips {
209 | border-radius: 0 0 49% 50% / 55% 0 27% 35%;
210 | width: 100%;
211 | left: 0;
212 | height: 49%;
213 | overflow: hidden;
214 | box-shadow: -0.2em 1.3em 0.3em -1.2em #230404, -1.3em 0.9em 0.8em -1.2em #190000, 0.5em 0.8em 1.1em -0.7em #2d0808, 1.4em 1.1em 0.3em -1.3em #270303;
215 | }
216 |
217 | .toplips:after {
218 | width: 109%;
219 | height: 100%;
220 | border-radius: inherit;
221 | box-shadow: inset -0.9em -1.1em 1.0em -0.9em #4a0b0b;
222 | }
223 |
224 | .topleftlip {
225 | background-color: #d08178;
226 | background-image: linear-gradient(31deg, #1f0303 39%, #752727, rgba(99, 54, 34, 0) 96%);
227 | box-shadow: inset 1.4em 0.2em 0.6em -0.6em #502323, inset -0.5em 0.3em 0.3em -0.3em #ad8162;
228 | height: 106%;
229 | left: 0%;
230 | width: 37%;
231 | bottom: -26%;
232 | border-radius: 45% 50% 9% 51% / 94% 70% 30% 12%;
233 | transform: rotate(-20deg);
234 | }
235 |
236 | .toprightlip {
237 | background-color: #ce9590;
238 | background-image: linear-gradient(1deg, #632922, #773630, rgba(110, 35, 32, 0) 80%);
239 | box-shadow: inset 0.0em 0.8em 0.4em -0.5em #dcbcab;
240 | height: 118%;
241 | bottom: 0;
242 | right: 9%;
243 | width: 58%;
244 | border-radius: 30% 70% 9% 9% / 67% 70% 30% 9%;
245 | transform: rotate(11deg);
246 | transform-origin: 0 100%;
247 | }
248 |
249 | .bottomlips {
250 | border-radius: 35% 0 62% 38% / 41% 0 99% 58%;
251 | width: 94%;
252 | right: 0;
253 | bottom: 0;
254 | height: 89%;
255 | }
256 |
257 | .bottomlips:before {
258 | left: 36%;
259 | top: 40%;
260 | box-shadow: 0 0 0.6em 0.4em black;
261 | width: 16%;
262 | }
263 |
264 | .bottomleftlip {
265 | width: 91%;
266 | bottom: 0;
267 | height: 65%;
268 | background-color: #efb8b8;
269 | border-radius: 0% 0 62% 34% / 0% 0 99% 93%;
270 | box-shadow: 1.4em 0.9em 0.7em -1.2em #d0a7a2, -0.4em 0.1em 0.3em 0.0em #581f1f, -1.0em 2.1em 1.1em -1.0em #502020bd, -2.2em 1.4em 1.8em 0.4em #38201396;
271 | background-image: radial-gradient(ellipse at 48% 45%, #dc7e7e, rgba(246, 150, 161, 0) 48%), linear-gradient(99deg, #460808, rgba(89, 20, 16, 0));
272 | }
273 |
274 | .bottomrightlip {
275 | transform: rotate(-3deg);
276 | bottom: 43%;
277 | width: 29%;
278 | right: 32%;
279 | box-shadow: 0 0 0.4em 0.1em white;
280 | }
281 |
282 | .chin {
283 | bottom: 3%;
284 | left: 18%;
285 | border-radius: 50%;
286 | width: 27%;
287 | height: 11%;
288 | filter: blur(0.4em);
289 | background-image: radial-gradient(ellipse at 92% 68%, transparent 50%, #f3eede36, rgba(255, 255, 255, 0) 81%), radial-gradient(ellipse at 60% 68%, #d810501f, rgba(243, 232, 233, 0) 61%), radial-gradient(ellipse at 43% 23%, #f3e1bb, rgba(249, 238, 235, 0) 40%);
290 | }
291 |
292 | .mouthcorner {
293 | right: -1%;
294 | top: 38%;
295 | height: 8%;
296 | width: 11%;
297 | background: #542e2e;
298 | border-radius: 50%;
299 | transform: rotate(-12deg);
300 | box-shadow: -0.3em 1.1em 0.76em 0.4em #efd9cdd1, 0.8em 0.1em 0.8em 0.2em #986362, 0.2em -0.6em 1.6em 0.2em #61312f;
301 | }
302 |
303 | .mouthcornerleft {
304 | left: 4%;
305 | top: 28%;
306 | height: 31%;
307 | transform: rotate(-60deg);
308 | box-shadow: 0.2em -0.6em 1.6em 0.9em #381a15, -0.4em 0.4em 1.1em 0.5em #f7d4c5;
309 | }
310 |
311 | .eyeleft {
312 | width: 97%;
313 | height: 46%;
314 | left: 1%;
315 | top: 5%;
316 | background-image: radial-gradient(ellipse closest-side at 50% 50%, #3c1d111f 67%, rgba(69, 31, 28, 0));
317 | border-radius: 50% 50% 30% 70% / 50% 50% 50% 50%;
318 | }
319 |
320 | .eyeright {
321 | width: 54%;
322 | height: 26%;
323 | left: 29%;
324 | top: 30.3%;
325 | background-image: radial-gradient(ellipse closest-side at 50% 49%, #a98e77 53%, rgba(214, 176, 156, 0) 83%), radial-gradient(ellipse closest-side at 50% 50%, #ad8e79 10%, rgba(215, 190, 164, 0));
326 | }
327 |
328 | .cheek {
329 | bottom: 26%;
330 | right: 11%;
331 | border-radius: 50% 50% 60% 39% / 9% 39% 59% 93%;
332 | width: 57%;
333 | height: 40%;
334 | filter: blur(0.5em);
335 | background-image: radial-gradient(ellipse at 40% 65%, rgba(220, 0, 51, 0.08) 8%, transparent 46%), radial-gradient(ellipse at 24% 50%, rgba(255, 252, 247, 0.6), rgba(255, 255, 255, 0) 20%), radial-gradient(ellipse at 64% 56%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 28%);
336 | box-shadow: inset -2.2em -8.3em 4.0em -5.9em rgba(128, 98, 98, 0.5), 2.6em 4.9em 4.0em -2.5em rgba(128, 98, 98, 0.5);
337 | }
338 |
339 | .eyeright .toplid {
340 | background-image: linear-gradient(95deg, #92725a, #9c736c 43%, #ceaba5, #9c7f72 76%, #9f8167);
341 | border-radius: 52% 50% 50% 50% / 90% 90% 10% 10%;
342 | width: 45%;
343 | height: 26%;
344 | bottom: 41%;
345 | left: 23%;
346 | box-shadow: 0.3em -1.0em 0.3em -0.8em #5d3425, 0.8em -1.1em 2.0em -0.1em #4e231c, inset 0 1.5em 0.4em -1.2em #906a62, -0.9em -1.6em 2.0em -0.5em #ca9f7a, -2.3em -0.9em 2.0em 0.2em #846559;
347 | }
348 |
349 | .eye:after {
350 | width: 100%;
351 | height: 100%;
352 | border-radius: inherit;
353 | }
354 |
355 | .eyeright .bottomlid {
356 | border-radius: 40% 60% 50% 50% / 10% 10% 90% 90%;
357 | width: 46%;
358 | height: 33%;
359 | bottom: 15%;
360 | left: 23%;
361 | background-image: radial-gradient(ellipse at 53% 44%, #a98578 35%, rgba(213, 170, 155, 0) 54%), radial-gradient(ellipse at 53% 11%, #744e40 34%, #94765e, rgba(129, 101, 50, 0) 66%);
362 | }
363 |
364 | .eyeright .eye {
365 | overflow: hidden;
366 | border-radius: 99% 0;
367 | background-image: radial-gradient(circle at 11% 8%, #f9f0e2 23%, #71655d 78%);
368 | height: 43%;
369 | width: 23%;
370 | left: 34%;
371 | bottom: 23%;
372 | transform: rotate(55deg);
373 | box-shadow: -0.1em -0.6em 0.3em -0.2em #170808c4, 1.6em -1.0em 0.1em -1.6em white, inset -0.1em 0.1em 0.2em 0.2em #58282838, 0.5em 0.1em 0.2em 0.1em #c39898bd, -0.1em -0.2em 0.2em 0.0em #8c635f;
374 | }
375 |
376 | .eyeright .eye:after {
377 | box-shadow: inset 0.9em 0.9em 0.4em -0.8em #150c0bc2;
378 | }
379 |
380 | .eyeright .iris {
381 | top: 6%;
382 | right: 11%;
383 | width: 75%;
384 | height: 58%;
385 | background-color: #8e6c4c;
386 | color: rgba(0,0,0,0.5);
387 | background-image: linear-gradient(90deg, transparent 48%, currentColor, transparent 52%), linear-gradient(20deg, transparent 48%, currentColor, transparent 52%), linear-gradient(40deg, transparent 48%, currentColor, transparent 52%), linear-gradient(60deg, transparent 48%, currentColor, transparent 52%), linear-gradient(80deg, transparent 48%, currentColor, transparent 52%), linear-gradient(100deg, transparent 48%, currentColor, transparent 52%), linear-gradient(120deg, transparent 48%, currentColor, transparent 52%), linear-gradient(140deg, transparent 48%, currentColor, transparent 52%), linear-gradient(160deg, transparent 48%, currentColor, transparent 52%), linear-gradient(180deg, transparent 48%, currentColor, transparent 52%), linear-gradient(131deg, rgba(14, 7, 4, 0.84) 31%, transparent 61%), linear-gradient(131deg, rgba(14, 7, 4, 0.89) 31%, transparent 61%), radial-gradient(transparent 33%, #271a06 84%);
388 | background-image: linear-gradient(131deg, rgba(14, 7, 4, 0.89) 31%, transparent 61%), radial-gradient(transparent 33%, #271a06 84%), repeating-conic-gradient(transparent, rgba(53, 37, 37, 0.52) 20deg, transparent 30deg);
389 | box-shadow: 0 0 0.3em 0.2em #3e2909;
390 | border-radius: 50%;
391 | }
392 |
393 | .eyeright .pupil {
394 | margin: auto;
395 | background: #1f1313;
396 | box-shadow: 0 0 0.2em 0.1em #1f1213;
397 | width: 40%;
398 | height: 40%;
399 | top: 0;
400 | left: 0;
401 | right: 0;
402 | bottom: 0;
403 | border-radius: inherit;
404 | }
405 |
406 | .eyeright .pupil:after {
407 | background: white;
408 | width: 25%;
409 | height: 25%;
410 | border-radius: inherit;
411 | right: 14%;
412 | top: -25%;
413 | }
414 |
415 | .eyeright .tearduct {
416 | border-radius: 83% 17%;
417 | width: 8%;
418 | height: 21%;
419 | left: 29%;
420 | bottom: 35%;
421 | box-shadow: inset 0.6em -0.6em 0.2em -0.5em #ab8189, 0.1em 1.2em 0.2em -0.4em #bf8f98;
422 | transform: rotate(56deg);
423 | background-image: linear-gradient(24deg, #a76974 8%, #6d4343 28%, transparent 51%);
424 | }
425 |
426 | .eyeright .innercorner {
427 | border-radius: 50%;
428 | width: 10%;
429 | height: 30%;
430 | left: 24%;
431 | bottom: 22%;
432 | box-shadow: -1.5em 0.3em 0.6em -0.4em #fdf0ef7a;
433 | transform: rotate(-6deg);
434 | filter: blur(0.2em);
435 | }
436 |
437 | .leftbrow {
438 | border-radius: 55% 45% 0 0 / 90% 80% 0 0;
439 | border-top: 1.5em solid rgb(103, 75, 62);
440 | width: 20%;
441 | height: 5%;
442 | left: 1%;
443 | top: 32%;
444 | filter: blur(0.5em);
445 | transform: rotate(14deg);
446 | }
447 |
448 | .leftbrow:before {
449 | border-top: 1.3em solid #4a3127cc;
450 | top: -100%;
451 | right: -4%;
452 | width: 58%;
453 | transform: rotate(-10deg);
454 | }
455 |
456 | .eyeright .brow {
457 | border-radius: 55% 45% 0 0 / 90% 80% 0 0;
458 | border-top: 1.8em solid rgba(60, 21, 8, 0.3);
459 | border-left: 2.0em solid rgba(53, 14, 6, 0.31);
460 | width: 70%;
461 | height: 19%;
462 | left: 13%;
463 | top: 7%;
464 | filter: blur(0.5em);
465 | transform: rotate(0deg);
466 | }
467 |
468 | .leftbrow:before, .leftbrow:after, .brow:before, .brow:after {
469 | height: 100%;
470 | border-radius: inherit;
471 | }
472 |
473 | .brow:before {
474 | border-top: 1.3em solid #63392aa3;
475 | top: -100%;
476 | left: -4%;
477 | width: 70%;
478 | transform: rotate(-10deg);
479 | }
480 |
481 | .eyeright .lash {
482 | filter: blur(0.15em);
483 | border-radius: 50%;
484 | border-right: 0.3em solid rgba(43, 27, 17, 0.3);
485 | height: 9%;
486 | width: 5%;
487 | transform-origin: 50% 100%;
488 | }
489 |
490 | .eyeright .lash.l1 {
491 | right: 36%;
492 | bottom: 47%;
493 | height: 14%;
494 | transform: rotate(83deg);
495 | }
496 |
497 | .eyeright .lash.l2 {
498 | right: 35%;
499 | bottom: 50%;
500 | transform: rotate(79deg);
501 | }
502 |
503 | .eyeright .lash.l3 {
504 | right: 37%;
505 | bottom: 52%;
506 | transform: rotate(82deg);
507 | }
508 |
509 | .eyeright .lash.l4 {
510 | right: 40%;
511 | bottom: 54%;
512 | transform: rotate(81deg);
513 | }
514 |
515 | .eyeright .lash.l5 {
516 | border: 0;
517 | right: 37%;
518 | border-radius: 67%;
519 | transform: rotate(9deg);
520 | bottom: 49%;
521 | height: 11%;
522 | width: 25%;
523 | }
524 |
525 | .eyeleft .toplid {
526 | background-image: linear-gradient(95deg, #5d3428, #8a6e55 43%, #a0746c, #866a4f 76%, #6f5136);
527 | border-radius: 44% 48% 50% 50% / 90% 90% 10% 10%;
528 | width: 75%;
529 | height: 39%;
530 | bottom: 47%;
531 | left: 21%;
532 | transform: rotate(-14deg);
533 | box-shadow: -0.2em -2.0em 1.2em 0.3em #48272194, 0.5em -1.1em 0.4em -0.7em rgba(84, 46, 42, 0.35), 0.5em -0.6em 0.7em 0.1em #3a1717, inset -0.7em 1.6em 0.5em -1.3em #4c2017, -3.3em 0.0em 1.2em 0.3em #4e302ad4;
534 | }
535 |
536 | .eyeleft .bottomlid {
537 | border-radius: 40% 60% 50% 50% / 10% 10% 90% 90%;
538 | width: 84%;
539 | height: 50%;
540 | bottom: 9%;
541 | left: 18%;
542 | box-shadow: -0.4em 1.7em 1.2em -0.9em #6b4936c4, -0.2em 4.5em 1.4em -0.5em #f2e0d333;
543 | background-image: radial-gradient(ellipse closest-side at 60% 46%, #a9877a 10%, #a9877a00 102%), radial-gradient(ellipse at 50% 13%, #5a462e 33%, #61312263, rgba(94, 43, 46, 0) 72%), linear-gradient(to right, #5a4035, rgba(76, 38, 40, 0));
544 | }
545 |
546 | .eyeleft .lash {
547 | filter: blur(0.1em);
548 | border-radius: 50%;
549 | border-left: 0.3em solid rgba(35, 19, 10, 0.45);
550 | height: 9%;
551 | width: 5%;
552 | transform-origin: 50% 100%;
553 | }
554 |
555 | .eyeleft .lash.l1 {
556 | left: 36%;
557 | bottom: 44%;
558 | height: 17%;
559 | transform: rotate(-99deg);
560 | }
561 |
562 | .eyeleft .lash.l2 {
563 | left: 30%;
564 | bottom: 49%;
565 | height: 14%;
566 | transform: rotate(-97deg);
567 | }
568 |
569 | .eyeleft .lash.l3 {
570 | left: 35%;
571 | bottom: 53%;
572 | height: 14%;
573 | transform: rotate(-93deg);
574 | }
575 |
576 | .eyeleft .lash.l4 {
577 | left: 38%;
578 | bottom: 59%;
579 | height: 14%;
580 | transform: rotate(-93deg);
581 | }
582 |
583 | .eyeleft .eye {
584 | overflow: hidden;
585 | border-radius: 88% 16%;
586 | background-image: radial-gradient(circle at 46% 28%, #f9f0e2 23%, #4a372b 78%);
587 | height: 50%;
588 | width: 48%;
589 | left: 40%;
590 | bottom: 26%;
591 | transform: rotate(30deg);
592 | box-shadow: -0.6em -0.1em 0.3em -0.2em #170808b5, 1.5em 0.4em 0.1em -1.6em #b99494, inset -0.1em 0.1em 0.2em 0.2em #582828bf, 0.5em 0.2em 0.1em 0.0em #b55d5d6b, -0.1em -0.2em 0.2em 0.0em #8c635f;
593 | }
594 |
595 | .eyeleft .eye:after {
596 | box-shadow: inset 0.9em 0.9em 0.4em -0.8em #150c0bb5;
597 | }
598 |
599 | .eyeleft .iris {
600 | top: -1%;
601 | right: 11%;
602 | width: 73%;
603 | height: 72%;
604 | background-color: #8e6c4c;
605 | color: rgba(0,0,0,0.5);
606 | background-image: linear-gradient(90deg, transparent 48%, currentColor, transparent 52%), linear-gradient(20deg, transparent 48%, currentColor, transparent 52%), linear-gradient(40deg, transparent 48%, currentColor, transparent 52%), linear-gradient(60deg, transparent 48%, currentColor, transparent 52%), linear-gradient(80deg, transparent 48%, currentColor, transparent 52%), linear-gradient(100deg, transparent 48%, currentColor, transparent 52%), linear-gradient(120deg, transparent 48%, currentColor, transparent 52%), linear-gradient(140deg, transparent 48%, currentColor, transparent 52%), linear-gradient(160deg, transparent 48%, currentColor, transparent 52%), linear-gradient(180deg, transparent 48%, currentColor, transparent 52%), linear-gradient(131deg, rgba(14, 7, 4, 0.84) 31%, transparent 61%), radial-gradient(transparent 33%, #271a06 84%);
607 | background-image: linear-gradient(131deg, rgba(14, 7, 4, 0.84) 31%, transparent 61%), radial-gradient(transparent 33%, #271a06 84%), repeating-conic-gradient(transparent, rgba(53, 37, 37, 0.52) 20deg, transparent 30deg);
608 | box-shadow: 0 0 0.3em 0.2em #3e2909;
609 | border-radius: 50%;
610 | }
611 |
612 | .eyeleft .pupil {
613 | margin: auto;
614 | background: #1f1313;
615 | box-shadow: 0 0 0.2em 0.1em #1f1213;
616 | width: 40%;
617 | height: 40%;
618 | top: 0;
619 | left: 0;
620 | right: 0;
621 | bottom: 0;
622 | border-radius: inherit;
623 | }
624 |
625 | .eyeleft .pupil:after {
626 | background: white;
627 | width: 25%;
628 | height: 25%;
629 | border-radius: inherit;
630 | right: 14%;
631 | top: -25%;
632 | }
633 |
634 | .eyeleft .tearduct {
635 | border-radius: 90% 10%;
636 | width: 22%;
637 | height: 28%;
638 | right: 2%;
639 | bottom: 40%;
640 | box-shadow: 0.2em -0.8em 0.2em -0.4em #9e6c7699, inset -0.7em 0.6em 0.4em -0.1em #542222;
641 | transform: rotate(42deg);
642 | background-image: linear-gradient(-126deg, #351616, #6d3939ba 41%, transparent 63%);
643 | }
644 |
645 | .eyeleft .innercorner {
646 | border-radius: 50%;
647 | width: 10%;
648 | height: 23%;
649 | left: 22%;
650 | bottom: 30%;
651 | box-shadow: -1.5em 0.3em 0.6em -0.4em #ffffffa6;
652 | transform: rotate(-6deg);
653 | filter: blur(0.2em);
654 | }
655 |
656 | .philtrum {
657 | left: 21%;
658 | bottom: 24%;
659 | width: 7%;
660 | transform: rotate(12deg);
661 | height: 7%;
662 | border-radius: 50% 50% 50% 50% / 70% 60% 40% 30%;
663 | background-image: linear-gradient(to right, #c1a17f, #c3a38c, rgb(167, 130, 120), #e0d3bb);
664 | filter: blur(0.2em);
665 | box-shadow: -1.7em 0.1em 0.7em 0.9em #ffdab924, 0.1em 0.9em 0.5em -0.2em #a26059;
666 | }
667 |
668 | .hairshape {
669 | width: 119%;
670 | height: 65%;
671 | border-radius: 45% 55% 50% 50% / 44% 40% 60% 56%;
672 | left: 0%;
673 | top: -11%;
674 | overflow: hidden;
675 | pointer-events: none;
676 | }
677 |
678 | .hairshape * {
679 | pointer-events: all;
680 | }
681 |
682 | .hairshape.back {
683 | background-color: #382720;
684 | background-image: linear-gradient(131deg, #29180e 17%, #a52a2a00 23%), radial-gradient(circle at 40% 44%, transparent 41%, #f5af4142 48%, transparent 56%);
685 | box-shadow: inset -0.9em 0.9em 5.0em 0.9em #130c0a;
686 | background-blend-mode: normal, screen;
687 | overflow: visible;
688 | transform: translateZ(95em);
689 | }
690 |
691 | .hairshape.front {
692 | filter: blur(0.1em);
693 | z-index: 10;
694 | transform: translateZ(100em);
695 | }
696 |
697 | .hairshape.front:after {
698 | width: 100%;
699 | height: 100%;
700 | border-radius: inherit;
701 | box-shadow: inset -7.8em 6.3em 4.8em -4.7em #1b130cbf;
702 | background-image: radial-gradient(circle at 26% 74%, transparent 59%, #deb87e14, #27100169 79%);
703 | }
704 |
705 | .hair {
706 | border-radius: 0 78% 3% 2% / 0 84% 14% 0%;
707 | }
708 |
709 | .hair .strand {
710 | border-radius: inherit;
711 | width: 100%;
712 | height: 100%;
713 | border-color: inherit;
714 | box-shadow: 1.2em 0 0.7em -1.2em #29190c82;
715 | transform-origin: 100% 100%;
716 | }
717 |
718 | .hair .strand:nth-child(3n) {
719 | top: -2%;
720 | transform: rotate(-2deg);
721 | }
722 |
723 | .hair .strand:nth-child(4n) {
724 | height: 106%;
725 | }
726 |
727 | .hair .strand:nth-child(5n) {
728 | opacity: 0.5;
729 | }
730 |
731 | .strand.s1 {
732 | right: 100%;
733 | }
734 |
735 | .strand.s2 {
736 | right: 95%;
737 | }
738 |
739 | .strand.s3 {
740 | right: 90%;
741 | }
742 |
743 | .strand.s4 {
744 | right: 85%;
745 | }
746 |
747 | .strand.s5 {
748 | right: 80%;
749 | }
750 |
751 | .strand.s6 {
752 | right: 75%;
753 | }
754 |
755 | .strand.s7 {
756 | right: 70%;
757 | }
758 |
759 | .strand.s8 {
760 | right: 65%;
761 | }
762 |
763 | .strand.s9 {
764 | right: 60%;
765 | }
766 |
767 | .strand.s10 {
768 | right: 55%;
769 | }
770 |
771 | .strand.s11 {
772 | right: 50%;
773 | }
774 |
775 | .strand.s12 {
776 | right: 45%;
777 | }
778 |
779 | .strand.s13 {
780 | right: 40%;
781 | }
782 |
783 | .strand.s14 {
784 | right: 35%;
785 | }
786 |
787 | .strand.s15 {
788 | right: 30%;
789 | }
790 |
791 | .strand.s16 {
792 | right: 25%;
793 | }
794 |
795 | .strand.s17 {
796 | right: 20%;
797 | }
798 |
799 | .strand.s18 {
800 | right: 15%;
801 | }
802 |
803 | .strand.s19 {
804 | right: 10%;
805 | }
806 |
807 | .strand.s20 {
808 | right: 5%;
809 | }
810 |
811 | .strand.s21 {
812 | right: 0%;
813 | }
814 |
815 | .hair.h1 {
816 | right: 7%;
817 | top: 18%;
818 | height: 30%;
819 | width: 22%;
820 | transform: rotate(49deg);
821 | border-color: #674c33;
822 | }
823 |
824 | .hair.h2 {
825 | right: -5%;
826 | top: 32%;
827 | width: 24%;
828 | height: 38%;
829 | border-color: #584030;
830 | transform: rotate(51deg);
831 | }
832 |
833 | .hair.h3 {
834 | right: 33%;
835 | top: -1%;
836 | height: 26%;
837 | width: 19%;
838 | transform: rotate(24deg) scaleX(-1);
839 | border-color: #5a3c29;
840 | }
841 |
842 | .hair.h4 {
843 | left: 20%;
844 | top: -1%;
845 | height: 17%;
846 | width: 19%;
847 | transform: rotate(3deg) scaleX(-1);
848 | border-color: #443022;
849 | }
850 |
851 | .hair.h5 {
852 | left: -9%;
853 | top: -13%;
854 | height: 40%;
855 | width: 23%;
856 | transform: rotate(49deg) scaleX(-1) scaleY(-1);
857 | border-color: #584131;
858 | }
859 |
860 | .hair.h6 {
861 | left: -2%;
862 | top: 20%;
863 | height: 7%;
864 | width: 17%;
865 | transform: rotate(-53deg) scaleX(-1);
866 | border-color: #442e21;
867 | }
868 |
869 | .hair.h7 {
870 | left: 7%;
871 | top: 9%;
872 | height: 9%;
873 | width: 15%;
874 | transform: rotate(-22deg) scaleX(-1);
875 | border-color: #463022;
876 | }
877 |
878 | .hair.h8 {
879 | left: 34%;
880 | top: -4%;
881 | height: 22%;
882 | width: 19%;
883 | transform: rotate(15deg) scaleX(-1);
884 | border-color: #67492b;
885 | box-shadow: 0.9em 0.0em 0.3em -0.2em #1f10046e;
886 | }
887 |
888 | .hair.h9 {
889 | right: -1%;
890 | top: 44%;
891 | height: 53%;
892 | width: 27%;
893 | transform: rotate(49deg);
894 | border-color: #443524;
895 | }
896 |
897 | .hair.h10 {
898 | left: 64%;
899 | top: 6%;
900 | height: 29%;
901 | width: 14%;
902 | transform: rotate(44deg);
903 | border-color: #6f5133;
904 | overflow: hidden;
905 | box-shadow: 1.4em -0.3em 0.2em -0.2em #8a6b48;
906 | }
907 |
908 | .hair.h11 {
909 | left: 49%;
910 | top: -2%;
911 | height: 26%;
912 | width: 19%;
913 | transform: rotate(35deg) scaleX(-1);
914 | border-color: #826344;
915 | overflow: hidden;
916 | }
917 |
918 | .hair.h12 {
919 | background-image: radial-gradient(circle at 10% 82%, #583f28, transparent 16%);
920 | right: -1%;
921 | top: 29%;
922 | height: 34%;
923 | width: 28%;
924 | transform: rotate(56deg);
925 | border-color: #7b6043;
926 | }
927 |
928 | .hair.h13 {
929 | right: -1%;
930 | top: 22%;
931 | height: 32%;
932 | width: 33%;
933 | transform: rotate(58deg);
934 | border-color: #754f2c;
935 | }
936 |
937 | .hair.h14 {
938 | right: 5%;
939 | top: 9%;
940 | height: 39%;
941 | width: 21%;
942 | transform: rotate(191deg) scaleX(-1);
943 | border-color: #86674a;
944 | }
945 |
946 | .hair.h15 {
947 | right: -9%;
948 | top: 39%;
949 | height: 48%;
950 | width: 21%;
951 | overflow: hidden;
952 | transform: rotate(202deg) scaleX(-1);
953 | border-color: #674d33;
954 | }
955 |
956 | .hair.h16 {
957 | right: 27%;
958 | top: 0%;
959 | height: 28%;
960 | width: 12%;
961 | transform: rotate(-149deg) scaleY(-1);
962 | border-color: #8a6c4e;
963 | box-shadow: inset -1.1em 0.8em 0.3em -0.6em #3a2310bd;
964 | }
965 |
966 | .hair.h17 {
967 | left: -8%;
968 | top: 1%;
969 | height: 12%;
970 | width: 27%;
971 | transform: rotate(147deg) scaleY(-1) translateZ(98em);
972 | border-color: #58442e;
973 | }
974 |
975 | .hair.h18 {
976 | right: 28%;
977 | top: 41%;
978 | height: 24%;
979 | width: 19%;
980 | transform: rotate(44deg) scaleY(-1) scaleX(-1);
981 | border-color: #86684b8f;
982 | background-image: radial-gradient(circle at 16% 88%, #6f4e30, rgba(119, 35, 32, 0) 27%);
983 | }
984 |
985 | .hair.h19 {
986 | right: 28%;
987 | top: 51%;
988 | height: 33%;
989 | width: 17%;
990 | transform: rotate(13deg) scaleY(-1) scaleX(-1);
991 | border-color: #7b5d3e75;
992 | background-image: radial-gradient(circle at 16% 83%, #886d54, rgba(232, 178, 161, 0) 27%);
993 | }
994 |
995 | .hair.h20 {
996 | left: -12%;
997 | top: 3%;
998 | height: 12%;
999 | width: 25%;
1000 | transform: rotate(136deg) scaleY(-1) translateZ(98em);
1001 | border-color: #403121;
1002 | }
1003 |
1004 | .hair.h21 {
1005 | right: 11%;
1006 | top: 49%;
1007 | height: 16%;
1008 | width: 21%;
1009 | transform: rotate(89deg);
1010 | border-color: #86684bd9;
1011 | }
1012 |
1013 | .hair.h21 .strand:nth-child(4n) {
1014 | transform: rotate(12deg);
1015 | }
1016 |
1017 | .hair.h22 {
1018 | right: 11%;
1019 | bottom: 0%;
1020 | height: 18%;
1021 | width: 22%;
1022 | transform: rotate(104deg) scaleX(-1);
1023 | border-color: #38240eab;
1024 | }
1025 |
1026 | .hair.h22 .strand:nth-child(3n) {
1027 | transform: rotate(6deg) scaleY(0.75);
1028 | border-color: #351c11;
1029 | }
1030 |
1031 | .strand {
1032 | border-right: 0.2em solid;
1033 | }
1034 |
1035 | .neckruff {
1036 | perspective: 32.6em;
1037 | border-radius: 50%;
1038 | width: 170%;
1039 | height: 96%;
1040 | transform-style: preserve-3d;
1041 | }
1042 |
1043 | .neckruff.top {
1044 | top: 22%;
1045 | transform: rotateY(18deg) rotateX(-20deg) rotateZ(4deg) scaleY(0.999) translateZ(-10.9em);
1046 | left: -4%;
1047 | }
1048 |
1049 | .neckruff.bottom {
1050 | top: 31%;
1051 | left: -1%;
1052 | transform: rotateY(3deg) rotateX(48deg) rotateZ(6deg) scaleY(1.325) scaleX(1.05) translateZ(-2.3em);
1053 | z-index: -999;
1054 | }
1055 |
1056 | .lacetop {
1057 | width: 10.2em;
1058 | height: 59%;
1059 | right: 50.15%;
1060 | bottom: 50%;
1061 | transform-origin: 50% 100%;
1062 | transform-style: preserve-3d;
1063 | }
1064 |
1065 | .lacetop:before {
1066 | height: 77%;
1067 | width: 100%;
1068 | bottom: 0%;
1069 | clip-path: polygon(0 0, 100% 0, 50% 100%);
1070 | border-radius: 50% 50% 0 0 / 2.3em 2.3em 0 0;
1071 | background-image: linear-gradient(87deg, #fbfbfb 5%, #989898b5 29%, #e8e7e74f, #8e8e8e 95%);
1072 | }
1073 |
1074 | .lacetop .arc {
1075 | border-style: solid;
1076 | opacity: 0.5;
1077 | color: white;
1078 | }
1079 |
1080 | .neckruff.bottom .lacetop .arc {
1081 | color: #f5eadc66;
1082 | }
1083 |
1084 | .neckruff.top .lacetop .arc {
1085 | color: white;
1086 | }
1087 |
1088 | .neckruff.bottom .lacetop:before {
1089 | opacity: 0.6;
1090 | }
1091 |
1092 | .neckruff.top .lacetop:before {
1093 | color: white;
1094 | }
1095 |
1096 | .arc.a1, .arc.a2, .arc.a3, .arc.a4, .arc.a5, .arc.a6, .arc.a7, .arc.a8, .arc.a9 {
1097 | width: 3.1em;
1098 | height: 2.5em;
1099 | border-radius: 50% 50% 0 0;
1100 | border-style: dotted;
1101 | border-width: 0.4em;
1102 | border-bottom-width: 0;
1103 | background-image: linear-gradient(to bottom, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%), linear-gradient(to right, transparent 30%, currentColor 30%, currentColor 40%, transparent 40%, transparent 60%, currentColor 60%, currentColor 70%, transparent 70%);
1104 | background-size: 70% 70%;
1105 | background-position: bottom center;
1106 | background-repeat: no-repeat;
1107 | box-shadow: inset 0 0.3em 0.1em 0.2em currentColor;
1108 | }
1109 |
1110 | .arc.a1 {
1111 | margin: auto;
1112 | left: 0;
1113 | right: 0;
1114 | top: 0;
1115 | }
1116 |
1117 | .arc.a2 {
1118 | left: 56%;
1119 | transform-origin: 0 100%;
1120 | transform: rotate(53deg);
1121 | }
1122 |
1123 | .arc.a3 {
1124 | right: 57%;
1125 | transform-origin: 100% 100%;
1126 | transform: rotate(-45deg);
1127 | }
1128 |
1129 | .arc.a4, .arc.a5 {
1130 | top: 1.4em;
1131 | }
1132 |
1133 | .arc.a4, .arc.a6 {
1134 | right: -0.9em;
1135 | transform-origin: 0% 100%;
1136 | transform: rotate(90deg);
1137 | }
1138 |
1139 | .arc.a5, .arc.a7 {
1140 | left: -0.9em;
1141 | transform-origin: 100% 100%;
1142 | transform: rotate(-90deg);
1143 | }
1144 |
1145 | .arc.a6, .arc.a7 {
1146 | top: 3.9em;
1147 | }
1148 |
1149 | .arc.a8, .arc.a9 {
1150 | top: 6.2em;
1151 | }
1152 |
1153 | .arc.a8 {
1154 | right: -1.1em;
1155 | transform-origin: 0 100%;
1156 | transform: rotate(130deg);
1157 | }
1158 |
1159 | .arc.a9 {
1160 | left: -0.9em;
1161 | transform-origin: 100% 100%;
1162 | transform: rotate(-130deg);
1163 | }
1164 |
1165 | .arc.a10 {
1166 | border-radius: 50%;
1167 | border: 0.3em solid;
1168 | width: 58%;
1169 | height: 6.2em;
1170 | margin: auto;
1171 | top: 2.6em;
1172 | left: 0;
1173 | right: 0;
1174 | background-image: linear-gradient(10deg, transparent 48%, currentColor, transparent 52%), linear-gradient(20deg, transparent 48%, currentColor, transparent 52%), linear-gradient(30deg, transparent 48%, currentColor, transparent 52%), linear-gradient(40deg, transparent 48%, currentColor, transparent 52%), linear-gradient(50deg, transparent 48%, currentColor, transparent 52%), linear-gradient(60deg, transparent 48%, currentColor, transparent 52%), linear-gradient(70deg, transparent 48%, currentColor, transparent 52%), linear-gradient(80deg, transparent 48%, currentColor, transparent 52%), linear-gradient(90deg, transparent 48%, currentColor, transparent 52%), linear-gradient(100deg, transparent 48%, currentColor, transparent 52%), linear-gradient(110deg, transparent 48%, currentColor, transparent 52%), linear-gradient(120deg, transparent 48%, currentColor, transparent 52%), linear-gradient(130deg, transparent 48%, currentColor, transparent 52%), linear-gradient(140deg, transparent 48%, currentColor, transparent 52%), linear-gradient(150deg, transparent 48%, currentColor, transparent 52%), linear-gradient(160deg, transparent 48%, currentColor, transparent 52%), linear-gradient(170deg, transparent 48%, currentColor, transparent 52%), linear-gradient(180deg, transparent 48%, currentColor, transparent 52%);
1175 | background-image: repeating-conic-gradient(from 0deg at 50% 80%, currentColor, currentColor 4deg, transparent 6deg, transparent 18deg);
1176 | }
1177 |
1178 | .arc.a15 {
1179 | top: 11.1em;
1180 | width: 91%;
1181 | left: 0;
1182 | right: 0;
1183 | padding: 0 0 0.4em;
1184 | margin: 0.4em auto;
1185 | border-top: 0.4em dotted currentColor;
1186 | height: 1.6em;
1187 | border-bottom: 0;
1188 | box-shadow: 0 -0.2em 0.1em 0.0em currentColor, inset 0 0.4em 0.1em 0 currentColor;
1189 | border-radius: 50% 50% 0 0 / 99% 99% 0 0;
1190 | }
1191 |
1192 | .arc.a14, .arc.a13 {
1193 | border: 0.2em solid;
1194 | width: 14%;
1195 | height: 2.8em;
1196 | top: 7.4em;
1197 | border-radius: 50%;
1198 | }
1199 |
1200 | .arc.a13 {
1201 | transform: rotate(-45deg);
1202 | right: 63%;
1203 | }
1204 |
1205 | .arc.a14 {
1206 | transform: rotate(45deg);
1207 | left: 63%;
1208 | }
1209 |
1210 | .arc.a11, .arc.a12 {
1211 | border-radius: 50%;
1212 | width: 23%;
1213 | height: 1.6em;
1214 | margin: auto;
1215 | left: 0;
1216 | right: 0;
1217 | border: 0.2em solid;
1218 | }
1219 |
1220 | .arc.a11 {
1221 | top: 8.6em;
1222 | }
1223 |
1224 | .arc.a12 {
1225 | top: 9.7em;
1226 | width: 30%;
1227 | }
1228 |
1229 | :root {
1230 | --rotate-x: -9deg; --rotate-y: 4deg; --rotate-ya: -4deg; }
1231 |
1232 | .lacetop.lt1 {
1233 | transform: rotate(-98deg) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
1234 | }
1235 |
1236 | .lacetop.lt2 {
1237 | transform: rotate(-83deg) rotateX(var(--rotate-x)) rotateY(var(--rotate-ya));
1238 | }
1239 |
1240 | .lacetop.lt3 {
1241 | transform: rotate(-68deg) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
1242 | }
1243 |
1244 | .lacetop.lt4 {
1245 | transform: rotateZ(-53deg) rotateX(var(--rotate-x)) rotateY(var(--rotate-ya));
1246 | }
1247 |
1248 | .lacetop.lt5 {
1249 | transform: rotate(-38deg) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
1250 | }
1251 |
1252 | .lacetop.lt6 {
1253 | transform: rotate(-23deg) rotateX(var(--rotate-x)) rotateY(var(--rotate-ya));
1254 | }
1255 |
1256 | .lacetop.lt7 {
1257 | transform: rotate(-8deg) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
1258 | }
1259 |
1260 | .lacetop.lt8 {
1261 | transform: rotate(7deg) rotateX(var(--rotate-x)) rotateY(var(--rotate-ya));
1262 | }
1263 |
1264 | .lacetop.lt9 {
1265 | transform: rotate(22deg) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
1266 | }
1267 |
1268 | .lacetop.lt10 {
1269 | transform: rotate(37deg) rotateX(var(--rotate-x)) rotateY(var(--rotate-ya));
1270 | }
1271 |
1272 | .lacetop.lt11 {
1273 | transform: rotate(52deg) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
1274 | }
1275 |
1276 | .lacetop.lt12 {
1277 | transform: rotate(67deg) rotateX(var(--rotate-x)) rotateY(var(--rotate-ya));
1278 | }
1279 |
1280 | .lacetop.lt13 {
1281 | transform: rotate(82deg) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
1282 | }
1283 |
1284 | .lacetop.lt14 {
1285 | transform: rotate(97deg) rotateX(var(--rotate-x)) rotateY(var(--rotate-ya));
1286 | clip-path: polygon(0 0, 100% 0, 100% 22%, 16% 100%, 0 100%);
1287 | }
1288 |
1289 | .lacetop.lt15 {
1290 | transform: rotate(118deg) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
1291 | }
1292 |
1293 | .lacetop.lt16 {
1294 | transform: rotate(233deg) rotateX(var(--rotate-x)) rotateY(var(--rotate-ya));
1295 | }
1296 |
1297 | .lacetop.lt17 {
1298 | transform: rotate(248deg) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
1299 | }
1300 |
1301 | .neck {
1302 | left: 28%;
1303 | top: 49%;
1304 | height: 37%;
1305 | width: 63%;
1306 | overflow: hidden;
1307 | transform: rotate(-9deg) translateZ(97em);
1308 | clip-path: polygon(0 0, 100% 0, 95% 40%, 100% 100%, 0 100%);
1309 | }
1310 |
1311 | .neckshape {
1312 | width: 102%;
1313 | height: 100%;
1314 | left: 0%;
1315 | background-color: #c5a58f;
1316 | background-image: radial-gradient(circle at 23% 7%, #351f1d5c 39%, transparent 44%), linear-gradient(96deg, #2b1816 6%, #603e34 11%, #c5b298 28%, #f5d4b6, #d3c1a7 77%, #9e857d 87%, #6d5144);
1317 | border-radius: 50% 50% 60% 40% / 4% 6% 66% 23%;
1318 | filter: blur(0.6em);
1319 | }
1320 |
1321 | .neckshape:after {
1322 | height: 90%;
1323 | width: 97%;
1324 | border-radius: 0 0 70% 30% / 0 0 90% 50%;
1325 | top: -25%;
1326 | left: -15%;
1327 | background: #4c302d;
1328 | opacity: 0.6;
1329 | filter: blur(0.8em);
1330 | }
1331 |
1332 | .darkshadow {
1333 | width: 63%;
1334 | height: 45%;
1335 | background-image: radial-gradient(ellipse at 46% 62%, #00000091 42%, transparent 62%);
1336 | right: 30%;
1337 | bottom: 50%;
1338 | transform-origin: 50% 100%;
1339 | transform: rotateX(-1deg) rotateZ(-21deg) translateZ(10.7em);
1340 | }
1341 |
1342 | .lightreflect {
1343 | width: 49%;
1344 | height: 43%;
1345 | bottom: 39%;
1346 | left: 38%;
1347 | background-image: radial-gradient(ellipse at 67% 57%, #ffffffa1, transparent 30%);
1348 | transform: rotate(28deg) rotateX(-12deg);
1349 | transform-style: preserve-3d;
1350 | transform-origin: 51% 100%;
1351 | }
1352 |
1353 | .ear {
1354 | border-radius: 45% 56% 75% 25% / 23% 35% 65% 20%;
1355 | width: 14%;
1356 | height: 30%;
1357 | right: 15%;
1358 | top: 55%;
1359 | background-image: radial-gradient(ellipse at 43% 53%, #906565, transparent 48%), linear-gradient(-90deg, #c2a493 77%, transparent);
1360 | box-shadow: 0.3em 1.7em 0.8em -0.9em #230d0d8a;
1361 | }
1362 |
1363 | .ear:after {
1364 | width: 100%;
1365 | height: 100%;
1366 | border-radius: inherit;
1367 | box-shadow: inset -0.9em 0.4em 0.3em -0.6em #a27171, inset -0.2em -1.1em 1.0em -0.6em #754141, inset -1.1em 1.0em 0.8em -0.6em #d49f97;
1368 | }
1369 |
1370 | .helix {
1371 | background-image: radial-gradient(ellipse at 69% 48%, #f1dbdb87, transparent 36%), linear-gradient(96deg, #9a675f, transparent 64%);
1372 | border-radius: 45% 56% 75% 23% / 83% 35% 65% 25%;
1373 | width: 71%;
1374 | height: 76%;
1375 | top: 9%;
1376 | left: 18%;
1377 | box-shadow: -1.0em -1.0em 0.8em -0.9em #c5aaa7, inset -0.1em 0.7em 0.3em 0.0em #542d2d, inset 0.1em 0.8em 0.4em -0.2em #a06e57;
1378 | overflow: hidden;
1379 | }
1380 |
1381 | .tragus {
1382 | border-radius: 0 100% 100% 0% / 0% 41% 53% 5%;
1383 | width: 16%;
1384 | background: #bd9b8c;
1385 | height: 34%;
1386 | top: 49%;
1387 | left: -1%;
1388 | box-shadow: 0.2em 0.6em 0.3em -0.1em #5f282861, inset -0.1em 1.1em 0.8em -0.8em #f3dace82;
1389 | }
1390 |
1391 | .antitragus {
1392 | border-radius: 45% 56% 47% 23% / 83% 26% 25% 17%;
1393 | width: 45%;
1394 | background: #bd9b8c;
1395 | height: 14%;
1396 | top: 71%;
1397 | left: 26%;
1398 | box-shadow: -0.7em -0.5em 0.3em -0.4em #713c3cab, inset -0.1em 1.1em 0.8em -0.8em #f3dace82;
1399 | }
1400 |
1401 | .conch {
1402 | border-radius: 0% 90% 75% 23% / 0% 45% 55% 60%;
1403 | width: 77%;
1404 | height: 66%;
1405 | top: 26%;
1406 | left: -3%;
1407 | background-image: radial-gradient(ellipse at -13% 43%, #44030375 20%, transparent 39%);
1408 | box-shadow: inset 0.3em 0.8em 0.4em 0.2em #582c2ccf, 0.9em -0.6em 0.4em -0.4em #8c5757b0;
1409 | }
1410 |
1411 | .updo {
1412 | width: 162%;
1413 | height: 3%;
1414 | }
1415 |
1416 | .shoulders {
1417 | width: 220%;
1418 | height: 65%;
1419 | left: -46%;
1420 | top: 67%;
1421 | transform: translateZ(95em);
1422 | }
1423 |
1424 | .bodice {
1425 | width: 169%;
1426 | height: 86%;
1427 | left: -21%;
1428 | top: 70%;
1429 | border-radius: 19% 5% 0 0 / 58% 22% 0 0;
1430 | overflow: hidden;
1431 | transform: translateZ(93em);
1432 | }
1433 |
1434 | .bodice .sleevepuff {
1435 | background-image: radial-gradient(ellipse at 40% 50%, transparent 25%, #0c0c0cfa 92%), repeating-radial-gradient(circle at 153% 64%, transparent 0.1em, #00000026 1.1em, #f3e9e905 6.1em, #02020245 9.8em, transparent 10.0em);
1436 | background-color: #1b1b1b;
1437 | height: 92%;
1438 | width: 100%;
1439 | }
1440 |
1441 | .sleevepuff.spb2 {
1442 | left: -1%;
1443 | border-radius: 66% 34% 53% 29% / 12% 20% 20% 34%;
1444 | box-shadow: inset 2.4em -7.0em 6.3em -0.7em #0000006b, -0.3em 6.3em 3.0em -1.7em #0000007d;
1445 | }
1446 |
1447 | .sleevepuff.spb1 {
1448 | top: 79%;
1449 | height: 23%;
1450 | left: 10%;
1451 | border-radius: 0 0 50% 7% / 0 0 20% 75%;
1452 | box-shadow: inset 6.4em 0.1em 4.8em -0.8em #00000078;
1453 | }
1454 |
1455 | .string {
1456 | width: 5em;
1457 | color: inherit;
1458 | }
1459 |
1460 | .string.s1 {
1461 | transform: rotate(37deg);
1462 | top: 9%;
1463 | left: 9%;
1464 | height: 32%;
1465 | }
1466 |
1467 | .string.s2 {
1468 | transform: rotate(66deg);
1469 | top: -11%;
1470 | left: 38%;
1471 | height: 32%;
1472 | }
1473 |
1474 | .string.s3 {
1475 | transform: rotate(96deg);
1476 | top: -10%;
1477 | right: 27%;
1478 | height: 20%;
1479 | }
1480 |
1481 | /* - */
1482 | .string.s4 {
1483 | transform: rotate(37deg);
1484 | top: 9%;
1485 | left: 9%;
1486 | height: 32%;
1487 | }
1488 |
1489 | .string.s5 {
1490 | transform: rotate(68deg);
1491 | top: -10%;
1492 | left: 37%;
1493 | height: 32%;
1494 | }
1495 |
1496 | .string.s6 {
1497 | transform: rotate(96deg);
1498 | top: -12%;
1499 | right: 20%;
1500 | height: 28%;
1501 | }
1502 |
1503 | /* - */
1504 | .string.s7 {
1505 | transform: rotate(94deg);
1506 | top: -11%;
1507 | left: 34%;
1508 | height: 20%;
1509 | }
1510 |
1511 | .string.s8 {
1512 | transform: rotate(116deg);
1513 | top: -8%;
1514 | left: 64%;
1515 | height: 30%;
1516 | }
1517 |
1518 | .string.s9 {
1519 | transform: rotate(131deg);
1520 | top: 13%;
1521 | right: 6%;
1522 | height: 10%;
1523 | }
1524 |
1525 | /* - */
1526 | .string.s10 {
1527 | transform: rotate(90deg);
1528 | top: -9%;
1529 | left: 27%;
1530 | height: 20%;
1531 | }
1532 |
1533 | .string.s11 {
1534 | transform: rotate(103deg);
1535 | top: -8%;
1536 | left: 56%;
1537 | height: 25%;
1538 | }
1539 |
1540 | .string.s12 {
1541 | transform: rotate(129deg);
1542 | top: 5%;
1543 | right: 3%;
1544 | height: 20%;
1545 | }
1546 |
1547 | /* - */
1548 | .string.s13 {
1549 | transform: rotate(103deg);
1550 | bottom: -8%;
1551 | left: 19%;
1552 | height: 23%;
1553 | }
1554 |
1555 | .string.s14 {
1556 | transform: rotate(89deg);
1557 | bottom: -21%;
1558 | left: 45.6%;
1559 | height: 45%;
1560 | }
1561 |
1562 | .string.s15 {
1563 | transform: rotate(78deg);
1564 | bottom: -9%;
1565 | right: 22.2%;
1566 | height: 27.6%;
1567 | }
1568 |
1569 | .pearl {
1570 | background-image: radial-gradient(circle at 59% 36%, #adb0bb 6%, #d6b8b829 17%, transparent 28%), radial-gradient(circle at 58% 41%, #4c3f3c 34%, transparent 47%), radial-gradient(circle at 50% 50%, #222c3c 43%, transparent 69%), radial-gradient(circle at 50% 50%, #907f7f, #211a1a 69%, transparent 71%), linear-gradient(to right, transparent, #0c0c0ce3, transparent);
1571 | background-position: center 0;
1572 | background-size: 2.0em 2.0em;
1573 | background-repeat: repeat-y;
1574 | }
1575 |
1576 | .sleevepuff .pearl {
1577 | background-blend-mode: difference;
1578 | }
1579 |
1580 | .pearl:after {
1581 | width: 100%;
1582 | height: 100%;
1583 | }
1584 |
1585 | .pearl.sm {
1586 | /* background-size: 1.0em 1.0em; */
1587 | }
1588 |
1589 | .shoulders .pearl {
1590 | background-image: radial-gradient(circle at 59% 36%, #ebedf5 6%, #d6b8b829 17%, transparent 28%), radial-gradient(circle at 57% 38%, #a09796 34%, transparent 47%), radial-gradient(circle at 51% 47%, #737579 43%, transparent 69%), radial-gradient(circle at 50% 50%, #c5bfbf, #46464680 69%, transparent 71%), linear-gradient(to right, transparent, black 40%, black 60%, transparent);
1591 | transform-origin: 50% 0;
1592 | width: 4.5em;
1593 | z-index: 88888888;
1594 | }
1595 |
1596 | .pearl.sa {
1597 | left: 30%;
1598 | height: 27%;
1599 | top: 5%;
1600 | transform: rotate(12deg);
1601 | }
1602 |
1603 | .pearl.sb {
1604 | left: 27%;
1605 | height: 27%;
1606 | top: 31.5%;
1607 | transform: rotate(2deg);
1608 | }
1609 |
1610 | .pearl.sc {
1611 | left: 26.7%;
1612 | height: 49%;
1613 | top: 59%;
1614 | transform: rotate(-12deg);
1615 | }
1616 |
1617 | .pearl.sd {
1618 | left: 32%;
1619 | height: 49%;
1620 | top: 107%;
1621 | transform: rotate(2deg);
1622 | }
1623 |
1624 | .pearl.sf {
1625 | top: 3%;
1626 | left: 63%;
1627 | height: 34%;
1628 | transform: rotate(20deg);
1629 | }
1630 |
1631 | .pearl.sg {
1632 | top: 35%;
1633 | left: 57%;
1634 | height: 34%;
1635 | transform: rotate(30deg);
1636 | }
1637 |
1638 | .pearl.sh {
1639 | top: 65%;
1640 | left: 48%;
1641 | height: 50%;
1642 | transform: rotate(31deg);
1643 | }
1644 |
1645 | .pearl.sj {
1646 | left: 34.5%;
1647 | height: 49%;
1648 | top: 107%;
1649 | transform: rotate(-2deg);
1650 | }
1651 |
1652 | .pearl.se {
1653 | left: 32%;
1654 | height: 20%;
1655 | top: 5%;
1656 | transform: rotate(2deg);
1657 | }
1658 |
1659 | .pearl.sk {
1660 | left: 61%;
1661 | height: 20%;
1662 | top: 1%;
1663 | transform: rotate(22deg);
1664 | }
1665 |
1666 | .pearl.sl {
1667 | left: 31.6%;
1668 | height: 10%;
1669 | top: 25%;
1670 | transform: rotate(-12deg);
1671 | }
1672 |
1673 | .pearl.sm {
1674 | left: 57.16%;
1675 | height: 17%;
1676 | top: 19.5%;
1677 | transform: rotate(41deg);
1678 | }
1679 |
1680 | .pearl.sn {
1681 | left: 32.6%;
1682 | height: 10%;
1683 | top: 34.5%;
1684 | transform: rotate(-50deg);
1685 | }
1686 |
1687 | .pearl.so {
1688 | left: 47%;
1689 | height: 10%;
1690 | top: 38.4%;
1691 | transform: rotate(-126deg);
1692 | }
1693 |
1694 | .pearl.sp {
1695 | left: 42%;
1696 | height: 10.25%;
1697 | top: 41.4%;
1698 | transform: rotate(-109deg);
1699 | }
1700 |
1701 | .pearl.sq {
1702 | left: 36.6%;
1703 | height: 11%;
1704 | top: 40.51%;
1705 | transform: rotate(-85deg);
1706 | }
1707 |
1708 | .pearlring {
1709 | height: 5%;
1710 | width: 6%;
1711 | top: 106%;
1712 | left: 32.5%;
1713 | border-radius: 25% 25% 50% 50% / 22% 25% 59% 72%;
1714 | background-image: linear-gradient(to right, #252525, #9a9898, #2d2c2c);
1715 | box-shadow: inset 0 -0.7em 0.1em -0.2em #00000057, inset 0 -0.5em 0.5em 0.8em #00000057, 0 0.3em 0.5em -0.2em black;
1716 | transform: translateZ(100em);
1717 | z-index: 9999999999;
1718 | }
1719 |
1720 | .decolletage {
1721 | width: 25%;
1722 | height: 82%;
1723 | left: 38%;
1724 | top: 5%;
1725 | border-radius: 0 0 48% 43% / 0 0 84% 70%;
1726 | background-color: #d6b899;
1727 | background-image: linear-gradient(96deg, #7b6157 11%, #a79388 21%, #C7B191 36%, #f9d7b8 64%, #e2bda8 88%);
1728 | transform: rotate(21deg);
1729 | transform-origin: 100% 0;
1730 | border: 0.0em double #ffffff7a;
1731 | box-shadow: inset 0.6em -0.8em 1.3em -0.6em #441f1b40, 0 0 0.2em 0.7em #c7c6c6d1;
1732 | z-index: 9999999;
1733 | }
1734 |
1735 | .collar {
1736 | width: 10.0em;
1737 | height: 10.0em;
1738 | transform-style: preserve-3d;
1739 | }
1740 |
1741 | .collar .arc {
1742 | color: #ffffff6b;
1743 | }
1744 |
1745 | .collar.c1 {
1746 | left: 24%;
1747 | top: 2%;
1748 | transform: rotateZ(-86deg) rotateX(28deg) rotateY(57deg);
1749 | }
1750 |
1751 | .collar.c2 {
1752 | left: 22%;
1753 | top: 16.5%;
1754 | transform: rotateZ(-99deg) rotateX(29deg) rotateY(38deg);
1755 | }
1756 |
1757 | .collar.c3 {
1758 | left: 20.5%;
1759 | top: 34%;
1760 | transform: rotateZ(-99deg) rotateX(25deg) rotateY(31deg);
1761 | }
1762 |
1763 | .collar.c4 {
1764 | left: 21%;
1765 | top: 54%;
1766 | transform: rotateZ(-113deg) rotateX(20deg) rotateY(21deg);
1767 | }
1768 |
1769 | .collar.c5 {
1770 | left: 31.5%;
1771 | top: 72%;
1772 | transform: rotateZ(-170deg) rotateX(12deg) rotateY(-3deg) scaleX(1.35);
1773 | }
1774 |
1775 | .collar.c6 {
1776 | left: 44%;
1777 | top: 64.5%;
1778 | transform: rotateZ(141deg) rotateX(0deg) rotateY(1deg);
1779 | }
1780 |
1781 | .collar.c7 {
1782 | left: 51%;
1783 | top: 49.4%;
1784 | transform: rotateZ(125deg) rotateX(-2deg) rotateY(6deg);
1785 | }
1786 |
1787 | .collar.c8 {
1788 | left: 56.26%;
1789 | top: 32%;
1790 | transform: rotateZ(114deg) rotateX(-2deg) rotateY(0deg);
1791 | }
1792 |
1793 | .collar.c9 {
1794 | left: 60.5%;
1795 | top: 15%;
1796 | transform: rotateZ(114deg) rotateX(1deg) rotateY(22deg);
1797 | }
1798 |
1799 | .collar.c10 {
1800 | left: 62.5%;
1801 | top: 2%;
1802 | transform: rotateZ(114deg) rotateX(-4deg) rotateY(64deg);
1803 | }
1804 |
1805 | .armright {
1806 | width: 66%;
1807 | height: 75%;
1808 | right: -93%;
1809 | top: 82%;
1810 | border-radius: 37% 61% 0 0 / 67% 29% 0 0;
1811 | transform: rotate(-7deg) translateZ(95em);
1812 | box-shadow: -3.8em 3.4em 3.9em 1.4em #00000087;
1813 | }
1814 |
1815 | .armleft {
1816 | width: 42%;
1817 | height: 65%;
1818 | left: -44%;
1819 | top: 77%;
1820 | transform: rotate(19deg) translateZ(93em);
1821 | border-radius: 0 90% 0 0 / 0 80% 0 0;
1822 | box-shadow: 3.8em 5.1em 3.0em 0.3em #00000082;
1823 | }
1824 |
1825 | .armleft .sleevepuff {
1826 | width: 101%;
1827 | background-color: #1b1a1a;
1828 | border-radius: 50% 0 0 50%;
1829 | height: 69%;
1830 | box-shadow: inset -5.3em -2.1em 4.8em 0.1em #0000005e, inset 2.3em -2.1em 4.8em 3.1em #0000005e, -0.2em -1.9em 2.1em -0.2em #0000003d;
1831 | background-image: radial-gradient(ellipse at 40% 50%, transparent 25%, #0c0c0cfa 92%), repeating-radial-gradient(circle at 153% 64%, transparent 0.1em, #00000026 1.1em, #f3e9e905 6.1em, #02020245 9.8em, transparent 10.0em);
1832 | }
1833 |
1834 | .armright .sleevepuff {
1835 | background-color: #1b1a1a;
1836 | height: 73%;
1837 | box-shadow: inset 7.8em -2.1em 4.8em -1.5em #0000005e, inset 0.3em 3.6em 1.5em -0.2em #0000000d, -0.2em -1.9em 2.1em -0.2em #00000038;
1838 | background-image: radial-gradient(ellipse at 40% 50%, transparent 25%, #0c0c0cfa 92%), repeating-radial-gradient(circle at -50% 55%, transparent 0.1em, #00000026 1.1em, #f3e9e905 6.1em, #02020245 9.8em, transparent 10.0em);
1839 | }
1840 |
1841 | .sleevepuff .pearl:first-child:after, .sleevepuff .pearl:first-child:after {
1842 | background-image: linear-gradient(to top, #0c0c0c9c 9%, transparent 74%);
1843 | }
1844 |
1845 | .sleevepuff .pearl:last-child:after, .sleevepuff .pearl:last-child:after {
1846 | background-image: linear-gradient(to bottom, #0c0c0c9c 9%, transparent 74%);
1847 | }
1848 |
1849 | .sleevepuff.spa {
1850 | top: 0%;
1851 | left: -17%;
1852 | width: 107%;
1853 | transform: rotate(-9deg);
1854 | border-radius: 66% 37% 5% 41% / 49% 53% 41% 51%;
1855 | }
1856 |
1857 | .sleevepuff.spb {
1858 | top: 45%;
1859 | left: -34%;
1860 | width: 150%;
1861 | transform: rotate(-9deg);
1862 | border-radius: 32% 65% 27% 41% / 49% 40% 41% 51%;
1863 | }
1864 |
1865 | .sleevepuff.spc {
1866 | top: 97%;
1867 | left: -35%;
1868 | width: 151%;
1869 | transform: rotate(-9deg);
1870 | border-radius: 32% 62% 27% 41% / 49% 20% 41% 51%;
1871 | }
1872 |
1873 | .sleevepuff.sp3 {
1874 | top: 69%;
1875 | width: 138%;
1876 | left: -2%;
1877 | border-radius: 74% 14% 55% 44% / 49% 49% 46% 38%;
1878 | }
1879 |
1880 | .sleevepuff.sp2 {
1881 | top: 33%;
1882 | left: -5%;
1883 | margin: auto;
1884 | width: 131%;
1885 | border-radius: 66% 25% 55% 44% / 49% 62% 37% 43%;
1886 | }
1887 |
1888 | .sleevepuff.sp1 {
1889 | top: 0;
1890 | left: -17%;
1891 | width: 117%;
1892 | transform: rotate(-9deg);
1893 | border-radius: 66% 37% 27% 41% / 49% 53% 41% 51%;
1894 | }
1895 |
1896 | .hair.left.lashes {
1897 | width: 36%;
1898 | height: 12%;
1899 | top: 35%;
1900 | right: 31%;
1901 | color: #6f5043;
1902 | transform: scaleY(-1) rotate(29deg);
1903 | border-radius: 7% 92% 12% 2% / 9% 84% 14% 12%;
1904 | }
1905 |
1906 | .hair.left.bottomlashes {
1907 | width: 48%;
1908 | height: 20%;
1909 | top: 56%;
1910 | left: 24%;
1911 | color: #462c2091;
1912 | transform: scaleX(-1) rotate(-19deg);
1913 | border-radius: 15% 11% 47% 2% / 9% 29% 57% 4%;
1914 | }
1915 |
1916 | .hair.right.lashes {
1917 | width: 15%;
1918 | height: 7%;
1919 | top: 46%;
1920 | right: 38%;
1921 | color: #6d5247;
1922 | transform: scaleY(-1) scaleX(-1) rotate(19deg);
1923 | border-radius: 7% 92% 12% 2% / 9% 84% 14% 12%;
1924 | }
1925 |
1926 | .hair.right.bottomlashes {
1927 | width: 21%;
1928 | height: 10%;
1929 | top: 61%;
1930 | right: 31%;
1931 | color: #462c203b;
1932 | transform: scaleX(1) rotate(-29deg);
1933 | border-radius: 15% 11% 47% 2% / 9% 29% 57% 4%;
1934 | }
1935 |
1936 | .hair.browleft {
1937 | width: 15%;
1938 | height: 2.43%;
1939 | top: 32%;
1940 | left: 3%;
1941 | color: #3a221794;
1942 | transform: scaleY(-1) scaleX(1) rotate(-4deg);
1943 | border-radius: 15% 11% 47% 2% / 9% 29% 57% 4%;
1944 | }
1945 |
1946 | .hair.browright {
1947 | width: 30%;
1948 | height: 10%;
1949 | top: 11%;
1950 | right: 55%;
1951 | color: #735547f2;
1952 | transform: scaleY(-1) scaleX(-1) rotate(-10deg);
1953 | border-radius: 15% 11% 47% 2% / 9% 29% 57% 4%;
1954 | }
1955 |
1956 | .pearlstringshadow {
1957 | left: 32.4%;
1958 | width: 25%;
1959 | height: 40%;
1960 | top: 4%;
1961 | border-radius: 0 0 64% 36% / 0 0 99% 73%;
1962 | box-shadow: 0 8px 7px 4px #54373785;
1963 | transform: rotate(21deg);
1964 | z-index: 88888888;
1965 | }
1966 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
13 |
14 | PureCSS Lace
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 |
303 |
311 |
312 |
313 |
314 |
315 |
316 |
317 |
318 |
319 |
320 |
321 |
322 |
323 |
324 |
325 |
326 |
327 |
328 |
329 |
330 |
331 |
332 |
333 |
334 |
335 |
336 |
337 |
338 |
339 |
340 |
341 |
342 |
343 |
344 |
345 |
346 |
347 |
348 |
349 |
350 |
351 |
352 |
353 |
354 |
355 |
356 |
357 |
358 |
359 |
360 |
361 |
362 |
363 |
364 |
365 |
366 |
367 |
368 |
369 |
370 |
371 |
372 |
373 |
374 |
375 |
376 |
377 |
378 |
379 |
380 |
381 |
382 |
383 |
384 |
385 |
386 |
387 |
388 |
389 |
390 |
391 |
392 |
393 |
394 |
395 |
396 |
397 |
398 |
399 |
400 |
401 |
402 |
403 |
404 |
405 |
406 |
407 |
408 |
409 |
410 |
411 |
412 |
413 |
414 |
415 |
416 |
417 |
418 |
419 |
420 |
421 |
422 |
423 |
424 |
425 |
426 |
427 |
428 |
429 |
430 |
431 |
432 |
433 |
434 |
435 |
436 |
437 |
438 |
439 |
440 |
441 |
442 |
443 |
444 |
445 |
446 |
447 |
448 |
449 |
450 |
451 |
452 |
453 |
454 |
455 |
456 |
457 |
458 |
459 |
460 |
461 |
462 |
463 |
464 |
465 |
466 |
467 |
468 |
469 |
470 |
471 |
472 |
473 |
474 |
475 |
476 |
477 |
478 |
479 |
480 |
481 |
482 |
483 |
484 |
485 |
486 |
487 |
488 |
489 |
490 |
491 |
492 |
493 |
494 |
495 |
496 |
497 |
498 |
499 |
500 |
501 |
502 |
503 |
504 |
505 |
506 |
507 |
508 |
509 |
510 |
511 |
512 |
525 |
526 |
527 |
528 |
529 |
530 |
531 |
532 |
533 |
534 |
535 |
536 |
537 |
538 |
539 |
540 |
541 |
542 |
543 |
544 |
545 |
546 |
547 |
548 |
549 |
550 |
551 |
552 |
553 |
554 |
555 |
556 |
557 |
558 |
559 |
560 |
561 |
562 |
563 |
564 |
565 |
566 |
567 |
568 |
569 |
570 |
571 |
572 |
573 |
574 |
575 |
576 |
577 |
578 |
579 |
580 |
581 |
582 |
583 |
584 |
585 |
586 |
587 |
588 |
589 |
590 |
591 |
592 |
593 |
594 |
595 |
596 |
597 |
598 |
599 |
600 |
601 |
602 |
603 |
604 |
605 |
606 |
607 |
608 |
609 |
610 |
611 |
612 |
613 |
614 |
615 |
616 |
617 |
618 |
619 |
620 |
621 |
622 |
623 |
624 |
625 |
626 |
627 |
628 |
629 |
630 |
631 |
632 |
633 |
634 |
635 |
636 |
637 |
638 |
639 |
640 |
641 |
642 |
643 |
644 |
645 |
646 |
647 |
648 |
649 |
650 |
651 |
652 |
653 |
654 |
655 |
656 |
657 |
658 |
659 |
660 |
661 |
662 |
663 |
664 |
665 |
666 |
667 |
668 |
669 |
670 |
671 |
672 |
673 |
674 |
675 |
676 |
677 |
678 |
679 |
680 |
681 |
682 |
683 |
684 |
685 |
686 |
687 |
688 |
689 |
690 |
691 |
692 |
693 |
694 |
695 |
696 |
697 |
698 |
699 |
700 |
701 |
702 |
703 |
704 |
705 |
706 |
707 |
708 |
709 |
710 |
711 |
712 |
713 |
714 |
715 |
716 |
717 |
718 |
719 |
720 |
721 |
722 |
723 |
724 |
725 |
726 |
727 |
728 |
729 |
730 |
731 |
732 |
733 |
734 |
735 |
736 |
737 |
738 |
739 |
740 |
741 |
742 |
743 |
744 |
745 |
746 |
747 |
748 |
749 |
750 |
751 |
752 |
753 |
754 |
755 |
756 |
757 |
758 |
759 |
760 |
761 |
762 |
763 |
764 |
765 |
766 |
767 |
768 |
769 |
770 |
771 |
772 |
773 |
774 |
775 |
776 |
777 |
778 |
779 |
780 |
781 |
782 |
783 |
784 |
785 |
786 |
787 |
788 |
789 |
792 |
793 |
794 |
795 |
796 |
797 |
798 |
799 |
800 |
801 |
802 |
803 |
804 |
805 |
806 |
807 |
808 |
809 |
810 |
811 |
812 |
813 |
814 |
815 |
816 |
817 |
818 |
819 |
820 |
821 |
822 |
823 |
824 |
825 |
826 |
827 |
828 |
829 |
830 |
831 |
832 |
833 |
834 |
835 |
836 |
837 |
838 |
839 |
840 |
841 |
842 |
843 |
844 |
845 |
846 |
847 |
848 |
849 |
854 |
855 |
856 |
857 |
858 |
859 |
860 |
861 |
862 |
863 |
864 |
865 |
866 |
867 |
868 |
869 |
870 |
871 |
872 |
873 |
874 |
878 |
882 |
883 |
884 |
885 |
893 |
894 |
895 |
896 |
897 |
898 |
899 |
900 |
901 |
902 |
903 |
904 |
905 |
906 |
907 |
908 |
909 |
914 |
915 |
916 |
917 |
918 |
919 |
920 |
921 |
922 |
923 |
924 |
925 |
926 |
927 |
928 |
929 |
930 |
931 |
932 |
933 |
934 |
935 |
936 |
937 |
938 |
939 |
940 |
941 |
942 |
943 |
944 |
945 |
946 |
947 |
948 |
949 |
950 |
951 |
952 |
953 |
954 |
955 |
956 |
957 |
958 |
959 |
960 |
961 |
962 |
963 |
964 |
965 |
966 |
967 |
968 |
969 |
970 |
971 |
972 |
973 |
974 |
975 |
976 |
977 |
978 |
979 |
980 |
981 |
982 |
983 |
984 |
985 |
986 |
987 |
988 |
989 |
990 |
991 |
992 |
993 |
994 |
995 |
996 |
997 |
998 |
999 |
1000 |
1001 |
1002 |
1003 |
1004 |
1005 |
1006 |
1007 |
1008 |
1009 |
1010 |
1011 |
1012 |
1013 |
1014 |
1015 |
1016 |
1017 |
1018 |
1019 |
1020 |
1021 |
1022 |
1023 |
1024 |
1025 |
1026 |
1027 |
1028 |
1029 |
1030 |
1031 |
1032 |
1033 |
1034 |
1035 |
1036 |
1037 |
1038 |
1039 |
1040 |
1041 |
1042 |
1043 |
1044 |
1045 |
1046 |
1047 |
1048 |
1049 |
1050 |
1051 |
1052 |
1053 |
1054 |
1055 |
1056 |
1057 |
1058 |
1059 |
1060 |
1061 |
1062 |
1063 |
1064 |
1065 |
1066 |
1067 |
1068 |
1069 |
1070 |
1071 |
1072 |
1073 |
1074 |
1075 |
1076 |
1077 |
1078 |
1079 |
1080 |
1081 |
1082 |
1083 |
1084 |
1085 |
1086 |
1087 |
1088 |
1089 |
1090 |
1091 |
1092 |
1093 |
1094 |
1095 |
1096 |
1097 |
1098 |
1099 |
1100 |
1101 |
1102 |
1103 |
1104 |
1105 |
1106 |
1107 |
1108 |
1109 |
1110 |
1111 |
1112 |
1113 |
1114 |
1115 |
1116 |
1117 |
1118 |
1119 |
1120 |
1121 |
1122 |
1123 |
1124 |
1125 |
1126 |
1127 |
1128 |
1129 |
1130 |
1131 |
1132 |
1133 |
1134 |
1135 |
1136 |
1137 |
1138 |
1139 |
1140 |
1141 |
1142 |
1143 |
1144 |
1145 |
1146 |
1147 |
1148 |
1149 |
1150 |
1151 |
1152 |
1153 |
1154 |
1155 |
1156 |
1157 |
1158 |
1159 |
1160 |
1161 |
1162 |
1163 |
1164 |
1165 |
1166 |
1167 |
1168 |
1169 |
1170 |
1171 |
1172 |
1173 |
1174 |
1175 |
1176 |
1177 |
1178 |
1179 |
1180 |
1181 |
1182 |
1183 |
1184 |
1185 |
1186 |
1187 |
1188 |
1189 |
1190 |
1191 |
1192 |
1193 |
1194 |
1195 |
1196 |
1197 |
1198 |
1199 |
1200 |
1201 |
1202 |
1203 |
1204 |
1205 |
1206 |
1207 |
1208 |
1209 |
1210 |
1211 |
1212 |
1213 |
1214 |
1215 |
1216 |
1217 |
1218 |
1219 |
1220 |
1221 |
1222 |
1223 |
1224 |
1225 |
1226 |
1227 |
1228 |
1229 |
1230 |
1231 |
1232 |
1233 |
1234 |
1235 |
1236 |
1237 |
1238 |
1239 |
1240 |
1247 |
1248 |
1249 |
1250 |
1251 |
1252 |
1253 |
1254 |
1255 |
1256 |
1257 |
1258 |
1259 |
1260 |
1261 |
1262 |
1263 |
1264 |
1265 |
1266 |
1267 |
1268 |
1269 |
1270 |
1271 |
1272 |
1273 |
1274 |
1275 |
1276 |
1277 |
1278 |
1279 |
1280 |
1281 |
1282 |
1283 |
1284 |
1285 |
1286 |