:root{--penguin-face:white;--penguin-picorna:orange;--penguin-skin:gray}.stage{background:linear-gradient(45deg,#76c9ff,#f7ffde);width:100%;height:100vh;margin:0;padding:0;overflow:hidden}.left-mountain{z-index:2;background:linear-gradient(#cbf1e4,#50b7ff);width:300px;height:300px;margin-top:100px;position:absolute;transform:skewY(44deg)}.back-mountain{z-index:1;background:linear-gradient(#cbf1e4,#2faaff);width:300px;height:300px;position:absolute;top:225px;left:110px;transform:rotate(45deg)}.sun{background-color:#ff0;border-radius:50%;width:200px;height:200px;position:absolute;top:-75px;right:-75px}.penguin{z-index:4;width:300px;height:300px;margin:75px auto auto;transition:transform 1s ease-in-out;position:relative}.penguin *{position:absolute}.penguin-head{background:linear-gradient(45deg, var(--penguin-skin), #eff0e4);z-index:1;border-radius:70% 70% 65% 65%;width:50%;height:45%;top:10%;left:25%}.face{background-color:var(--penguin-face);border-radius:70% 70% 60% 60%;width:60%;height:70%;top:15%}.face.left{left:5%}.face.right{right:5%}.chin{background-color:var(--penguin-face);border-radius:70% 70% 100% 100%;width:90%;height:70%;top:25%;left:5%}.eye{background-color:#000;border-radius:50%;width:15%;height:17%;top:45%}.eye.left{left:25%}.eye.right{right:25%}.eye-lid{background-color:var(--penguin-face);border-radius:50%;width:150%;height:100%;top:25%;left:-23%}.blush{background-color:pink;border-radius:50%;width:15%;height:10%;top:65%}.blush.left{left:15%}.blush.right{right:15%}.beak{background-color:var(--penguin-picorna);border-radius:50%;height:10%}.beak.top{width:20%;top:60%;left:40%}.beak.bottom{width:16%;top:65%;left:42%}.shirt{z-index:1;color:#6a6969;font:700 25px Helvetica,sans-serif;top:165px;left:127.5px}.shirt div{font-weight:initial;top:22.5px;left:12px}.penguin-body{background:linear-gradient(45deg,#868585 0%,#eae7e7 25%,#fff 67%);border-radius:80% 80% 100% 100%;width:53%;height:45%;top:40%;left:23.5%}.penguin-body:before{content:"";background-color:var(--penguin-skin);opacity:.7;border-radius:0% 0% 100% 100%;width:50%;height:45%;position:absolute;top:10%;left:25%}.arm{background:linear-gradient(90deg, var(--penguin-skin), #d1d2c7);z-index:-1;border-radius:30% 30% 30% 120%;width:30%;height:60%}.arm.left{transform-origin:0 0;animation:3s linear infinite wave;top:35%;left:5%;transform:rotate(130deg)scaleX(-1)}.arm.right{top:0%;right:-5%;transform:rotate(-45deg)}@keyframes wave{10%{transform:rotate(110deg)scaleX(-1)}20%{transform:rotate(130deg)scaleX(-1)}30%{transform:rotate(110deg)scaleX(-1)}40%{transform:rotate(130deg)scaleX(-1)}}.foot{background-color:var(--penguin-picorna);z-index:-1;border-radius:50%;width:15%;height:30%;top:85%}.foot.left{left:25%;transform:rotate(80deg)}.foot.right{right:25%;transform:rotate(-80deg)}.ground{z-index:3;background:linear-gradient(90deg,#58afec,#b6ffff);width:100vw;height:calc(100vh - 300px);margin-top:-58px;position:absolute}.penguin.is-talking .beak.bottom{animation:.34s ease-in-out infinite alternate beakChatter}@keyframes beakChatter{0%{height:10%;top:65%}to{height:11%;top:68%}}.penguin.is-talking .arm.right{animation:.9s ease-in-out infinite alternate gesture-r}.penguin.is-talking .arm.left{animation:1.15s ease-in-out infinite alternate gesture-l}@keyframes gesture-r{0%{transform:rotate(-45deg)}to{transform:rotate(-62deg)}}@keyframes gesture-l{0%{transform:rotate(45deg)scaleX(-1)}to{transform:rotate(58deg)scaleX(-1)}}.penguin.is-sleepy .eye-lid{top:-4%}.penguin.is-sleepy .arm.left{animation:none;transform:rotate(30deg)scaleX(-1)}.penguin.is-sleepy .arm.right{animation:none;transform:rotate(-30deg)}.penguin.is-sleepy{animation:4s ease-in-out infinite alternate snooze}@keyframes snooze{0%{transform:translateY(0)scale(1)}to{transform:translateY(6px)scale(.99)}}.penguin:active{cursor:pointer;transform:none}.penguin .arm.left{transform-origin:50%;animation:none;top:0%;left:-5%;transform:rotate(45deg)scaleX(-1)}.penguin.is-waving .arm.left{transform-origin:0 0;animation:3s linear infinite wave;top:35%;left:5%;transform:rotate(130deg)scaleX(-1)}.penguin.is-poked,.penguin.is-jumping,.penguin.is-walking,.penguin.is-running,.penguin.is-eating,.penguin.is-farting{transform-origin:50% 88%}.penguin.is-poked{animation:.72s cubic-bezier(.34,.15,.2,1) poke}@keyframes poke{0%{transform:translateY(0)rotate(0)scale(1)}10%{transform:translateY(-9px)rotate(0)scale(.93,1.09)}26%{transform:translateY(3px)rotate(-4deg)scale(1.09,.91)}44%{transform:translateY(0)rotate(3deg)scale(.99,1.02)}62%{transform:rotate(-2deg)}80%{transform:rotate(1deg)}to{transform:rotate(0)}}.penguin.is-poked .eye-lid{animation:.72s poke-eyes}@keyframes poke-eyes{0%{top:25%}14%{top:92%}70%{top:92%}to{top:25%}}.penguin.is-poked .arm.left{animation:.72s poke-arm-l}.penguin.is-poked .arm.right{animation:.72s poke-arm-r}@keyframes poke-arm-l{0%,to{transform:rotate(45deg)scaleX(-1)}20%{transform:rotate(122deg)scaleX(-1)}55%{transform:rotate(36deg)scaleX(-1)}}@keyframes poke-arm-r{0%,to{transform:rotate(-45deg)}20%{transform:rotate(-122deg)}55%{transform:rotate(-36deg)}}.penguin.is-poked .blush{background-color:#ff9db4;width:19%;height:13%}.penguin.is-jumping{animation:.9s cubic-bezier(.3,.1,.3,1) hop}@keyframes hop{0%{transform:translateY(0)scale(1)}14%{transform:translateY(0)scale(1.12,.85)}30%{transform:translateY(-18px)scale(.93,1.12)}48%{transform:translateY(-52px)scale(.97,1.05)}66%{transform:translateY(-18px)scale(.96,1.06)}82%{transform:translateY(0)scale(1.14,.84)}92%{transform:translateY(0)scale(.97,1.03)}to{transform:translateY(0)scale(1)}}.penguin.is-jumping .arm.left{animation:.9s hop-arm-l}.penguin.is-jumping .arm.right{animation:.9s hop-arm-r}@keyframes hop-arm-l{0%,to{transform:rotate(45deg)scaleX(-1)}14%{transform:rotate(24deg)scaleX(-1)}40%{transform:rotate(112deg)scaleX(-1)}75%{transform:rotate(74deg)scaleX(-1)}}@keyframes hop-arm-r{0%,to{transform:rotate(-45deg)}14%{transform:rotate(-24deg)}40%{transform:rotate(-112deg)}75%{transform:rotate(-74deg)}}.penguin.is-jumping .foot.left{animation:.9s hop-foot-l}.penguin.is-jumping .foot.right{animation:.9s hop-foot-r}@keyframes hop-foot-l{0%,to{transform:translateY(0)rotate(80deg)}48%{transform:translateY(-9px)rotate(52deg)}}@keyframes hop-foot-r{0%,to{transform:translateY(0)rotate(-80deg)}48%{transform:translateY(-9px)rotate(-52deg)}}.penguin.is-walking{animation:1.1s ease-in-out infinite waddle}@keyframes waddle{0%,to{transform:rotate(-7deg)translateY(0)}25%{transform:rotate(-2deg)translateY(-4px)}50%{transform:rotate(7deg)translateY(0)}75%{transform:rotate(2deg)translateY(-4px)}}.penguin.is-walking .foot.right{animation:1.1s ease-in-out infinite waddle-foot-r}.penguin.is-walking .foot.left{animation:1.1s ease-in-out infinite waddle-foot-l}@keyframes waddle-foot-r{0%,50%,to{transform:translate(0)rotate(-80deg)}25%{transform:translate(-3px,-8px)rotate(-80deg)}}@keyframes waddle-foot-l{0%,50%,to{transform:translate(0)rotate(80deg)}75%{transform:translate(3px,-8px)rotate(80deg)}}.penguin.is-walking .arm.left{animation:1.1s ease-in-out infinite waddle-arm-l}.penguin.is-walking .arm.right{animation:1.1s ease-in-out infinite waddle-arm-r}@keyframes waddle-arm-l{0%,to{transform:rotate(60deg)scaleX(-1)}50%{transform:rotate(34deg)scaleX(-1)}}@keyframes waddle-arm-r{0%,to{transform:rotate(-34deg)}50%{transform:rotate(-60deg)}}.penguin.is-running{animation:.34s ease-in-out infinite scurry}@keyframes scurry{0%,to{transform:rotate(-9deg)translateY(-2px)}50%{transform:rotate(9deg)translateY(-7px)}}.penguin.is-running .penguin-head{transform:translate(5px,2px)rotate(7deg)}.penguin.is-running .arm.left{animation:.34s linear infinite run-arm-l}.penguin.is-running .arm.right{animation:.34s linear infinite run-arm-r}@keyframes run-arm-l{0%,to{transform:rotate(84deg)scaleX(-1)}50%{transform:rotate(70deg)scaleX(-1)}}@keyframes run-arm-r{0%,to{transform:rotate(-70deg)}50%{transform:rotate(-84deg)}}.penguin.is-running .foot.right{animation:.34s linear infinite run-foot-r}.penguin.is-running .foot.left{animation:.34s linear infinite run-foot-l}@keyframes run-foot-r{0%,50%,to{transform:translate(0)rotate(-80deg)}25%{transform:translate(-4px,-12px)rotate(-80deg)}}@keyframes run-foot-l{0%,50%,to{transform:translate(0)rotate(80deg)}75%{transform:translate(4px,-12px)rotate(80deg)}}.penguin.is-eating{animation:1.8s eat-body}@keyframes eat-body{0%,to{transform:none}30%{transform:translateY(2px)scale(1.03,.97)}55%{transform:translateY(-3px)scale(.98,1.03)}70%{transform:translateY(0)scale(1.04,.96)}}.penguin.is-eating .penguin-head{animation:1.8s eat-head}@keyframes eat-head{0%,to{transform:rotate(0)translateY(0)}28%{transform:rotate(6deg)translateY(3px)}50%{transform:rotate(-16deg)translateY(-4px)}72%{transform:rotate(-10deg)translateY(-1px)}}.penguin.is-eating .beak.bottom{animation:1.8s eat-beak}@keyframes eat-beak{0%,to{height:10%;top:65%}26%{height:14%;top:71%}46%{height:14%;top:71%}62%{height:10%;top:65%}}.penguin.is-eating .chin{animation:1.8s eat-gulp}@keyframes eat-gulp{0%,to{transform:scale(1)}64%{transform:scale(1.06,1.1)}78%{transform:scale(1)}}.penguin.is-eating .fish{animation:1.8s fish-in;display:block}@keyframes fish-in{0%{opacity:0;transform:translate(44px,44px)rotate(22deg)}12%{opacity:1;transform:translate(26px,28px)rotate(14deg)}34%{opacity:1;transform:translate(3px,2px)rotate(-6deg)}48%{opacity:1;transform:translateY(-2px)rotate(-34deg)}58%{opacity:0;transform:translateY(1px)rotate(-44deg)}to{opacity:0}}.penguin.is-drinking .penguin-head{animation:1.7s drink-head}@keyframes drink-head{0%,to{transform:rotate(0)translateY(0)}24%{transform:rotate(10deg)translateY(7px)}40%{transform:rotate(8deg)translateY(6px)}62%{transform:rotate(-20deg)translateY(-3px)}80%{transform:rotate(-12deg)translateY(0)}}.penguin.is-drinking .beak.bottom{animation:1.7s drink-beak}@keyframes drink-beak{0%,to{height:10%;top:65%}30%{height:12%;top:69%}58%{height:12%;top:69%}72%{height:10%;top:65%}}.penguin.is-drinking .chin{animation:1.7s drink-gulp}@keyframes drink-gulp{0%,to{transform:scale(1)}70%{transform:scale(1.04,1.08)}84%{transform:scale(1)}}.penguin.is-drinking .drop{animation:1.7s drop-fall;display:block}@keyframes drop-fall{0%,18%{opacity:0;transform:translateY(10px)scale(.4)}30%{opacity:1;transform:translateY(2px)scale(1)}52%{opacity:1;transform:translateY(-2px)scale(.9)}64%{opacity:0;transform:translateY(-8px)scale(.5)}to{opacity:0}}.penguin.is-farting{animation:1.1s fart-body}@keyframes fart-body{0%,to{transform:none}22%{transform:scale(1.06,.94)translateY(2px)}40%{transform:scale(.95,1.07)translateY(-7px)}52%{transform:scale(1.05,.95)translateY(-2px)rotate(2deg)}64%{transform:scale(.99,1.01)rotate(-1.5deg)}78%{transform:rotate(1deg)}}.penguin.is-farting .eye-lid{animation:1.1s fart-eyes}@keyframes fart-eyes{0%,to{top:25%}30%{top:2%}50%{top:95%}85%{top:60%}}.penguin.is-farting .blush{background-color:#ff9db4;width:19%;height:13%}.penguin.is-farting .puff{animation:1.5s ease-out puff-out;display:block}@keyframes puff-out{0%,38%{opacity:0;transform:translate(0)scale(.25)}46%{opacity:1;transform:translate(-14px,1px)scale(.7)}62%{opacity:.95;transform:translate(-44px,9px)scale(1.15)}82%{opacity:.6;transform:translate(-78px,20px)scale(1.5)}to{opacity:0;transform:translate(-104px,30px)scale(1.85)}}.shirt{pointer-events:none;z-index:5;width:100%;height:100%;top:0;left:0}.shirt text{fill:#6a6969;font:700 20px Helvetica,sans-serif}.shirt-heart{fill:#9d5bd2}.prop{display:none}.prop.fish{z-index:5;background:linear-gradient(160deg,#bfe3f2,#5d9fbe);border-radius:60% 40% 45% 55%;width:26px;height:13px;top:113px;left:140px}.prop.fish:after{content:"";border:6px solid #0000;border-left-color:#5d9fbe;position:absolute;top:1px;right:-7px}.prop.drop{z-index:5;background:linear-gradient(#a8dcf0,#4aa6d0);border-radius:50%/70% 70% 35% 35%;width:9px;height:12px;top:126px;left:146px}.prop.puff{z-index:-2;background:radial-gradient(circle,#e86aa8f2 0%,#f08dbeb3 42%,#f7b7d600 72%);border-radius:50%;width:58px;height:58px;top:196px;left:62px}.prop.puff:before,.prop.puff:after{content:"";background:radial-gradient(circle,#e86aa8d9 0%,#f7b7d600 70%);border-radius:50%;position:absolute}.prop.puff:before{width:38px;height:38px;top:20px;left:-20px}.prop.puff:after{width:26px;height:26px;top:-12px;left:12px}@media (prefers-reduced-motion:reduce){.penguin *,.penguin{animation:none!important}}
