body {
  margin: 0;
  height: 100vh;
  display:grid;
  justify-content: center;
  background: 
    repeating-radial-gradient(at bottom,#0000 1% 3%,#685a5835 4% 6%,#0000 7%)top/1600px 800px no-repeat,#3b3848; /*#212122; #fff7e4;*/
  overflow:hidden;
}

.b1,
.b2 {
  grid-area:1/1;
  display: grid;
  grid-auto-flow: column;
  z-index: 1;
}
.b2 {
  z-index: 3;
}
.b1 .head {
  animation: r 1.2s infinite alternate linear;
}
.b2 .head {
  animation: r 1.5s infinite alternate linear;
}
.b2 > :nth-child(odd){
  z-index: 2;
  animation-delay: -1.5s;
  width: 260px;
}
.b1 > :nth-child(even){
  animation-delay: -1.2s;
}
body > * > :nth-child(odd) .top [class*=eye] {
   background: radial-gradient(farthest-side,#000 32%,#88878d 50% 87%,#000,#0000) 34.5% 44%/15% 24%,
      radial-gradient(farthest-side,#fff 98%,#0000) 32% 47%/26% 34%,
      radial-gradient(80% 46% at left,#0f0f0f 98%,#0000)#49281c;
  background-repeat:no-repeat;
}
body > * > :nth-child(odd) .top [class*=eye] div::before,
body > * > :nth-child(odd) .top [class*=eye] div::after{
  display: none;
}
body > * > :nth-child(odd) .n1{
  border-radius: 0 17px 21px 18px;
}
body > * > :nth-child(odd) .n2{
  border-radius: 0 21px 15px 21px;
}
body > * > :nth-child(odd) .n3{
  border-radius: 0 13px 13px 15px;
}
body > * > :nth-child(odd) .nose:after{
      background: 
        radial-gradient(35% 111% at bottom left,#0000 89%,var(--sk)) left/51% 100%, 
        radial-gradient(35% 129% at bottom right,#0000 89%,var(--sk)) right/51% 100%;
    background-repeat: no-repeat;
}
body > * > :nth-child(even) .mouth{
  clip-path: polygon(23% 22%,76% 23%,88% 100%,11% 100%);
}
body > * > :nth-child(even) .t-mouth {
    width: 25%;
    height: 8%;
    background: none;
    border: 1px solid #0f0f0f;
    top: 66%;
    border-radius: 50% 50% 0 0;
    clip-path: none;
    box-shadow: 13px 0 0 0px var(--sk),-13px 0 0 0px var(--sk);
    filter: none;
}
body > * > :nth-child(even) .t-mouth:before,
body > * > :nth-child(even) .t-mouth:after {
  display: none;
}
body > * > :nth-child(even) :is(.t-mouth-l, .t-mouth-r) {
  top: 71%;
  right: 32%;
  width: 19%;
}
body > * > :nth-child(even) .t-mouth-r {
  left: 32%;
  right: auto;
}


body > * > :nth-child(even) .top {
  height: 41%;
  top: 4%;
  transform: translate(-50%) scaleX(-1);
}
body > * > :nth-child(even) .top:before, 
body > * > :nth-child(even) .top:after {
  display: none;
}
body > * > :nth-child(even) .top [class*=eye]:before {
  border-radius: 0;
  border: none;
  width: 48%;
  top: -37%;
  left: -13%;
  height: 33%;
  transform: rotate(-20deg);
}
.b1 > .head {
   width: 210px;
}
.b1 > :nth-child(even) {
   width: 190px;
}
body > * > .head:nth-child(odd)  {
  --sk:#f7ceb2; 
  --sb:#cf5341; 
}
.b1 {
  transform: translate(100px, 0px);
  filter:brightness(80%)
}


@keyframes r {
  to {
    transform:translateY(3%)
  }
}

/**/

.frog {
  position: absolute;
  z-index: 0;
  inset: 0;
  --g: radial-gradient(#ffffff,#bdbdbd, #0000 72%);
  background: var(--g) 50% 50%/20% 10%,
    var(--g) 70% 10%/10% 20%,
    var(--g) 10% 30%/15% 8%,
    var(--g) 50% 30%/5% 40%,
    var(--g) 90% 20%/10% 30%;
  background-repeat: no-repeat;
  filter: drop-shadow(-20vw -20px 10px #fff) drop-shadow(20vw 16px 20px #fffa) drop-shadow(22vw 15vh 20px #fff5) drop-shadow(-10vw -20vh 20px #fff5) drop-shadow(-12vw 16px 28px #fff5) blur(40px);
    /* animation: f 5s infinite alternate linear; */
}
@keyframes f {
  to {
    background-position: 50% 70%,70% 0%,10% 40%,50% -10%,90% 40%;
      
  }
}

/**/

.eren {
    position: absolute;
    inset: 0 calc(50% - 380px) auto;
    height: 800px;
}
.eren .h {
    position: absolute;
    inset: 5.5% 38.5% 0 41.5%;
    border-radius: 80px 80px 0;
    background: linear-gradient(#262223 0 0) top/100% 12%,linear-gradient(90deg, #1e1a1b 34%, #0000 0 64%,#1e1a1b 0);
    background-repeat: no-repeat;
   filter: drop-shadow(0px 0px 2px #0009);
}
.eren .h:before {
    content: "";
    position: absolute;
    background: radial-gradient(at 0 0,#0000 70%, #5f3d3f 76%),#8e7a78;
    width: 110%;
    aspect-ratio: 1;
    top: 8%;
    left: 50%;
    transform: translate(-50%)rotate(45deg);
    border-radius: 41px;
    clip-path: polygon(45% 0%,44% 0%,100% 54%,100% 100%,55% 100%,0 45%);
}
.eren .e:before,
.eren .e:after{
    content: "";
    position: absolute;
    top: 16.8%;
    left: 14%;
    width: 25%;
    height: 20px;
    background: radial-gradient(at 50% 12%,#68d277 10%,#55554b 24%,#0004 );
    border-radius: 0 0 500px 500px;
    box-shadow: 0 0 7px #0009;
    transform: rotate(15deg);
}
.eren .e:after{
    right: 14%;
    left:auto;
    transform: rotate(-15deg);
}
.eren .h:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(156% 139% at bottom,#0000 62%,#282425 65%),repeating-linear-gradient(90deg,#0000 0 2%,#302b2c 0 3%),repeating-linear-gradient(90deg,#0000 0 3%,#322b2c 0 4%),repeating-linear-gradient(90deg,#0000 0 3.7%,#242222 0 4.5%);
    border-radius: inherit;
}
.eren .bones {
  position: absolute;
  inset:0;
  filter: drop-shadow(0 0 1px #000a) drop-shadow(0 0 1px #000d);
  --b: #685a58;
}
.eren .bn1:before {
    content: "";
    position: absolute;
    top: -14%;
    width: 70%;
    height: 39%;
    border: 16px solid var(--b);
    border-radius: 50%;
    transform: translate(-50%);
    z-index:1;
    left: 50%;
}
.eren .bn1:after {
    content: "";
    position: absolute;
    top: -21%;
    width: 75%;
    height: 39%;
    border: 16px solid var(--b);
    border-radius: 50%;
    transform: translate(-50%);
    left: 50%;
}
.eren .bn2:before {
    content: "";
    position: absolute;
    top: -25%;
    width: 75%;
    height: 39%;
    border: 16px solid var(--b);
    border-radius: 50%;
    transform: translate(-50%);
    left: 50%;
}
.eren .bn2:after {
    content: "";
    position: absolute;
    top: -29%;
    width: 74%;
    height: 39%;
    border: 16px solid var(--b);
    border-radius: 50%;
    transform: translate(-50%);
    left: 50%;
}
.eren .bn3:before {
    content: "";
    position: absolute;
    top: -33%;
    width: 75%;
    height: 39%;
    border: 12px solid var(--b);
    border-radius: 50%;
    transform: translate(-50%);
    left: 50%;
}
.eren .bn3:after {
    content: "";
    position: absolute;
    top: -21%;
    width: 78%;
    height: 44%;
    border: 26px solid var(--b);
    border-radius: 50%;
    transform: translate(-50%);
    left: 50%;
    z-index: 1;
    filter: drop-shadow(0 2px 2px #0005);
}
.eren .bn4:before {
    content: "";
    position: absolute;
    top: 1%;
    width: 27%;
    height: 20%;
    border: 16px solid var(--b);
    border-bottom-color: #0000;
    border-radius: 84% 50% 62%;
    right: 20%;
    filter: drop-shadow(0 0 1px #000d)
}
.eren .bn4:after {
    content: "";
    position: absolute;
    top: 1%;
    width: 27%;
    height: 20%;
    border: 16px solid var(--b);
    border-bottom-color: #0000;
    border-radius: 50% 84% 31% 62%;
    left: 21%;
    filter: drop-shadow(0 0 1px #000d)
}
.eren .bn5 {
    position: absolute;
    background: radial-gradient(37% 93% at 0 0,#0000 98%,var(--b) ) 0 0/52% 20% repeat-y,radial-gradient(37% 93% at 100% 0,#0000 98%,var(--b) ) 100% 0/52% 20% repeat-y;
    background-clip: content-box;
    height: 10%;
    width: 7%;
    padding: 0 1px;
    left: 51%;
    transform: translate(-50%);
    filter: drop-shadow(0 0 1px #000d);
}
.eren .ea {
    position: absolute;
    inset: 0;
    filter: drop-shadow(0px 0px 2px #000d);
}
.eren .ea:before {
    content: "";
    position: absolute;
    width: 8%;
    height: 26px;
    left: 34.5%;
    top: 19%;
    border: 5px solid #8e7a78;
    background: linear-gradient(23deg,#8e7a78 47%,#5a484c 51%);
    border-radius: 5px 0 11px 0;
    transform: rotate(17deg) skewX(-18deg);
    clip-path: polygon(-10% 0%,100% 0,100% 114%,0% 10%);
}
.eren .ea:after {
    content: "";
    position: absolute;
    width: 8%;
    height: 26px;
    right: 31.5%;
    top: 18.5%;
    border: 5px solid #8e7a78;
    background: linear-gradient(23deg,#8e7a78 47%,#5a484c 51%);
    border-radius: 5px 0 11px 0;
    transform: scaleX(-1) rotate(17deg) skewX(-18deg);
    clip-path: polygon(-10% 0%,100% 0,100% 114%,0% 10%);
}
.eren .ch{
    position: absolute;
    inset: 0;
    filter: drop-shadow(0px 0px 2px #0f0f0f) drop-shadow(0px 0px 0px #0f0f0f);
}
.eren .ch:before,
.eren .ch:after {
    content: "";
    position: absolute;
    width: 22%;
    height: 13px;
    background: linear-gradient(#0f0f0f 0 0)50%/100% 1px no-repeat,#e9e9e9;
    -webkit-mask: radial-gradient(#000 45%,#0000 67%) 0 0/18% 100%;
    top: 25%;
    left: 14%;
    transform: rotate(12deg);
}
.eren .ch:after {
   right: 16%;
   left: auto;
    transform: rotate(-12deg);
}
.eren .mo:before {
    content: "";
    position: absolute;
    width: 22%;
    height: 9px;
    background: #7e6d6c;
    border-radius: 0 0 50px 50px;
    top: 26.5%;
    left: 38%;
    border-bottom: 1px solid #282425;
}
.eren .mo:after {
    content: "";
    position: absolute;
    width: 24%;
    height: 5px;
    background: #685a59;
    border-radius: 50% 50% 0 0;
    top: 193px;
    left: 38%;
    box-shadow: 0 0 4px #282425;
}
.eren .no {
    position: absolute;
    width: 8%;
    height: 5%;
    background: linear-gradient(180deg,#55554b 70%,#0000);
    top: 20%;
    left: 46%;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 -8px 4px #0005;
    border: 1px solid #464646;
    border-top-color: #0005;
}
.eren .no:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 106%;
    background: #8e7a78;
    border-radius: 67%;
    left: 34px;
    top: 16px;
    transform: rotate(68deg);
    box-shadow: 3px 0 5px #0005;
}
.eren .no:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 106%;
    background: #8e7a78;
    border-radius: 67%;
    right: 31px;
    top: 16px;
    transform: rotate(-68deg);
    box-shadow: -3px 0 5px #0005;
}
/**/

.head {
   --sk:#f5dac7; /*#f7ceb2 #e6c6b7*/ 
   --sb:#ca7a64; /*#cf5341*/
   width: 240px;
   aspect-ratio: 295/430;
   position:relative;
   filter:drop-shadow(0 0px 1px black);
   margin: auto auto 0;
}
.top {
    position: absolute;
    overflow: hidden;
    width: 78%;
    height: 42%;
    left: 50%;
    top: 3%;
    transform: translate(-50%);
    --c1: #5f5149;
    background: 
      linear-gradient(var(--c1) 0 0) 50% 70%/1px 15%,
      linear-gradient(to bottom left,#0000 40%,var(--c1),#0000 50%) 47% 74%/4% 16%,
      linear-gradient(to bottom right,#0000 40%,var(--c1),#0000 50%) 54% 74%/4% 20%,
      linear-gradient(to bottom right,#0000 40%,var(--c1),#0000 50%) 59% 74%/8% 11%,
      linear-gradient(to bottom left,#0000 40%,var(--c1),#0000 50%) 41% 74%/8% 11%,
      linear-gradient(to bottom left,#0000 40%,var(--c1),#0000 50%) 43% 74%/5% 11%,
      linear-gradient(to bottom right,#0000 40%,var(--c1),#0000 50%) 57% 74%/5% 11%,
      linear-gradient(to bottom left,#0000 40%,var(--c1),#0000 50%) 57% -15%/3% 22%,      
      linear-gradient(to bottom left,#0000 40%,var(--c1),#0000 50%) 71% -5%/4% 19%,      
      linear-gradient(to bottom right,#0000 45%,var(--c1),#0000 55%) 82% 65%/3% 7%,      
      linear-gradient(to bottom right,#0000 45%,var(--c1),#0000 54%) 75% 61%/4% 8%,      
      linear-gradient(to bottom left,#0000 45%,var(--c1),#0000 54%) 21% 45%/3% 11%,      
      linear-gradient(to bottom left,#0000 48%,var(--c1),#0000 52%) 26% 69%/8% 22%,      
      linear-gradient(to bottom right,#0000 41%,var(--c1),#0000 58%) 57% 23%/3% 19%,      
      linear-gradient(to bottom right,#0000 41%,var(--c1),#0000 58%) 86.5% 23%/2% 15%,      
      linear-gradient(to bottom right,#0000 46%,var(--c1),#0000 53%) 84% 37%/6% 10%,      
      linear-gradient(to bottom right,#0000 42%,var(--c1),#0000 58%) 68% 38%/4% 4%,      
      linear-gradient(to bottom right,#0000 45%,var(--c1),#0000 55%) 71% 27%/4% 22%,
      linear-gradient(to bottom right,#0000 40%,var(--c1),#0000 60%) 34% 40%/2% 12%,      
      linear-gradient(to bottom left,#0000 40%,var(--c1),#0000 60%) 35% 27%/2% 29%,      
      linear-gradient(to bottom left,#0000 40%,var(--c1),#0000 60%) 18% 18%/2% 16%,      
      linear-gradient(to bottom left,#0000 45%,var(--c1),#0000 55%) 43% 2%/3% 24%,      
      linear-gradient(var(--sk) 0 0) top/100% 77%,      
      linear-gradient(var(--sk) 0 0) bottom/88% 28%;
    background-repeat: no-repeat;
    border-radius: 50% 50% 0 0/65% 63% 0 0;
    border-top: 1px solid;
    border-bottom: 0;
}
.top:before,
.top:after{
    content: "";
    position: absolute;
    width: 13%;
    height: 43%;
    background: radial-gradient(120% 89% at 41% 0,#0000 93%,#4b2a1e ),var(--sb);
    right: -2%;
    top: 42%;
    border-radius: 53% 47% 46% 54% / 58% 30% 70% 42%;
    border: 1px solid #5f5149;
}
.top:before {
  left:-2%;
  right:auto;
  transform:scaleX(-1);
}
.top [class*=eye]{
    position: absolute;
    width: 34%;
    height: 24%;
    background: 
      radial-gradient(farthest-side,#000 32%,#88878d 50% 87%,#000,#0000) 34.5% 44%/15% 24%,
      radial-gradient(farthest-side,#fff 98%,#0000) 32% 47%/29% 25%,
      radial-gradient(80% 46% at left,#0f0f0f 98%,#0000)#49281c;
    right: 8%;
    background-repeat: no-repeat;
    top: 75%;
    border-radius: 0 50% 50% 0;
    border: 1px solid #0f0f0f;
}
.eye-l {
  left:8%;
  right:auto;
  transform:scaleX(-1);
}
.top [class*=eye] div:before, 
.top [class*=eye] div:after {
    content: "";
    position: absolute;
    width: 27%;
    top: 21%;
    right: 50%;
    aspect-ratio: 1;
    border-radius: 100% 0 0;
    border: 2px solid #994d40;
    box-shadow: 1px 1px 2px inset #0f0f0f;
    border-right: 0;
    border-bottom: 0;
    transform: rotate(45deg);
}
.top [class*=eye] div:after {
    transform: rotate(-135deg);
    top: 24%;
    border-width: 1.5px;
}
.top [class*=eye]:before {
    content: "";
    position: absolute;
    width: 84%;
    top: -9%;
    left: -13%;
    height: 33%;
    background: var(--sk);
    border-radius: 6px 0 100% 8px;
    border: 2px solid #0f0f0f;
    border-top: 0;
    border-right: 0;
    transform-origin: right bottom;
    transform: rotate(-2deg);
}
.top [class*=eye]:after {
    content: "";
    position: absolute;
    right: 100%;
    width: 16%;
    top: 25%;
    height: 75%;
    background: #0f0f0f;
    border-radius: 100% 0 0 0;
}
.b-eye-r,
.b-eye-l{
    position: absolute;
    width: 28.5%;
    height: 18%;
    background: 
      radial-gradient(107% 82% at 63% 0,#0000 84%,#4b2a1e70 ),
      linear-gradient(var(--sb) 0 0)bottom/100% 81%,
      radial-gradient(84% 95% at 24% 100%,var(--sb) 98%,#0000) 0 0/50% 20%,
      radial-gradient(71% 103% at 30% -33%,#0000 98%,var(--sb)) 100% 0/50% 20%;
    background-repeat: no-repeat;
    right: 19%;
    top: 42%;
    border-radius: 39% 0 50% 50%/15% 0 50% 50%;
    filter: drop-shadow(0 -1px 0 #0f0f0f);
}
.b-eye-l {
  left:19%;
  right:auto;
  transform:scaleX(-1)
}
.nose {
  position:absolute;
  inset:0;
  filter: drop-shadow(0 0 1px #0f0f0f) drop-shadow(0 0 1px #0f0f0f);
    clip-path: inset(44.5% 0 0 0);
}
.nose:after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    background: 
      radial-gradient(35% 92% at bottom left,#0000 89%,var(--sk)) left/51% 100%,
      radial-gradient(35% 92% at bottom right,#0000 89%,var(--sk)) right/51% 100%;
    background-repeat: no-repeat;
    width: 7%;
    top: 44.5%;
    height: 4%;
}
.n1 {
  position: absolute;
  width: 13%;
  aspect-ratio:1/1;
  top: 51%;
  background: var(--sk);
  left: 50%;
  transform: translate(-50%) rotate(45deg) rotate3d(1, -1, 0, 41deg);
  border-radius: 0 5px 13px 5px;
}
.n2 {
   position: absolute;
   width: 9%;
   aspect-ratio: 1/1;
   top: 49%;
   background: var(--sk);
   left: 50%;
   transform: translate(-50%) rotate(45deg) rotate3d(1, -1, 0, 9deg);
  border-radius: 0 5px 13px 5px;
}
.n3 {
    position: absolute;
    width: 9%;
    aspect-ratio: 1/1;
    top: 46%;
    background: var(--sk);
    left: 50%;
    transform: translate(-50%) rotate(45deg) rotate3d(1, 1, 0, 44deg);
    border-radius: 0 5px 13px 5px;
}
.u-nose {
    position: absolute;
    left: 50%;
    top: 56%;
    transform: translate(-50%);
    width: 37%;
    height: 17%;
    background: 
      radial-gradient(50% 107% at top,#0005 72%,#0000) top/45% 30%,
      linear-gradient(to bottom right,#0000 40%,#5f5149,#0000 50%) 40% 36%/8% 57%,
      linear-gradient(to bottom left,#0000 40%,#5f5149,#0000 50%) 60% 36%/8% 57%,      
      radial-gradient(116% 32% at 150% -6%,#0000 93%,#0f0f0f 95% 98%,var(--sk)) right/50.5% 100%,      
      radial-gradient(116% 32% at -50% -6%,#0000 93%,#0f0f0f 95% 98%,var(--sk)) left/50.4% 100%;
    background-repeat: no-repeat;
}
.lig-r,
.lig-l{
    position: absolute;
    height: 28%;
    width: 7.5%;
    background: radial-gradient(67% 40% at -24% 44%,#0000 90%,#0f0f0f 92% 96%,var(--sk));
    border-radius: 0 100% 100% 0/0 50% 50% 0;
    right: 10%;
    top: 41%;
    transform-origin: top;
    transform: rotate(27deg);
    border-right: 2px solid #0f0f0f;
    clip-path:polygon(0 0,100% 21%,100% 84%,-20% 100%);
}
.lig-l {
  right:auto;
  left:10%;
  transform:scaleX(-1) rotate(27deg);
}
.lig-rr,
.lig-ll {
    position: absolute;
    height: 32%;
    width: 4%;
    right: 15.3%;
    top: 42%;
    border-radius: 100% 100% 0 0;
    border: 2px solid #0f0f0f;
    transform: rotate(9deg);
    box-shadow: 0 0 0 33px var(--sk);
    clip-path: polygon(-90% -30%,87% -21%,136% 90%,33% 42%,45% 18%,0% 18%);
}
.lig-ll {
  left: 15.3%;
  right:auto;
  transform:scaleX(-1) rotate(9deg);
}
.lig-r1,
.lig-l1{
    position: absolute;
    height: 15%;
    width: 18%;
    right: 12%;
    top: 61.2%;
    border-radius: 15px 0 0 20px/32px 0 0 20px;
    transform: rotate(-15deg);
    border: 2px solid #0f0f0f;
    box-shadow: 0 0 0 300px var(--sk);
    clip-path: polygon(-14% 0,24% -4%,38% 34%,41% 120%,-38% 100%);
}
.lig-l1{
    left: 12%;
   right:auto;
    transform:scaleX(-1) rotate(-15deg);
}
.lig-r2, 
.lig-l2 {
    position: absolute;
    height: 12.5%;
    width: 4%;
    right: 16.5%;
    top: 64%;
    border-radius: 0 0 100% 0/0 0 32% 0;
    border: 2px solid #0f0f0f;
    border-top: 0;
    border-left: 0;
    box-shadow: 0 0 0 300px var(--sk);
    clip-path: polygon(13% 0%,125% 0,125% 115%,13% 103%);
}
.lig-l2{
  left: 16.5%;
  right:auto;
  transform:scaleX(-1)
}
.bottom {
    position: absolute;
    width: 50%;
    aspect-ratio: 1/1;
    background: radial-gradient(circle at 67% 68%,var(--sb) 41%,#0f0f0f,#0000 43%),var(--sk);
    top: 61%;
    left: 50%;
    transform: translate(-50%) rotateX(28deg) rotate(45deg);
    border-radius: 0 5px 50% 5px;
    border-right: 2px solid #0f0f0f;
    border-bottom: 2px solid #0f0f0f;
    clip-path:polygon(95% 0,100% 0,100% 100%,0 100%,0 95%);
    overflow:hidden;
}
.bottom:before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(72% 78% at top,#0000 92%,#0006);
    transform: rotate(-45deg);
}
.cheek-r, 
.cheek-l {
    position: absolute;
    width: 20%;
    height: 34%;
    --c: #e9e9e9 79%,#0f0f0f 82% 98%,#0000;
    background: 
      radial-gradient(65% 89% at 51% 100%,#0000 50%,#4b2a1e ),
      radial-gradient(57% 52% at 50% 50%,var(--c)) 19% 79%/8% 12%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 28% 78%/8% 12%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 37% 77%/8% 12%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 46% 76%/8% 12%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 54% 75%/6% 12%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 62% 74%/6% 12%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 69% 73%/6% 12%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 76% 72%/6% 12%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 81% 71%/6% 12%,
      var(--sb);
    background-repeat: no-repeat;
    right: 13%;
    top: 43%;
    clip-path: polygon(0 0,100% 0,78% 100%,0 100%);
}
.cheek-l{
    left: 13%;
    right:auto;
    transform:scaleX(-1);
}
.cheek-r:before, 
.cheek-l:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 27.5%;
    background: #0f0f0f;
    transform: rotate(-17deg);
}
.ear-r, 
.ear-l {
    position: absolute;
    height: 29%;
    width: 10%;
    background: 
      linear-gradient(to bottom right,#0f0f0f 50%,#0000 54%)31% 81%/28% 22% ,      
      radial-gradient(farthest-side,#0f0f0f 91%,#0000) 0 59%/55% 43%,      
      radial-gradient(farthest-side,#a39185 92%,#0000) 35% 38%/61% 47%,      
      radial-gradient(farthest-side,#0f0f0f 97%,#0000) 33% 20%/69% 53%,      
      radial-gradient(farthest-side,var(--sk) 95%,#0000) bottom/32% 23%,      
      linear-gradient(102deg,var(--sk) 71%,#0000 72%),      
      linear-gradient(var(--sk) 0 0)top /100% 42%;
    background-repeat: no-repeat;
    right: 2.5%;
    top: 36%;
    border-radius: 100% 100% 0 0;
    transform-origin: top;
    transform: rotateY(32deg) rotate(10deg);
    filter: drop-shadow(0 0 0px #000) drop-shadow(0 0 0px #000);
}
.ear-l{
  right:auto;
  left:2%;
  transform:scaleX(-1) rotateY(32deg) rotate(10deg);
}
.mouth {
    position: absolute;
    width: 40%;
    height: 10%;
   --c:#e9e9e9 79%,#0f0f0f 82% 98%,#0000;
    background: 
      linear-gradient(#0f0f0f 0 0) 50% 50.5%/100% 1.5px,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 14% 47%/6% 38%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 20% 47%/6% 38%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 27% 50%/6% 38%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 33% 50%/6% 38%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 39% 50%/6% 38%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 46.5% 50%/8% 38%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 55% 50%/8% 38%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 62% 50%/6% 38%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 68% 50%/6% 38%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 74% 50%/6% 38%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 81% 50%/6% 38%,
      radial-gradient(57% 52% at 50% 50%,var(--c)) 86% 50%/6% 38%,
      var(--sb);
    background-repeat: no-repeat;
    left: 50%;
    top: 64%;
    transform: translate(-50%);
    clip-path: polygon(21% 0,79% 0,100% 100%,0 100%);
}
.t-mouth {
    position: absolute;
    width: 28%;
    height: 4%;
    background:
      conic-gradient(from -80deg at bottom,#836b65 0 160deg,#0000 0) 0 40%/100% 80%,
      radial-gradient(43% 39% at bottom,#0000 98%,#836b65);
    background-repeat:no-repeat;
    left: 50%;
    transform: translate(-50%);
    top: 62%;
    border-radius: 1000px 1000px 0 0/500px 500px 0 0;
    clip-path:polygon(-30% -40%,31% -19%,50% 17%,68% -19%,130% -40%,130% 500%,-30% 500%);
    filter: drop-shadow(0 0 1px #0f0f0f) drop-shadow(0 0 0 #0f0f0f);
}
.t-mouth:before {
    content: "";
    position: absolute;
    right: 3%;
    width: 72%;
    height: 40%;
    bottom: 59%;
    transform-origin: right bottom;
    transform: rotate(-113deg);
    background: #836b65;
    clip-path: polygon(0 100%,100% 0,100% 100%);
    border-radius: 0 50% 50% 0;
}
.t-mouth:after {
    content: "";
    position: absolute;
    left: 3%;
    width: 72%;
    height: 40%;
    bottom: 59%;
    transform-origin: left bottom;
    transform: rotate(113deg);
    background: #836b65;
    clip-path: polygon(0 0,100% 100%,0 100%);
    border-radius: 50% 0 0 50%;
}
.t-mouth-l,
.t-mouth-r{
    position: absolute;
    right: 30%;
    width: 20%;
    height: 8%;
    background: radial-gradient(90% 60% at 0 100%,#0000 98%,var(--sk));
    top: 72%;
    border-top: 2px solid #0f0f0f;
    border-left: 0;
    border-bottom: 0;
    border-radius: 0 55% 0 0;
    transform: rotate(-5deg);
}
.t-mouth-r{
    left: 30%;
    right:auto;
    transform:scaleX(-1) rotate(-5deg);
}
.t-mouth-t {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 74.7%;
    width: 24%;
    height: 4.5%;
    background: radial-gradient(97% 95% at top,#0000 72%,#0f0f0f) var(--sk);
    border-radius: 0 0 60% 60%/0 0 50% 50%;
    border-bottom: 1px solid #0f0f0f;
}
.t-mouth-t:before,
.t-mouth-t:after{
    content: "";
    position: absolute;
    width: 17%;
    height: 54%;
    border-radius: 50%;
    top: 55%;
    left: 96%;
    border-top: 1px solid #0f0f0f;
    box-shadow: 0 -5px 0 var(--sk);
}
.t-mouth-t:after{
    left:auto; 
    right:98%;
}
.head .edge:before,
.head .edge:after{
    content: "";
    position: absolute;
    width: 1px;
    height: 15%;
    background: #0f0f0f;
    bottom: 22%;
    left: 15%;
    z-index: 1;
}
.head .edge:after{
   right:15%;
   left:auto;
}
.head .edge-e:before, 
.head .edge-e:after {
    content: "";
    position: absolute;
    width: 1px;
    height: 21%;
    background: #0f0f0f;
    bottom: 37%;
    left: 15%;
    z-index: 1;
    transform: rotate(-7deg);
    transform-origin: bottom;
} 
.head .edge-e:after {
    left:auto;
    right:15%;
    transform: rotate(7deg);
}
.back {
    width: 130%;
    left: 50%;
    position: absolute;
    aspect-ratio: 1;
    background: var(--sb);
    transform: translate(-50%) rotate(45deg)rotate3D(1,-1,0,42deg);
    top: 66%;
    border: 2px solid #0f0f0f;
    border-radius: 0 40% 0 15%/0 15% 0 40%;
}
.back-t {
    position: absolute;
    width: 67%;
    height: 80%;
    left: 50%;
    transform: translate(-50%);
    background: radial-gradient(86% 100% at 51% 0%,#4b2a1e 70%,#0000 ) var(--sb);
    bottom: -23%;
    border-radius: 0 0 80% 80%/0 0 100% 100%;
    border: 16px solid var(--sk);
    box-shadow: 3px 0 0 #0f0f0f inset,-3px 0 0 #0f0f0f inset;
    filter: drop-shadow(0px 0px 1px #0f0f0f) drop-shadow(0px 0px 1px #0f0f0f);
}
*,
*:before,
*:after{
  box-sizing:border-box;
}