:root {
    --bodyBgColor--:#e3f2f0;
    --neckBeforeBgColor--:radial-gradient(50% 80% at bottom,#8f796c 98%,#0000);
    --neckAfterBgColor--:radial-gradient(8% 50% at left,#0000 92%,#967B6B) left,
    radial-gradient(15% 65% at 100% 64%,#0000 92%,#967B6B) right;
    --strawHatBeforeBgColor--:radial-gradient(100% 100% at 0 47%,#0000 30%,#0004),
    radial-gradient(74% 100% at 50% 100%,#811e2f 98%,#222,#0000) bottom/100% 46%,#967f56;
    --strawHatAfterBgColor--:#705a41;
    --strawHatBorderColor--:#222;
    --hairCColor--:#141214;
    --hairBeforeBgColor--:radial-gradient(106% 94% at 105% 94%,#0000 98%,var(--hairCColor--) ) 0% 0/33% 73%,      
    radial-gradient(89% 50% at 100% 50%,var(--hairCColor--) 98%,#0000) 2% 0/4% 76%,            
    radial-gradient(104% 104% at 0 100%,#0000 98%,var(--hairCColor--) ) 60% 0/29% 67%,                  
    radial-gradient(107% 101% at 0 100%,#0000 98%,var(--hairCColor--) ) 80% 0/19% 64%,                  
    radial-gradient(102% 108% at 103% 102%,#0000 98%,var(--hairCColor--) ) 26% 0/20% 62%,                  
    radial-gradient(105% 110% at 105% 100%,#0000 98%,var(--hairCColor--) ) 7.5% 0/33% 76%,            
    radial-gradient(104% 104% at 0 100%,#0000 98%,var(--hairCColor--) ) 92% 0/19% 83%,            
    radial-gradient(66% 50% at 0 50%,var(--hairCColor--) 98%,#0000 ) 99% 0/6% 60%,            
    radial-gradient(82% 67% at 0% 99%,#0000 98%,var(--hairCColor--) ) 101% 0/12% 66%,            
    radial-gradient(52% 50% at 0 50%,var(--hairCColor--) 98%,#0000 ) 76% 0/6% 52%,            
    radial-gradient(52% 50% at 0 50%,var(--hairCColor--) 98%,#0000 ) 88% 0/5.5% 44%,            
    radial-gradient(52% 50% at 100% 50%,var(--hairCColor--) 98%,#0000 ) 16% 0/6.5% 62%;
    --hairAfterBgColor--:conic-gradient(from 20deg at 0 100%,var(--hairCColor--) 40deg,#0000 0) 6% 0/15% 100%,
    radial-gradient(50% 100% at 50% 0,var(--hairCColor--) 98%,#0000 )3% 54%/23% 7%,
    radial-gradient(100% 102% at 0 0,#0000 98%,var(--hairCColor--)) 0 0/16% 50%,
    radial-gradient(50% 100% at 50% 0,var(--hairCColor--) 98%,#0000) 98% 33%/28% 10%,
    radial-gradient(77% 102% at 100% 0,#0000 98%,var(--hairCColor--))100% 0/14% 30%,
    radial-gradient(51% 100% at 0 106%,var(--hairCColor--) 98%,#0000) 106% -7%/22% 76%,
    conic-gradient(from -49deg at 100% 100%,var(--hairCColor--) 30deg,#0000 0)96% 101%/22% 150%;
    --hairBeforeMaskColor--:radial-gradient(111% 101% at 65% 100%,#000 99%,#0000);
    --earBgColor--:#947e6f;
    --earBorderColor--:#222;
    --earBeforeBgColor--:#7c6355;
    --faceBgColor--:linear-gradient(to top right,#0000 calc(50% - 1px),#54463d ,#0000 calc(50% + 1px)) 86% 50%/3% 5%,
    linear-gradient(#54463d 0 0) 72% 52.5%/1px 5%,
    radial-gradient(77% 100% at 64% 100%,#a38a7a 98%,#0000) top/100% 24%,
    radial-gradient(106% 100% at -4% 0,#a38a7a 98%,#0000) 100% 100%/50.5% 77%,
    radial-gradient(113% 100.5% at 111% 0,#a38a7a 98%,#0000) 0 100%/50.5% 77%;
    --faceBeforeBorderColor--:#54463d;
    --faceAfterBgColor--:radial-gradient(#564135, #7e685b 40%);
    --eyeBgColor--:radial-gradient(farthest-side,#201f20 90%,#0000) 50% 54%/20% 24%,#ddd;
    --eyeBorderColor--:#54463d;
    --noseBgColor--:radial-gradient(farthest-side,#564135 30%, #7e685b 50%,#0000) 0 90%/42% 8% no-repeat;
    --noseBeforeBgColor--:radial-gradient(farthest-side,#564135 80%,#0000) 81% 89%/47% 4% no-repeat,#765f4f;
}
body {
    margin: 0;
    min-height: 100vh;
    background: var(--bodyBgColor--);
    display: flex;
    align-items: flex-end;
}
.lf-luffy {
    width: 640px;
    position: relative;
    overflow: hidden;
}
.lf-luffy::before {
    content: "";
    display: block;
    padding-top: 78.125%;
}
.lf-neck::before,.lf-neck::after {
    content:"";
    position: absolute;
    left: 50%;
}
.lf-neck::before {
    background: var(--neckBeforeBgColor--);
    width: 31%;
    height: 6.5%;
    bottom: -1%;
    transform: translate(-50%);
    filter: drop-shadow(0px -1px #222);
}
.lf-neck::after {
    background: var(--neckAfterBgColor--);
    width: 25.78%;
    height: 15.2%;
    background-size: 50.1% 100%;
    background-repeat: no-repeat;
    bottom: 0;
    transform: translateX(-50%);
    filter: drop-shadow(-1px 0 0 #222) drop-shadow(1px 0 0 #222);
}
.lf-straw-hat::before,.lf-straw-hat::after {
    content: "";
    position: absolute;
}
.lf-straw-hat::before {
    width: 58%;
    height: 49%;
    top: 4%;
    left: 50%;
    background: var(--strawHatBeforeBgColor--);
    background-repeat: no-repeat;
    transform: translate(-51%) rotate(-3deg);
    border-radius: 50% 50% 0 0 / 69% 69% 0 0;
    border: 1px solid var(--strawHatBorderColor--);
}
.lf-straw-hat::after {
    width: 96%;
    top: -4%;
    left: 2%;
    height: 123%;
    background: var(--strawHatAfterBgColor--);
    border:2px solid var(--strawHatBorderColor--);
    border-radius: 50%;
    box-sizing: border-box;
    transform: rotate(-4deg) rotateX(76deg);
}
.lf-hair::before,.lf-hair::after {
    content: "";
    position: absolute;
    transform: translate(-50%);
    top: 45%;
    left: 50%;
}
.lf-hair::before {
    z-index: 1;
    width: 44.65%;
    height: 27%;
    mask:var(--hairBeforeMaskColor--);
    background: var(--hairBeforeBgColor--);
    background-repeat: no-repeat;
}
.lf-hair::after {
    width: 63%;
    height: 26%;
    border-radius: 58% 32.5% 0 0;
    background: var(--hairAfterBgColor--);
    background-repeat: no-repeat;
}
.lf-ear-r,.lf-ear-l {
    position: absolute;
    width: 6%;
    height: 20%;
    background: var(--earBgColor--);
    border: 1px solid var(--earBorderColor--);
    transform: rotate(29deg);
    right: 26%;
    top: 60.5%;
    border-radius: 50%;
}
.lf-ear-r::before,.lf-ear-l::before {
    content:"";
    position: absolute;
    inset: 10% 16%;
    border: inherit;
    border-radius: inherit;
    background: var(--earBeforeBgColor--);
}
.lf-ear-r::after,.lf-ear-l::after {
    content:"";
    position: absolute;
    inset: 28% 35% 17% 0;
    border: inherit;
    border-radius: inherit;
}
.lf-ear-l {
    left: 26.5%;
    right: auto;
    transform: rotate(-29deg) scaleX(-1);
}
.lf-face {
    width: 44%;
    height: 48%;
    position: absolute;
    transform: translate(-50%);
    top: 45%;
    left: 50%;
    background: var(--faceBgColor--);
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 0 #222) drop-shadow(0 1px 0 #222);
}
.lf-face::before {
    content: "";
    width: 60%;
    height: 20%;
    position: absolute;
    bottom: 11%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 52% 31% 0 0;
    border-top: 2px solid var(--faceBeforeBorderColor--);
    clip-path: inset(0 7% 0 11%);
}
.lf-face::after {
    content: "";
    position: absolute;
    transform: translate(-50%);
    bottom: 23%;
    left: 52%;
    width: 11%;
    height: 2.4%;
    filter: blur(1px);
    border-radius: 50%;
    background: var(--faceAfterBgColor--);
}
.lf-eye-l,.lf-eye-r {
    width: 28%;
    height: 28%;
    background: var(--eyeBgColor--);
    background-repeat: no-repeat;
    position: absolute;
    border-radius: 50%;
    top: 19%;
    right: 11%;
    border-top: 2px solid var(--eyeBorderColor--);
    border-bottom: 2px solid var(--eyeBorderColor--);
}
.lf-eye-l {
    left: 9%;
    right: auto;
}
.lf-eye-l::before,.lf-eye-r::after  {
    content:"";
    position: absolute;
    width: 100%;
    height: 20%;
    border-radius: 0 0 45% 42%;
    top: -26%;
    border-bottom: 2px solid var(--eyeBorderColor--);
}
.lf-eye-l::before {
    right: -15%;
    transform: rotate(14deg);
    border-right: 2px solid var(--eyeBorderColor--);
}
.lf-eye-r::after {
    left: -12%;
    transform: rotate(-14deg);
    border-left: 2px solid var(--eyeBorderColor--);
}
.lf-b-eye {
    position: absolute;
    width: 27%;
    height: 14%;
    right: 8%;
    top: 38%;
    border-radius: 0 0 97% 29%;
    border-bottom: 2px solid var(--eyeBorderColor--);
    clip-path: inset(0 8% 0 7%);
}
.lf-nose {
    width: 16%;
    height: 31%;
    position: absolute;
    top: 29%;
    left: 52%;
    transform: translate(-50%);
    background: var(--noseBgColor--);
}
.lf-nose::before {
    content:"";
    position: absolute;
    background: var(--noseBeforeBgColor--);
    clip-path: polygon(20% 0,32% 0,64% 68%,100% 87%,50% 100%,6% 94%,23% 76%);
    inset: 2% 5% 4% 47%;
}