PureCSS Gaze

[ { "path": "README.md", "content": "# Pure CSS Gaze\n\nAn ongoing series in which I create art using only CSS and HTML.\n\nInspired by Italian renaissance. \n\nRules I have for myself:\n\n1. All elements must be typed out by hand\n2. Only Atom text editor and Chrome Developer Tools allowed.\n3. ~~SVG use is limited, and all shapes can only use hand-plotted coordinates and bezier curves - without the aid of any graphics editor.~~\n(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.)\n\nBecause 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.\n\n[cyanharlow.github.io/purecss-gaze](https://cyanharlow.github.io/purecss-gaze/)\n\n![alt text](https://raw.githubusercontent.com/cyanharlow/purecss-gaze/master/preview.png)" }, { "path": "index.html", "content": "\n\n \n \n \n \n PureCSS Gaze\n \n \n \n \n \n \n \n \n \n \n \n\n \n \n

\n By Diana Smith\n |\n GitHub.com/cyanHarlow\n |\n Website\n |\n Optimized for viewing in Chrome\n

\n \n\n" }, { "path": "style.css", "content": "html {\n font-size: 10px;\n padding: 0;\n}\nhtml, body {\n margin: 0;\n}\n\nbody {\n background-color: #101213;\n background-size: auto 1000px;\n min-height: 1000px;\n position: relative;\n padding: 35px 0;\n}\n\n.linksection {\n font-size: 12px;\n text-align: center;\n position: static;\n padding: 0 0 36px;\n font-family: 'Century Gothic', Arial, sans-serif;\n color: #423730;\n}\n\n.linksection .separator {\n padding: 0 5px;\n}\n\n.linksection a {\n color: #584937;\n}\n\n\n.frame {\n width: 900px;\n height: 1000px;\n margin: auto;\n overflow: hidden;\n position: relative;\n background-color: #0d1a1d;\n}\n\n.frame * {\n position: absolute;\n filter: blur(0.5px);\n}\n\n.canvas-texture, .aged-varnish {\n pointer-events: none;\n width: 100%;\n height: 100%;\n}\n\n.canvas-texture {\n background-image: conic-gradient(#ffffff 25%, #000000 25% 50%, white 50% 75%, black 75% 100%);\n filter: blur(1px);\n background-size: 5px 3px;\n mix-blend-mode: soft-light;\n opacity: 0.25;\n}\n\n.aged-varnish {\n background-color: #ecdec78f;\n mix-blend-mode: multiply;\n}\n\n.frame *:after, .frame *:before {\n content: \"\";\n position: absolute;\n}\n\n.head, .hair {\n left: 38%;\n top: 14%;\n width: 31%;\n height: 37%;\n transform: rotate(-3deg);\n}\n\n.hair.front {\n pointer-events: none;\n}\n\n.hair.front * {\n pointer-events: all;\n}\n\n.head {\n background-color: #cab0a0;\n background-image: linear-gradient(-76deg, #8c6756 16%, transparent 26%), linear-gradient(51deg, #6f4a41 17%, #6f413300 39%), linear-gradient(190deg, #e7c0a7 20%, #a17165 44%, #cfb19e 55%, #280a05);\n color: #291a17;\n border-radius: 57% 39% 27% 73% / 28% 49% 49% 36%;\n clip-path: polygon(-20% -20%, 81% -20%, 96% 31%, 96% 46%, 98.25% 53%, 98.25% 59%, 97% 64%, 95% 71%, 91% 83%, 84% 100%, 69% 100%, -9% 100%);\n box-shadow: inset 9px 7px 4px -1px #966a4d, 14px -47px 3px -45px #946c5b, -9px 2px 9px 4px #220f0b;\n}\n\n.face {\n width: 100%;\n height: 100%;\n overflow: hidden;\n border-radius: inherit;\n}\n.ear {\n left: 34%;\n top: 28%;\n background: #673f31;\n box-shadow: inset 2px -2px 5px 5px #451f19, 5px 10px 5px -6px #1f0909;\n height: 11%;\n width: 5%;\n border-radius: 50% 50% 30% 70% / 50% 43% 12% 50%;\n}\n.lashes {\n background-image: repeating-radial-gradient(ellipse at -30% -72%, transparent 1%, currentColor, transparent 5%, transparent 6%);\n border-radius: 55% 19% 93% 0 / 93% 52% 68% 0;\n clip-path: polygon(0 73%, 50% 4%, 100% 0, 100% 100%, 0 100%);\n}\n\n.head:after {\n width: 100%;\n height: 100%;\n pointer-events: none;\n border-radius: inherit;\n box-shadow: inset 32px -11px 30px -31px #240c07, inset -3px -43px 16px -37px #67382b, inset 67px -10px 34px -45px #4e2f23, inset 30px -29px 20px -11px #3d130d;\n}\n\n.forehead-shadow {\n top: 0%;\n right: 0;\n height: 34%;\n width: 40%;\n border-radius: 0 100% 0 0;\n transform: rotate(9deg);\n box-shadow: inset -10px 8px 8px -2px #704b42;\n}\n\n.forehead {\n top: 15%;\n left: 66%;\n width: 8%;\n transform: rotate(9deg);\n box-shadow: 0 0 28px 18px #fbebe1;\n}\n\n.cheekhollow {\n box-shadow: 0 0 38px 38px, 0 0 40px 60px #6105006b;\n color: #5d372f;\n background: currentColor;\n width: 14%;\n height: 4%;\n top: 62%;\n left: -4%;\n border-radius: 0 18% 0 0;\n transform: rotate(28deg);\n}\n\n.cheek-highlight {\n left: 23%;\n top: 51%;\n transform: rotate(35deg);\n width: 28%;\n box-shadow: 0 0 20px 8px #ffedda;\n}\n\n.philtrum {\n left: 76%;\n top: 65%;\n height: 2%;\n box-shadow: 0 0 9px 3px #461919;\n}\n\n.nose-outer-highlights {\n width: 24%;\n height: 10%;\n top: 53%;\n left: 63%;\n border-radius: 50%;\n box-shadow: -71px -9px 24px 5px #f0dcd1, -6px 8px 26px 16px #f1e6e1, 2px 3px 30px 40px #e8bca1;\n}\n\n.nostrils-back {\n border-radius: 50%;\n background-color: #523523;\n background-image: radial-gradient(ellipse at 43% 69%, #4e211b 49%, #905949 66%);\n width: 16%;\n height: 9%;\n top: 54%;\n left: 71%;\n box-shadow: -2px 13px 8px -5px #3c0a0a;\n}\n\n.nostrils-front {\n transform: rotate(-14deg);\n border-radius: 50% 50% 50% 50% / 57% 50% 50% 34%;\n background-color: #e3b89d;\n background-image: linear-gradient(-90deg, #461c19 33%, transparent 40%), radial-gradient(ellipse farthest-corner at 44% 100%, #380d0d, 44%, rgba(60, 15, 15, 0) 58%), radial-gradient(ellipse at 61% 7%, #e0b59a 22%, #653a2c);\n width: 23%;\n height: 10%;\n top: 52%;\n left: 63%;\n box-shadow: -4px 8px 5px -1px #250202d6, 0px -7px 12px 5px #a9755d, inset -5px 7px 10px -5px #9a674f;\n}\n\n.nostrils-front:after {\n left: 23%;\n top: 36%;\n width: 21%;\n box-shadow: 0 0 9px 4px #f3d3c1;\n}\n\n.nose-bridge {\n width: 12%;\n height: 31%;\n transform: rotate(-22deg);\n border-radius: 0 0 50% 50% / 0 0 13% 16%;\n color: #946d5b;\n background-color: #ecc8b2;\n background-image: radial-gradient(circle at 51% 80%, #f5ebea 3%, #ffffff00 8%);\n box-shadow: inset 0 11px 8px -3px #bd9c85, inset 5px -19px 8px -13px #551d1b, inset 3px -10px 6px 5px, -17px -6px 6px -12px #a07568;\n left: 69%;\n top: 29%;\n}\n\n.nasion {\n left: 73%;\n top: 26%;\n border-radius: 95% 0 0 0;\n width: 11%;\n height: 7%;\n transform: rotate(-34deg);\n box-shadow: -9px -9px 9px -1px #e7c0a6;\n}\n\n.nose-depth {\n height: 12%;\n transform: rotate(-18deg);\n border-radius: 0 0 50% 50% / 0 0 13% 16%;\n box-shadow: 6px -12px 18px 17px #a07866;\n left: 66%;\n top: 38%;\n}\n\n.nose-side {\n height: 20%;\n transform: rotate(-18deg);\n border-radius: 0 0 50% 50% / 0 0 13% 16%;\n background: #ecc8b2;\n box-shadow: 6px -12px 9px 11px #9c7766;\n left: 70%;\n top: 36%;\n}\n\n.top-left-lip {\n background-color: #a74242;\n background-image: linear-gradient(176deg, #a74e4e 29%, #521a1b 89%);\n box-shadow: inset 14px -7px 5px -7px #2a0c10;\n width: 18%;\n height: 3.4%;\n left: 59%;\n top: 71%;\n transform: rotate(-29deg);\n border-radius: 8% 46% 33% 65% / 8% 58% 44% 77%;\n}\n\n.top-right-lip {\n background-color: #b35656;\n background-image: linear-gradient(180deg, #a04848 41%, #5d1c1d 85%, #0c0909 95%);\n width: 11%;\n height: 3.4%;\n left: 76%;\n top: 71%;\n transform: rotate(50deg);\n border-radius: 33% 19% 71% 36% / 51% 11% 85% 51%;\n}\n\n.lip-tubercle {\n background-color: #c16060;\n background-image: radial-gradient(circle at 45% 188%, #330c0d 46%, #ab5654 84%, transparent 96%);\n color: #4f0c0c;\n box-shadow: inset 0px -9px 4px -6px, 0 4px 4px -3px;\n width: 10%;\n height: 4.4%;\n left: 71%;\n top: 69.125%;\n border-radius: 33% 19% 32% 30% / 18% 29% 70% 69%;\n}\n\n.open-mouth {\n width: 23%;\n height: 6%;\n top: 72%;\n left: 62%;\n background: #0b0909;\n border-radius: 50%;\n}\n\n.left-mouth-corner {\n width: 8%;\n left: 59%;\n top: 75%;\n border-bottom: 2px solid #0e0202;\n border-radius: 50%;\n box-shadow: 0 -4px 11px 6px #2d0101d4;\n transform: rotate(8deg);\n}\n\n.right-mouth-corner {\n width: 6%;\n left: 81%;\n top: 75.5%;\n border-bottom: 2px solid #090707;\n border-radius: 50%;\n box-shadow: 0 -1px 4px 2px #130404, 0 -4px 10px 4px #271313;\n transform: rotate(16deg);\n}\n\n.bottom-left-lip {\n background-color: #a74242;\n background-image: linear-gradient(38deg, #b7a8a2 15%, rgba(159, 61, 62, 0) 36%), linear-gradient(182deg, #9e4141 44%, #7e2929 80%);\n width: 17%;\n height: 5%;\n left: 62%;\n top: 76%;\n transform: rotate(9deg);\n border-radius: 8% 33% 37% 60% / 8% 44% 44% 92%;\n}\n\n.bottom-mid-lip {\n background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 57%, #6b2323), linear-gradient(180deg, #591818, #8d3232 20%, #a74242 75%, #571818);\n width: 18%;\n box-shadow: inset 8px 1px 7px -3px #9a483f, inset -9px 1px 8px -3px #a04555;\n height: 6%;\n left: 66%;\n top: 75.5%;\n transform: rotate(1deg);\n border-radius: 36% 33% 68% 35% / 32% 22% 55% 75%;\n}\n\n.bottom-right-lip {\n background-image: linear-gradient(148deg, #a74242 56%, #6b232300 90%);\n width: 8%;\n height: 4%;\n left: 77%;\n top: 76%;\n transform: rotate(-5deg);\n border-radius: 8% 4% 63% 47% / 8% 4% 94% 77%;\n}\n\n.nostrils-front .naris {\n width: 36%;\n height: 24%;\n background: #1d0d0d;\n box-shadow: -3px 2px 6px -1px #130707, -6px 0px 4px -2px #c28d6b;\n border-radius: 50%;\n bottom: 14%;\n left: 21%;\n}\n\n.nostrils-back .naris {\n width: 37%;\n height: 34%;\n background: #0f0606;\n box-shadow: -3px 7px 9px -2px #271616, -6px 2px 5px -3px #c28d6b;\n border-radius: 50%;\n bottom: 18%;\n left: 48%;\n}\n\n.labiomental-groove {\n top: 79%;\n left: 72%;\n width: 5%;\n box-shadow: 0 9px 13px 10px #300606;\n}\n\n.orbicularis-oris {\n top: 80%;\n left: 61%;\n width: 22%;\n box-shadow: 0 0 18px 8px #e3bda8, 0 9px 15px 8px #664135;\n}\n\n.chin-indent {\n width: 18%;\n height: 0;\n left: 64%;\n top: 84%;\n box-shadow: 0 0 9px 5px #6b4b43;\n}\n\n.chin-shadow {\n border-radius: 50%;\n color: #cca995;\n background-color: #ebc8b1;\n box-shadow: 0 4px 11px 6px, 0 11px 17px 6px, 0 -7px 9px 7px #97604b, 0 83px 20px 90px #977261;\n top: 86%;\n left: 69%;\n width: 10%;\n height: 4%;\n filter: blur(3px);\n}\n\n.eyeball {\n overflow: hidden;\n}\n\n.eyeball.left {\n border-radius: 60% 40% 50% 50% / 100% 100% 0% 0%;\n background-color: #778273;\n background-image: radial-gradient(circle at 48% 58%, white 8%, transparent 10%), radial-gradient(circle at 50% 50%, #ffffffa6, transparent);\n width: 20%;\n height: 7%;\n left: 38%;\n top: 34%;\n box-shadow: inset 11px 0px 10px -2px #401010, inset -5px 3px 2px -2px #401010, -1px -4px 2px -2px #170808;\n}\n\n.lashes.left {\n left: 43%;\n top: 31.5%;\n width: 16%;\n height: 5%;\n color: #320b02f2;\n}\n\n.lashes.left2 {\n left: 32%;\n top: 32%;\n width: 23%;\n height: 5%;\n transform: rotate(-24deg);\n color: #4a1f1f;\n}\n\n.eyeunder.left {\n border-radius: 50% / 15% 10% 70% 70%;\n background-image: radial-gradient(ellipse farthest-corner at 50% -59%, #fdede4, #9745456e 56%, rgba(151, 32, 32, 0) 73%);\n width: 29%;\n height: 10%;\n left: 33%;\n top: 39.5%;\n box-shadow: 0px -6px 6px -5px #090000a3, inset -6px 4px 6px -4px #ebc8b4, inset 0 17px 8px -5px #9f6055e3, -19px -6px 9px -12px #995d4d;\n}\n\n.eyeunder.left:before {\n width: 100%;\n height: 100%;\n right: 2%;\n top: -14%;\n border-right: 6px solid white;\n border-radius: inherit;\n filter: blur(4px);\n transform: rotate(15deg);\n}\n\n.eyeball.right {\n border-radius: 60% 40% 50% 50% / 100% 100% 0% 0%;\n background-color: #9ea99a;\n background-image: radial-gradient(circle at 48% 58%, white 8%, transparent 10%), radial-gradient(circle at 24% 42%, #ffffffa6, transparent 75%);\n width: 16%;\n height: 5%;\n left: 78%;\n top: 38%;\n transform: rotate(9deg);\n box-shadow: inset 11px 0px 10px -2px #401010, inset -5px 3px 2px -2px #401010, 1px -4px 2px -2px #150303;\n}\n\n.eyeunder.right {\n border-radius: 50% / 15% 10% 70% 70%;\n background-image: radial-gradient(ellipse farthest-corner at 56% -23%, #efbfa5, #9745456e 56%, rgba(151, 32, 32, 0) 73%);\n width: 18%;\n height: 10%;\n left: 76%;\n top: 42%;\n box-shadow: 2px -6px 6px -5px #554a43, inset 6px 4px 6px -2px #e9c1ab85;\n transform: rotate(13deg);\n}\n\n.iris.left {\n background-color: #361c0e;\n background-image: linear-gradient(187deg, #0b0101 15%, transparent 45%), radial-gradient(circle at 50% 79%, #ffffffb5 14%, #ffffff00 14%), radial-gradient(ellipse at 50% 41%, #170e0e 19%, #13010100 27%, #09010100, #1b0808 76%);\n left: 40%;\n top: -8%;\n width: 47%;\n height: 67%;\n border-radius: 50%;\n}\n\n.iris.right {\n background-color: #361c0e;\n background-image: linear-gradient(189deg, black 32%, transparent 67%), radial-gradient(circle at 39% 83%, #ffffffb5 8%, #ffffff00 10%), radial-gradient(ellipse at 46% 58%, #170e0e 19%, #13010100 27%, #09010100, #1b0808 76%);\n left: 43%;\n top: -43%;\n width: 50%;\n height: 106%;\n border-radius: 50%;\n}\n\n.upperlid.left {\n border-radius: 60% 40% 50% 50% / 100% 100% 0% 0%;\n background-color: #4d2222;\n background-image: linear-gradient(190deg, #823c30cf, #270303 80%);\n width: 24%;\n height: 9%;\n left: 35%;\n top: 32.5%;\n box-shadow: inset 2px -8px 16px 2px #764646, 1px -3px 1px -3px #3b1414;\n}\n\n.lashes.right {\n left: 84%;\n top: 37.5%;\n width: 16%;\n height: 5%;\n color: #130101;\n}\n\n.lashes.right2 {\n left: 80%;\n top: 35.5%;\n width: 16%;\n height: 5%;\n transform: rotate(-9deg);\n color: #170602f5;\n}\n\n.upperlid.right {\n border-radius: 60% 40% 50% 50% / 70% 70% 30% 30%;\n background-color: #3a0e0e;\n background-image: linear-gradient(134deg, #672222cf, #1f0101 80%);\n width: 17%;\n height: 9%;\n left: 78%;\n top: 36%;\n transform: rotate(13deg);\n box-shadow: inset 2px -8px 16px 2px #764646, 1px -3px 1px -3px #3b1414;\n}\n\n.uppercrease.left {\n border-radius: 60% 40% 50% 50% / 100% 100% 0 0;\n background-color: #6b4236;\n background-image: radial-gradient(circle at 50% 50%, #ffffff4a, transparent);\n width: 28%;\n height: 10%;\n left: 33%;\n top: 31%;\n box-shadow: 0px -12px 8px -12px #0f0000, -44px -9px 30px -8px #571f1f, 0 -19px 20px -5px #380202, 16px -21px 20px 5px #5d4743, inset 0 4px 2px -2px #612b2b;\n}\n\n.uppercrease.right {\n border-radius: 60% 40% 50% 50% / 100% 100% 0% 0%;\n background-color: #653b34;\n background-image: radial-gradient(circle at 50% 50%, #ffffff4a, transparent);\n width: 20%;\n height: 10%;\n left: 75%;\n top: 35%;\n transform: rotate(9deg);\n box-shadow: 5px -14px 8px -12px #0f0000, 8px -7px 20px 7px #380202, -3px -21px 14px 5px #746860;\n}\n\n.nasolabial-sulcus.left {\n left: 59%;\n top: 59%;\n width: 12%;\n height: 20%;\n border-radius: 50%;\n filter: blur(5px);\n background: #c19983;\n}\n\n.nasolabial-sulcus.right {\n left: 82%;\n top: 59%;\n width: 5%;\n height: 20%;\n border-radius: 50%;\n filter: blur(5px);\n transform: rotate(-8deg);\n background-image: linear-gradient(180deg, #2a0b0b 23%, #c19983 46%);\n}\n\n.outer-canthus {\n left: 35%;\n top: 33%;\n background-image: linear-gradient(124deg, #744b4b00 33%, #7d5050c4 72%);\n transform: rotate(28deg);\n width: 4%;\n height: 8%;\n border-radius: 0 0 91% 0;\n box-shadow: 3px 2px 3px -1px #2c0404;\n}\n\n.inner-canthus {\n left: 55.4%;\n top: 37.5%;\n transform: rotate(17deg);\n width: 5%;\n height: 2.1%;\n border-radius: 0 72% 38% 0 / 50%;\n box-shadow: inset -4px 0px 3px 1px #652d2d, 7px 1px 5px -1px #f7eded;\n}\n\n.neck {\n top: 39%;\n left: 40%;\n width: 20%;\n height: 21%;\n background-color: #341813;\n background-image: radial-gradient(ellipse at 61% 67%, #5d3830, #99676700 37%), linear-gradient(94deg, #1f0e0e 3%, #390c0c00 16%);\n border-radius: 50% / 0 0 23% 20%;\n transform: rotate(9deg);\n color: #58362c;\n box-shadow: inset 0 -50px 21px -33px, 0 33px 20px -25px;\n}\n\n.neck-curve {\n top: 52%;\n left: 58%;\n height: 5.6%;\n width: 2%;\n border-radius: 0 0 0 100% / 0 0 0 50%;\n color: #381d16;\n border-left: 15px solid;\n border-bottom: 5px solid;\n}\n\n.neck-transition {\n top: 46.5%;\n left: 41%;\n width: 19%;\n height: 5.26%;\n background-image: linear-gradient(218deg, #84474700 48%, #381a16 72%), linear-gradient(182deg, #84474700 3%, #56322b 41%);\n border-radius: 50% 50% 60% 40% / 0 0 100% 100%;\n transform: rotate(15deg);\n filter: blur(3px);\n box-shadow: -20px 29px 18px -19px #2e171394, 12px 9px 15px -14px #4f2c25;\n}\n\n.right-chin-shadow {\n height: 32%;\n width: 1%;\n right: 3%;\n bottom: 0;\n transform: rotate(16deg);\n box-shadow: 0 0 20px 17px #321919;\n}\n\n.right-cheek-shadow {\n height: 32%;\n width: 1%;\n right: 0%;\n top: 49%;\n transform: rotate(4deg);\n box-shadow: 0 0 11px 10px #694646;\n}\n.hair.front > .strand {\n opacity: 0.25;\n}\n.strand.h1 {\n height: 38%;\n width: 18%;\n top: -10%;\n left: 20%;\n transform: rotate(49deg);\n border-radius: 50%;\n border-right: 6px double #612e197d;\n}\n\n.strand.h2 {\n height: 27%;\n width: 18%;\n top: 10%;\n left: 3%;\n transform: rotate(30deg);\n border-radius: 50%;\n border-right: 6px double #612e1973;\n}\n\n.strand.h3 {\n height: 27%;\n width: 18%;\n top: 35%;\n left: -6%;\n transform: rotate(-48deg);\n border-radius: 50%;\n border-right: 6px double #612e1973;\n}\n\n.strand.h4 {\n height: 20%;\n width: 18%;\n top: 51%;\n left: -6%;\n transform: rotate(-26deg);\n border-radius: 50%;\n border-right: 5px double #38170b7d;\n}\n\n.strand.h5 {\n height: 27%;\n width: 18%;\n top: 48%;\n left: 2%;\n transform: rotate(-30deg);\n border-radius: 50%;\n border-left: 7px double #2c160d7d;\n}\n\n.strand.h6 {\n height: 24%;\n width: 23%;\n top: 44%;\n left: -9%;\n transform: rotate(3deg);\n border-radius: 50%;\n border-right: 7px double #4c25177d;\n}\n\n.strand.h7 {\n height: 24%;\n width: 23%;\n top: 20%;\n left: 4%;\n transform: rotate(-17deg);\n border-radius: 50%;\n border-left: 7px double #5227177d;\n}\n\n.strand.h8 {\n height: 47%;\n width: 9%;\n top: 21%;\n left: -43%;\n transform: rotate(16deg);\n border-radius: 100% 0 0 100% / 50%;\n border-left: 6px double #210d04a6;\n}\n\n.strand.h9 {\n height: 38%;\n width: 33%;\n top: 61%;\n left: -50%;\n transform: rotate(3deg);\n border-radius: 50%;\n border-left: 7px double #210c057d;\n}\n\n.strand.h10 {\n height: 39%;\n width: 17%;\n top: 71%;\n left: -58%;\n transform: rotate(31deg);\n border-radius: 0 100% 100% 0 / 50%;\n color: #210d02d9;\n border-right: 6px double;\n}\n\n.strand.h11 {\n height: 47%;\n width: 33%;\n top: 43%;\n left: -50%;\n transform: rotate(3deg);\n border-radius: 100% 0 0 100% / 50%;\n border-left: 7px double #1709027d;\n}\n\n.strand.h12 {\n height: 51%;\n width: 13%;\n top: 80%;\n left: -60%;\n transform: rotate(29deg);\n border-radius: 0 100% 100% 0 / 50%;\n color: #1d0d027d;\n border-right: 7px double;\n}\n\n.strand.h13 {\n height: 50%;\n width: 33%;\n top: 66%;\n left: -44%;\n transform: rotate(-18deg);\n border-radius: 50%;\n border-left: 7px double #211009cc;\n}\n\n.strand.h14 {\n height: 50%;\n width: 20%;\n top: 88%;\n left: -53%;\n transform: rotate(25deg);\n border-radius: 50%;\n border-left: 6px double #1f0c027d;\n}\n\n.strand.h15 {\n height: 62%;\n width: 15%;\n top: -15%;\n left: -26%;\n transform: rotate(40deg);\n border-radius: 100% 0 0 100% / 50%;\n border-left: 6px double #1b0a037d;\n}\n\n.strand.h16 {\n height: 44%;\n width: 55%;\n top: -15%;\n left: 18%;\n transform: rotate(4deg);\n border-radius: 50%;\n border-top: 6px double #4824177d;\n}\n\n.wrist {\n width: 50%;\n top: 71%;\n left: -21%;\n height: 39%;\n background-color: #b38e7f;\n box-shadow: inset 16px 6px 8px -2px #6d3d2e;\n background-image: linear-gradient(186deg, #65242400 37%, #3a150f 85%), linear-gradient(90deg, #b58c8c00 39%, #a67c6f 93%);\n border-radius: 9% 21% 53% 13% / 70% 2% 17% 9%;\n transform: rotate(-50deg);\n}\n\n.palm {\n width: 55%;\n top: 40%;\n height: 62%;\n box-shadow: inset -8px 0px 8px -2px #612c1d;\n background-image: radial-gradient(ellipse closest-side at 51% 28%, #efe0d6b5, #ffffff00 87%), radial-gradient(ellipse closest-side at 32% 45%, #e8d6c9b5, #f0e8e800 87%), linear-gradient(165deg, #60181800 53%, #3a150f 84%), linear-gradient(90deg, #7e494900 39%, #a67c6f 93%), linear-gradient(107deg, #ceb5b500, #ad8878 24%);\n border-radius: 69% 21% 64% 31% / 70% 2% 17% 38%;\n transform: rotate(-9deg);\n}\n\n.palm:after {\n height: 48%;\n left: 15%;\n transform: rotate(39deg);\n box-shadow: 0 0 9px 5px #a8816e;\n}\n\n.hand {\n height: 26%;\n width: 30%;\n border-radius: 50%;\n transform: rotate(-8deg);\n}\n\n.hand.h1 {\n left: 50%;\n bottom: 0%;\n transform: rotate(-8deg);\n color: #030903;\n /* color: #400505; */\n filter: drop-shadow(-8px 24px 13px) drop-shadow(-17px 19px 13px #400505) blur(1px);\n}\n\n.hand.h2 {\n transform: rotate(27deg) scaleX(-1);\n bottom: -9%;\n left: 39%;\n color: #020502;\n filter: drop-shadow(-17px 14px 30px) drop-shadow(-17px 24px 30px) blur(1px);\n}\n\n.thumb {\n border-radius: 21% 71% 31% 58% / 4% 44% 27% 60%;\n background-color: #ab8877;\n background-image: linear-gradient(84deg, #53181800 64%, #411c14 95%), linear-gradient(180deg, #67423c, #5e242400 50%);\n height: 86%;\n top: -2%;\n width: 14.5%;\n left: 14%;\n transform: rotate(40deg);\n box-shadow: inset 9px 19px 13px -1px #572a1c, inset -16px 41px 13px -23px #572a1c;\n}\n\n.thumb .interphalangeal {\n left: -6%;\n top: 23%;\n height: 22%;\n width: 42%;\n background-color: #8f6857;\n box-shadow: inset -3px 10px 8px -11px #502d1c, inset -9px -4px 8px -8px #956e5b, inset 13px 1px 8px -7px #562b1e, 5px 1px 5px -4px #98725f;\n /* filter: blur(3px); */\n border-radius: 70% 30% 70% 30% / 54% 30% 47% 43%;\n transform: rotate(-8deg);\n}\n\n.thumb:after {\n width: 42%;\n height: 12%;\n left: -3%;\n top: 2%;\n transform: rotate(-9deg);\n border-radius: 40% 45% 47% 50% / 30% 50% 49% 9%;\n background-image: linear-gradient(180deg, #795349, #5f3b31);\n box-shadow: inset -2px -1px 5px 2px #44272763, 3px 0px 4px -1px #96696961;\n}\n\n.phalange {\n height: 17%;\n}\n\n.phalange.index {\n transform: rotate(-14deg);\n width: 44%;\n left: 49%;\n top: 30%;\n}\n\n.phalange.index .web {\n bottom: 5%;\n width: 3%;\n box-shadow: 0 0 6px 3px #150202, 0 0px 11px 9px #270303c7;\n}\n\n.phalange.middle {\n transform: rotate(-11deg);\n width: 52%;\n left: 51%;\n top: 47%;\n}\n\n.phalange.middle .web {\n bottom: 2%;\n left: 0%;\n width: 7%;\n box-shadow: 1px 0 5px 2px #1b0703, -3px -4px 13px 8px #330303c7;\n}\n\n.phalange.ring {\n transform: rotate(-12deg);\n width: 46%;\n left: 46%;\n top: 64%;\n}\n\n.phalange.ring .web {\n bottom: -6%;\n left: 13%;\n width: 8%;\n box-shadow: 1px 0 5px 3px #1b0703, -3px -4px 11px 10px #330303c7;\n}\n\n.phalange.pinky {\n transform: rotate(-14deg);\n width: 34%;\n height: 15%;\n left: 56%;\n top: 78%;\n}\n\n.phalange.index .phalanx.proximal {\n width: 47%;\n height: 100%;\n background-image: radial-gradient(ellipse closest-side at 50% 29%, #b3897a 62%, #2d0d07 203%);\n box-shadow: inset 8px 0px 11px -6px #ac8275, inset 1px 9px 6px -6px #814240;\n border-radius: 45% 50% 50% 50% / 18% 9% 29% 9%;\n}\n\n.phalange.index .phalanx.middle {\n width: 41%;\n height: 78%;\n left: 44%;\n top: -8%;\n transform: rotate(-9deg);\n background-image: radial-gradient(ellipse closest-side at 42% 30%, #b3897a 61%, #48251b 217%);\n box-shadow: inset 1px 9px 6px -6px #814240;\n border-radius: 50% 29% 90% 9% / 9% 21% 43% 2%;\n}\n\n.phalange.index .phalanx.distal {\n box-shadow: inset -18px 3px 15px -7px #763434;\n width: 30%;\n height: 61%;\n left: 78%;\n top: -31%;\n transform: rotate(-20deg);\n overflow: hidden;\n background-image: linear-gradient(172deg, #b3897a 48%, #38160c 88%);\n border-radius: 24% 80% 90% 9% / 9% 51% 48% 9%;\n}\n\n.phalange.index .interphalangeal.proximal {\n left: 39%;\n top: 14%;\n height: 63%;\n width: 13%;\n background: radial-gradient(ellipse closest-side at 50% 30%, #b3897a 61%, #48251b 217%);\n filter: blur(3px);\n border-radius: 30%;\n transform: rotate(-8deg);\n}\n\n.phalange.index .interphalangeal.distal {\n left: 75%;\n top: -8%;\n height: 53%;\n width: 12%;\n background: radial-gradient(ellipse closest-side at 50% 30%, #b3897a 61%, #48251b 217%);\n filter: blur(3px);\n border-radius: 30%;\n transform: rotate(-26deg);\n}\n\n.phalange.index .phalanx.distal:after {\n width: 56%;\n height: 64%;\n right: 0;\n bottom: 0;\n border-radius: 40% 45% 17% 50% / 50% 30% 9% 49%;\n background-image: linear-gradient(180deg, #d4c0b878, #150b0b);\n box-shadow: -4px 1px 6px 2px #2708083d;\n}\n\n.phalange.index .metacarpophalangeal {\n left: -18%;\n top: 9%;\n height: 77%;\n width: 31%;\n background: radial-gradient(ellipse closest-corner at 50% 30%, #b79082 53%, #5a3327 162%);\n filter: blur(3px);\n border-radius: 30%;\n transform: rotate(-8deg);\n}\n\n.phalange.middle .phalanx.proximal {\n width: 47%;\n height: 100%;\n background-color: #c79f90;\n background-image: radial-gradient(ellipse closest-side at 50% 29%, #c19688 59%, #310700 214%);\n box-shadow: inset 1px 21px 11px -15px #6c3734;\n border-radius: 8% 50% 50% 8% / 53% 9% 13% 45%;\n}\n\n.phalange.middle .phalanx.middle {\n width: 41%;\n height: 88%;\n left: 44%;\n top: 0%;\n transform: rotate(-4deg);\n background-image: radial-gradient(ellipse closest-side at 45% 28%, #c19688 41%, #310700 214%);\n border-radius: 7% 29% 90% 9% / 40% 21% 49% 9%;\n box-shadow: inset 1px 17px 11px -15px #6c3734;\n}\n\n.phalange.middle .phalanx.distal {\n box-shadow: inset -24px 7px 15px -6px #763434;\n width: 30%;\n height: 58%;\n left: 81%;\n top: -9%;\n transform: rotate(-10deg);\n overflow: hidden;\n background-image: linear-gradient(174deg, #b3897a 48%, #290b06 86%);\n border-radius: 46% 53% 90% 9% / 9% 47% 63% 9%;\n}\n\n.phalange.middle .phalanx.distal:after {\n width: 47%;\n height: 64%;\n right: 4%;\n bottom: 10%;\n transform: rotate(-11deg);\n border-radius: 40% 45% 17% 50% / 50% 30% 9% 49%;\n background-image: linear-gradient(180deg, #d4b2a861, #170909);\n box-shadow: -4px 1px 6px 2px #2d0f0f66;\n}\n\n.phalange.middle .interphalangeal.proximal {\n width: 6%;\n height: 63%;\n left: 41%;\n top: 13%;\n color: #613d34a8;\n border-radius: 39%;\n}\n\n.phalange.middle .interphalangeal.proximal {\n left: 40%;\n top: 17%;\n height: 63%;\n width: 10%;\n background: radial-gradient(ellipse closest-side at 50% 30%, #b3897a 61%, #48251b 217%);\n filter: blur(3px);\n border-radius: 30%;\n transform: rotate(-8deg);\n}\n\n.phalange.middle .interphalangeal.distal {\n left: 77%;\n top: 7%;\n height: 46%;\n width: 12%;\n background: radial-gradient(ellipse closest-side at 50% 30%, #b3897a 61%, #48251b 217%);\n filter: blur(3px);\n border-radius: 30%;\n transform: rotate(-15deg);\n}\n\n.phalange.middle .metacarpophalangeal {\n left: -13%;\n top: 4%;\n height: 85%;\n width: 25%;\n background: radial-gradient(ellipse closest-corner at 50% 30%, #bb9283 53%, #5a3327 162%);\n filter: blur(3px);\n border-radius: 30%;\n transform: rotate(-8deg);\n}\n\n.phalange.ring .phalanx.proximal {\n width: 62%;\n height: 112%;\n background-image: linear-gradient(190deg, #210808 15%, #c29686 27%, #906153, #431e17 66%);\n box-shadow: -14px 9px 6px -10px #431e16;\n border-radius: 49% 25% 23% 67% / 50% 9% 13% 49%;\n}\n\n.phalange.ring .phalanx.middle {\n width: 41%;\n height: 85%;\n left: 51%;\n top: -3%;\n transform: rotate(-25deg);\n background-image: linear-gradient(215deg, #381616 26%, transparent 48%), linear-gradient(180deg, #270505 5%, #bf8977, #8a6152 48%, #35150c 90%);\n border-radius: 43% 28% 90% 9% / 89% 21% 32% 9%;\n}\n\n.phalange.ring .phalanx.distal {\n box-shadow: inset -18px 1px 15px 0px #3a0c0c;\n width: 30%;\n height: 66%;\n left: 76%;\n top: -35%;\n transform: rotate(-40deg);\n background-image: linear-gradient(180deg, #330a08 48%, #442f15);\n border-radius: 50% 46% 90% 9% / 9% 42% 48% 9%;\n}\n\n.phalange.ring .interphalangeal.proximal {\n left: 44%;\n top: 27%;\n height: 63%;\n width: 19%;\n background: radial-gradient(ellipse closest-side at 50% 30%, #b3897a 61%, #48251b 217%);\n filter: blur(3px);\n border-radius: 30%;\n transform: rotate(-8deg);\n}\n\n.phalange.ring .metacarpophalangeal {\n left: -5%;\n top: 15%;\n height: 77%;\n width: 25%;\n background: radial-gradient(ellipse closest-side at 50% 30%, #9e7468 42%, #603a32 205%);\n filter: blur(5px);\n border-radius: 30%;\n transform: rotate(26deg);\n}\n\n.phalange.pinky .phalanx.proximal {\n width: 65%;\n height: 100%;\n top: 12%;\n left: -22%;\n transform: rotate(27deg);\n background-image: linear-gradient(180deg, #351414 12%, #c29686 24%, #80584a 52%, #3a150e 78%);\n box-shadow: inset 15px -1px 6px -6px #3a150e;\n border-radius: 50% / 82% 9% 23% 9%;\n}\n\n.phalange.pinky .phalanx.middle {\n width: 48%;\n height: 90%;\n left: 25%;\n top: 24%;\n transform: rotate(-17deg);\n background-image: linear-gradient(188deg, #331313 24%, #c29686 34%, #7d5446 63%, #3a150e 88%);\n box-shadow: inset -10px -6px 6px -10px #5a3430;\n border-radius: 43% 29% 90% 9% / 98% 21% 32% 9%;\n}\n\n.phalange.pinky .phalanx.distal {\n box-shadow: inset -5px 13px 3px -7px #1b0c0c;\n width: 38%;\n height: 66%;\n left: 49%;\n top: 2%;\n transform: rotate(-59deg);\n background-image: linear-gradient(223deg, #331416 43%, #7b5040 70%, #6d4a41 80%);\n border-radius: 50% 46% 90% 9% / 9% 42% 48% 9%;\n}\n\n.phalange.pinky .interphalangeal.proximal {\n left: 22%;\n top: 51%;\n height: 63%;\n width: 19%;\n background: radial-gradient(ellipse closest-side at 50% 30%, #b3897a 61%, #48251b 217%);\n filter: blur(3px);\n border-radius: 30%;\n transform: rotate(-8deg);\n}\n\n.hank .strand {\n border-radius: inherit;\n border-left: 4px double;\n border-right: 0;\n color: inherit;\n width: 100%;\n height: 100%;\n}\n\n.hank .strand:nth-child(2n) {\n height: 90%;\n}\n\n.hank .strand:nth-child(3n) {\n mix-blend-mode: screen;\n}\n\n.hank .strand:nth-child(3n + 1) {\n mix-blend-mode: multiply;\n}\n\n.hank .strand:nth-child(5n) {\n opacity: 0.5;\n}\n\n.hank .strand.s1 {\n left: 2%;\n}\n\n.hank .strand.s2 {\n left: 6%;\n}\n\n.hank .strand.s3 {\n left: 10%;\n}\n\n.hank .strand.s4 {\n left: 10%;\n}\n\n.hank .strand.s5 {\n left: 15%;\n}\n\n.hank .strand.s6 {\n left: 20%;\n}\n\n.hank .strand.s7 {\n left: 25%;\n}\n\n.hank .strand.s8 {\n left: 30%;\n}\n\n.hank .strand.s9 {\n left: 35%;\n}\n\n.hank .strand.s10 {\n left: 40%;\n}\n\n.hank .strand.s11 {\n left: 45%;\n}\n\n.hank .strand.s12 {\n left: 50%;\n}\n\n.hank .strand.s13 {\n left: 55%;\n}\n\n.hank .strand.s14 {\n left: 60%;\n}\n\n.hank .strand.s15 {\n left: 65%;\n}\n\n.hank.h1 {\n border-radius: 100% 0 0 100% / 50% 0 0 50%;\n width: 21%;\n height: 75%;\n top: -22%;\n left: 16%;\n transform: rotate(43deg);\n color: #4f2a18;\n /* overflow: hidden; */\n}\n\n.hank.h2 {\n border-radius: 100% 0 0 100% / 50% 0 0 50%;\n width: 21%;\n height: 65%;\n top: 6%;\n left: -5%;\n transform: rotate(4deg);\n color: #3e1e15;\n}\n\n.hank.h3 {\n border-radius: 100% 0 0 100% / 50% 0 0 50%;\n width: 26%;\n height: 50%;\n top: 38%;\n left: -29%;\n transform: rotate(16deg);\n color: #301710;\n clip-path: polygon(0 0, 90% 9%, 135% 111%, 0 90%);\n}\n\n.hank.h4 {\n border-radius: 100% 0 0 100% / 50% 0 0 50%;\n width: 45%;\n height: 80%;\n top: -20%;\n left: -29%;\n transform: rotate(27deg);\n color: #3c1d14;\n}\n\n.hank.h5 {\n border-radius: 100% 0 0 100% / 50% 0 0 50%;\n width: 29%;\n height: 75%;\n top: 43%;\n left: -38%;\n transform: rotate(-12deg);\n color: #402119;\n}\n\n.hank.h6 {\n border-radius: 32% 0 0 14% / 50% 0 0 50%;\n width: 36%;\n height: 69%;\n top: 86%;\n overflow: hidden;\n filter: blur(1px);\n left: -49%;\n transform: rotate(15deg);\n color: #2e1611;\n}\n\n.hank.h7 {\n clip-path: polygon(5% 34%, 94% -1%, 62% 95%, 5% 96%);\n border-radius: 100% 0 0 100% / 50% 0 0 50%;\n width: 15%;\n height: 48%;\n top: 17%;\n overflow: hidden;\n filter: blur(1px);\n left: -20%;\n transform: rotate(41deg) scaleX(-1);\n color: #30190be0;\n}\n\n.hank.h8 {\n clip-path: polygon(5% 34%, 94% -1%, 62% 95%, 5% 96%);\n border-radius: 100% 0 0 100% / 50% 0 0 50%;\n width: 12%;\n height: 38%;\n top: 25%;\n overflow: hidden;\n filter: blur(1px);\n left: -32%;\n transform: rotate(31deg) scaleX(-1);\n color: #251207e0;\n}\n\n.hank.h9 {\n border-radius: 100% 0 0 100% / 50% 0 0 50%;\n width: 22%;\n height: 43%;\n top: 79%;\n left: -13%;\n transform: rotate(8deg) scaleX(-1);\n color: #34180a;\n}\n\n.hank.h10 {\n border-radius: 100% 0 0 100% / 50% 0 0 50%;\n width: 24%;\n height: 72%;\n top: 54%;\n left: -29%;\n transform: rotate(9deg);\n color: #3c2115;\n}\n\n.hank.h11 {\n border-radius: 100% 0 0 100% / 50% 0 0 50%;\n width: 21%;\n height: 66%;\n top: 77%;\n left: -49%;\n transform: rotate(21deg) scaleX(-1);\n color: #321710;\n filter: blur(2px);\n}\n\n.hank.h12 {\n border-radius: 100% 0 0 100% / 50% 0 0 50%;\n width: 25%;\n height: 56%;\n top: -20%;\n overflow: hidden;\n left: 67%;\n transform: rotate(-41deg) scaleX(-1);\n color: #402315;\n}\n\n.hank.h13 {\n border-radius: 100% 0 0 100% / 50% 0 0 50%;\n width: 35%;\n height: 73%;\n top: 6%;\n overflow: hidden;\n left: 75%;\n transform: rotate(-18deg) scaleX(-1);\n color: #341b10;\n}\n\n.hank.h14 {\n border-radius: 100% 0 0 100% / 50% 0 0 50%;\n width: 18%;\n height: 37%;\n top: -24%;\n /* overflow: hidden; */\n left: 44%;\n transform: rotate(110deg);\n color: #2e1a10;\n}\n\n.hank.h15 {\n border-radius: 100% 0 0 100% / 50% 0 0 50%;\n width: 17%;\n height: 25%;\n top: -12%;\n left: 70%;\n transform: rotate(-62deg) scaleX(-1);\n color: #3a1d10;\n}\n\n.hank.h16 {\n border-radius: 100% 0 0 100% / 50% 0 0 50%;\n width: 18%;\n height: 38%;\n top: 43%;\n filter: blur(1px);\n left: -43%;\n transform: rotate(18deg);\n color: #31190ae0;\n}\n\n.clump {\n filter: blur(4px);\n}\n\n.clump.c2 {\n left: -27%;\n top: -11%;\n width: 63%;\n height: 56%;\n border-radius: 90% 5%;\n background-image: linear-gradient(214deg, #1b0d05 12%, #653c22, #170d08 89%);\n transform: rotate(7deg);\n}\n\n.clump.c3 {\n left: -8%;\n top: -11%;\n width: 35%;\n height: 59%;\n border-radius: 90% 5%;\n background-image: linear-gradient(190deg, #1d0f09 7%, #442312, #673826, #2e190e, #2f191200 98%);\n transform: rotate(23deg);\n box-shadow: inset -20px -7px 30px 3px #421f11;\n}\n\n.clump.c4 {\n left: -29%;\n top: 33%;\n width: 36%;\n height: 57%;\n border-radius: 5% 90%;\n background-image: radial-gradient(ellipse at 19% 45%, #27150a 8%, #33170a63 44%, #2f191200 64%);\n transform: rotate(37deg);\n clip-path: polygon(-9% -9%, 109% -9%, 56% 30%, 55% 34%, 54% 45%, 57% 52%, 61% 57%, 115% 92%, -9% 109%);\n}\n\n.clump.c10 {\n left: -31%;\n top: 65%;\n width: 36%;\n height: 63%;\n border-radius: 5% 90%;\n background-image: linear-gradient(190deg, transparent, #210e06, #361b10, #150a05 70%, transparent);\n transform: rotate(17deg);\n clip-path: polygon(-9% -9%, 74% -9%, 54% 30%, 54% 34%, 56% 45%, 59% 52%, 63% 57%, 115% 92%, -9% 109%);\n}\n\n.clump.c5 {\n left: -50%;\n top: 30%;\n width: 44%;\n height: 59%;\n border-radius: 1% 97%;\n background-image: linear-gradient(214deg, #512c1d00, #2c1a10c9 26%, #25150b 44%, #150b07, #2f191200 96%);\n transform: rotate(28deg);\n /* box-shadow: inset 13px -1px 21px -6px #8a5e42; */\n}\n\n.clump.c8 {\n left: 48%;\n top: 71%;\n width: 56%;\n height: 59%;\n border-radius: 1% 97%;\n background-image: linear-gradient(214deg, #32170b 12%, #130905, #000000);\n transform: rotate(31deg);\n}\n\n.clump.c6 {\n left: -14%;\n top: 66%;\n width: 28%;\n height: 55%;\n border-radius: 5% 95%;\n background-image: radial-gradient(ellipse, #351b0eb0, #251107, #2f191200 96%);\n transform: rotate(26deg);\n}\n\n.clump.c7 {\n left: -37%;\n top: 73%;\n width: 49%;\n height: 69%;\n background-image: linear-gradient(180deg, transparent, #211008,#1d0d06, #150a05, #2f191200 96%);\n transform: rotate(-11deg);\n /* box-shadow: inset 18px -4px 21px -16px #8a5e42; */\n}\n\n.clump.c9 {\n left: -51%;\n top: 91%;\n width: 49%;\n height: 69%;\n background-image: linear-gradient(180deg, transparent, #211008,#2e180e, #150a05, #2f191200 96%);\n transform: rotate(15deg);\n}\n\n.clump.c1 {\n left: -33%;\n top: -11%;\n width: 139%;\n height: 134%;\n border-radius: 50%;\n background-image: radial-gradient(ellipse at 30% 30%, #71452a, #190a04 48%);\n transform: rotate(8deg);\n}\n\n.brow.left {\n left: 28%;\n height: 5%;\n width: 30%;\n top: 22%;\n transform: rotate(-6deg);\n filter: blur(4px);\n border-top: 9px solid #654132ba;\n border-right: 18px solid #65433794;\n border-radius: 50% / 70% 100% 0 0;\n}\n\n.brow.left:before {\n width: 61%;\n box-shadow: 0 0 5px 4px #3c1c1296;\n right: -8%;\n top: 14%;\n transform: rotate(14deg);\n}\n\n.brow.right {\n transform: rotate(9deg);\n left: 75.5%;\n height: 3%;\n width: 19%;\n top: 26.5%;\n filter: blur(4px);\n border-top: 9px solid #654132de;\n border-left: 8px solid #654132c9;\n border-radius: 45% 65% 0 0 / 90% 100% 0 0;\n}\n\n.brow.right:before {\n width: 61%;\n box-shadow: 0 0 5px 4px #3c1c1296;\n left: -8%;\n top: 14%;\n transform: rotate(-14deg);\n}\n\n.brow-hairs.left {\n width: 32%;\n height: 8%;\n top: 20.15%;\n left: 30%;\n background-image: repeating-radial-gradient(circle at -22% 146%, transparent, transparent 1%, #c3a99a 2%, transparent, transparent 3%);\n clip-path: polygon(0 59%, 50% 20%, 100% 52%, 100% 96%, 70% 60%, 30% 50%, 0 74%);\n mix-blend-mode: soft-light;\n}\n\n.brow-hairs.right {\n width: 20%;\n height: 8%;\n top: 24.5%;\n left: 76%;\n background-image: repeating-radial-gradient(circle at -30% -18%, transparent, transparent 2%, #99745f 3%, transparent, transparent 4%);\n clip-path: polygon(18% 18%, 72% 25%, 100% 63%, 100% 84%, 70% 50%, 30% 50%, 0 74%);\n}\n\n.neckline {\n transform: rotate(1deg);\n top: 53%;\n width: 50%;\n height: 20%;\n left: 23%;\n border-radius: 50% 50% 30% 70% / 1% 1% 99% 99%;\n clip-path: polygon(0 41%, 37% 0, 50% 0, 100% 36%, 100% 100%, 0 100%);\n}\n\n.edge {\n height: 100%;\n width: 100%;\n bottom: 0;\n border-radius: inherit;\n background-color: #210909;\n background-image: radial-gradient(ellipse at 66% 100%, #613333, #381c1c);\n background-image: repeating-conic-gradient(from 0deg at 47% -49%, #00000026, #ffffff00 0.29%), radial-gradient(ellipse at 66% 100%, #613333, #381c1c);\n background-clip: content-box;\n box-shadow: 0 0 5px 1px #080b02, inset 0 0 3px 1px #251603c2;\n}\n\n.shoulders {\n top: 0%;\n width: 94%;\n height: 91%;\n left: 3%;\n overflow: hidden;\n background-color: #b48a76;\n background-image: radial-gradient(ellipse farthest-side at 19% 79%, #dfc5b3, transparent 50%),radial-gradient(ellipse farthest-side at 109% 63%, #dfc5b3, transparent 50%), linear-gradient(176deg, #ab716b 14%, transparent 26%), radial-gradient(ellipse at 51% -42%, #351a14 30%, #6c463c 46%, transparent 63%);\n border-radius: inherit;\n background-clip: content-box;\n box-shadow: 1px 6px 3px -3px #f1b9982e, inset 0 -5px 3px -1px #64423b75;\n}\n\n.shoulders:before {\n left: 0;\n top: 16%;\n transform: rotate(-24deg);\n height: 1%;\n width: 40%;\n box-shadow: 0 0 36px 20px #230c09;\n}\n\n.shoulders:after {\n right: 0;\n top: 20%;\n transform: rotate(16deg);\n height: 1%;\n width: 40%;\n box-shadow: 0 0 32px 24px #3e2018;\n}\n\n.collar.right {\n background-color: #1c2111;\n background-image: repeating-radial-gradient(circle at 21% -36%, transparent, #00000045, transparent 0.7%), linear-gradient(-90deg, #0e06015e, #3c241424, transparent 5%), radial-gradient(ellipse closest-side at 46% 38%, #381111, transparent 96%), linear-gradient(166deg, #0b0303, #2a0d0d 21%, #0d0000 65%);\n box-shadow: 3px 9px 9px -3px #00000099;\n height: 50%;\n width: 24%;\n left: 60%;\n top: 59.5%;\n clip-path: polygon(0 35%, 30% -9%, 110% -9%, 111% 111%, 43% 111%);\n transform: rotate(-9deg);\n border-radius: 2% 64% 99% 0 / 17% 16% 75% 0;\n}\n\n.collar.left {\n background-color: #1b1201;\n background-image: repeating-radial-gradient(circle at 124% -9%, transparent, #00000045, transparent 0.7%), linear-gradient(169deg, #0c0404d1 3%, #12060600 12%), linear-gradient(71deg, #050101e3 13%, #180a0a00 35%), radial-gradient(ellipse closest-side at 58% 65%, #3e1616, #270f0f00 96%), linear-gradient(196deg, #190a0a, #311515 21%, #190707 65%);\n height: 50%;\n width: 44%;\n left: 21%;\n top: 55.3%;\n transform: rotate(-22deg);\n border-radius: 44% 44% 0 0 / 6% 3% 0 0;\n}\n\n.sleeve.left {\n background-color: #1b0e01;\n background-image: repeating-radial-gradient(circle at 70% -19%, transparent, #00000045, transparent 1%), linear-gradient(117deg, transparent 59%, #080303 81%), linear-gradient(-85deg, transparent 52%, #070505 89%), radial-gradient(ellipse at 60% 26%, #200b0b 16%, #150707 63%);\n box-shadow: inset -4px 12px 5px -10px #000000a1, inset -4px 13px 10px -12px #a2836a2e, 11px -5px 5px -6px #0000003d;\n height: 50%;\n width: 20%;\n left: 5%;\n top: 66%;\n transform: rotate(1deg);\n border-radius: 41% 52% 0 0 / 85% 46% 0 0;\n}\n\n.sleeve.right {\n background-color: #1b0d01;\n background-image: repeating-radial-gradient(circle at 100% 0%, transparent, #00000045, transparent 1%), radial-gradient(ellipse closest-side at 43% 22%, #461919 9%, #100505 189%);\n box-shadow: inset -20px -47px 30px 2px #070202;\n height: 50%;\n width: 18%;\n left: 72%;\n top: 63%;\n transform: rotate(-3deg);\n border-radius: 26% 57% 0 0 / 0% 46% 0 0;\n}\n\n.scalp {\n left: 71%;\n top: 0%;\n width: 0%;\n height: 2%;\n transform: rotate(-70deg);\n /* box-shadow: 0 0 6px 2px #d7af91; */\n border-radius: 50% / 90% 90% 10% 10%;\n}\n\n.cloud {\n /* background-image: linear-gradient(180deg, #ffffff45, #ffffff00); */\n border-radius: 50%;\n}\n\n.cloud.c1 {\n left: 64%;\n top: 10%;\n width: 30%;\n height: 13%;\n opacity: 0.6;\n filter: blur(20px);\n}\n\n.cloud.c2 {\n left: -4%;\n top: 30%;\n width: 30%;\n height: 19%;\n opacity: 0.5;\n filter: blur(16px);\n}\n\n.cloud.c3 {\n left: 74%;\n top: 30%;\n width: 35%;\n height: 22%;\n filter: blur(20px);\n}\n\n.sky {\n width: 100%;\n height: 100%;\n background-image: radial-gradient(circle farthest-side at 50% 37%, #2a221b 16%, #1b1816 56%, #101217 90%);\n}\n\n\n.hairline-shadow {\n left: 34%;\n top: -25%;\n height: 47%;\n transform: rotate(55deg);\n box-shadow: 0 0 10px 43px #5f3127;\n}\n\n.shawl.s1 {\n left: -0.5%;\n top: 88%;\n width: 35%;\n height: 30%;\n background-color: #111a1d;\n background-image: radial-gradient(ellipse at 80% 30%, #010202, transparent 45%), linear-gradient(44deg, #060a0b 35%, #121a1d, transparent 79%);\n box-shadow: inset -3px 12px 15px -2px #ffffff14, 3px -6px 4px -2px #100202;\n border-radius: 1% 80% 0 0 / 1% 50% 0 0;\n transform: rotate(9deg);\n clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 13% 28%);\n}\n.shawl.s2 {\n left: 67%;\n top: 89%;\n width: 33%;\n height: 36%;\n background-color: #090e10;\n background-image: linear-gradient(-86deg, #000000 3%, transparent 22%);\n box-shadow: inset 3px 15px 22px -2px #ffffff17, -5px -6px 4px -2px #050b10;\n border-radius: 0 1% 75%;\n transform: rotate(-12deg);\n clip-path: polygon(0 0, 100% 0, 91% 20%, 100% 100%, 0 100%);\n}\n.shawl.s3 {\n left: 10%;\n top: 73%;\n width: 33%;\n height: 36%;\n background-color: #101819;\n background-image: linear-gradient(-186deg, #000000 3%, #121a1d21, transparent 44%);\n box-shadow: inset 3px 3px 29px -2px #2b4040;\n border-radius: 5% 1% 75%;\n transform: rotate(-36deg);\n}\n.shawl.s4 {\n left: 67.5%;\n top: 80.5%;\n width: 20%;\n height: 36%;\n background-color: #101819;\n background-image: linear-gradient(-86deg, #000000 3%, transparent 44%);\n box-shadow: inset 3px 3px 19px -2px #2a3535;\n border-radius: 5% 1% 75%;\n transform: rotate(26deg);\n}\n.shawl.s5 {\n left: 10%;\n top: 93%;\n width: 44%;\n height: 14%;\n background-color: #1c282b;\n background-image: linear-gradient(180deg, #dfebf70d, transparent 21%), linear-gradient(44deg, #060a0bb8 35%, #121a1d, transparent 79%);\n box-shadow: 32px -4px 6px 0px #080b0c6e;\n border-radius: 1%;\n transform: rotate(-6deg);\n border-radius: 50% / 40%;\n}\n.shawl.s6 {\n left: 18%;\n top: 95%;\n width: 33%;\n height: 8%;\n background-color: #1a2021;\n background-image: radial-gradient(ellipse at 32% 64%, #0a1112 43%, #1a202100 47%), radial-gradient(ellipse at 32% 64%, #425053 11%, #1a202100 84%);\n box-shadow: inset -7px 5px 5px -3px #2d393c;\n border-radius: 1%;\n /* transform: rotate(-6deg); */\n border-radius: 60% 40% 0 0 / 90% 90% 5% 5%;\n}\n.wrinkle.w1 {\n left: -4%;\n top: -15%;\n height: 24%;\n width: 29%;\n border-radius: 8% 82%;\n transform: rotate(-7deg);\n box-shadow: inset 3px -14px 8px -12px #00000040, 4px 3px 3px -11px #00000036, 6px 12px 13px -14px #ffffff29;\n}\n\n.trap1 {\n left: 32.6%;\n top: 47%;\n width: 7%;\n height: 9%;\n transform: rotate(9deg);\n border-radius: 0 0 88% 0 / 0 0 60% 0;\n box-shadow: 18px 15px 17px -9px #321811;\n}\n\n.trap2 {\n left: 59.6%;\n top: 51.7%;\n width: 6%;\n height: 6%;\n transform: rotate(9deg);\n border-radius: 0 0 0 88% / 0 0 0 60%;\n box-shadow: -18px 18px 17px -7px #46251c;\n}\n" } ]