*{box-sizing:border-box;margin:0;padding:0}body{display:flex;flex-direction:row;justify-content:center;align-items:center;height:100vh}.squidward{--looking: 0;--is-looking: 0;border:.1em solid #000;position:relative;font-size:20px;width:20em;height:20em;display:flex;flex-direction:row;justify-content:center;align-items:center;align-items:initial;overflow:hidden}.squidward .head{width:80%;height:80%;position:relative}.squidward .head .top{border:.2em solid #000;width:100%;height:70%;border-radius:100%;background:#b1d6c5;transform:translateY(calc(var(--is-looking) * 0.6em))}.squidward .head .top .freckles{position:relative;width:100%;height:100%}.squidward .head .top .freckles .freckle{width:2.5%;height:2.5%;background:#306a53;border-radius:100%;position:absolute;top:calc(var(--y)*1%);left:calc(var(--x)*1% + var(--looking)*3%)}.squidward .head .top .wrinkles{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) var(--transform, );display:flex;flex-direction:row;justify-content:center;align-items:center;top:28%;width:80%;height:30%}.squidward .head .top .wrinkles .wrinkle{border-top:.15em solid #3c5347;width:calc(var(--s)*5%);height:calc(var(--s)*5%);border-radius:100%;position:absolute;top:calc(var(--y)*25%);transform:translateX(calc(var(--looking) * 10%))}.squidward .head .top .wrinkles .wrinkle::before,.squidward .head .top .wrinkles .wrinkle::after{position:absolute;content:"";width:2em;height:2em;background:#b1d6c5;left:0}.squidward .head .top .wrinkles .wrinkle::after{left:initial;right:0}.squidward .head .center{border:.2em solid #000;border-top:none;width:50%;height:40%;background:#b1d6c5;--transform: rotate(calc(var(--looking) * -2deg));position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) var(--transform, );top:70%;left:calc(50% + var(--looking)*10%)}.squidward .head .center::before{position:absolute;content:"";width:110%;height:calc(39% + var(--is-looking)*15%);transform:rotate(calc(var(--looking) * -7.5deg));background:#b1d6c5;border-radius:.1em;left:calc(-5% - var(--looking)*1.5%);top:calc(-4% - var(--is-looking)*8%)}.squidward .head .center .eyes{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) var(--transform, );top:15%;width:100%;height:100%;display:flex;justify-content:center}.squidward .head .center .eyes .eye{width:48%;height:92%;background:#eae9b1;border-radius:100%;z-index:10;position:relative;overflow:hidden}.squidward .head .center .eyes .eye::before{position:absolute;content:"";width:89%;height:93%;border-radius:100%;border:.2em solid #000;z-index:100}.squidward .head .center .eyes .eye .pupil{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) var(--transform, );width:18%;height:32%;background:#771f0c;border-radius:10%;z-index:-1}.squidward .head .center .eyes .eye .eyelid{width:100%;height:50%;background:#75b095;z-index:60;position:relative;border:.2em solid #000}.squidward .head .center .eyes .eye .eyelid::before{position:absolute;content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) var(--transform, );width:60%;height:5%;border-top:.2em solid #000;top:initial;bottom:0}.squidward .head .nose{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) var(--transform, );width:29%;height:40%;transform:translate(calc(-50% + var(--looking) * 45%), -50%) rotate(calc(-5deg * var(--looking)));top:95%;z-index:11;background:#b1d6c5;border-radius:30% 30% 45% 45%;border:.2em solid #000;border-width:0 0 .2em #000}.squidward .head .nose:before,.squidward .head .nose:after{position:absolute;content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) var(--transform, );border:0em solid rgba(0,0,0,0);border-bottom-color:#000;border-width:2.2em;border-bottom-width:4.3em;top:-41%;left:50%}.squidward .head .nose:after{border-bottom-color:#b1d6c5;border-width:2em;border-bottom-width:4.1em;top:-37%;left:50%}.squidward .head .bottom{position:relative;width:100%;height:20%;margin-top:15%}.squidward .head .bottom .mouth{--transform: rotate(calc(var(--looking) * -2deg));position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) var(--transform, );width:76%;height:100%;background:#b1d6c5;border-radius:40%;left:calc(50% + var(--looking)*10%);border:.2em solid #000;z-index:10}.squidward .head .bottom .mouth::before{position:absolute;content:"";width:100%;height:80%;background:#fff;border-radius:40%;top:70%;border-top:.2em solid #000}.squidward .head .bottom .mouth::after{position:absolute;content:"";width:100%;height:1em;background:#fff;top:86%}.squidward .head .bottom .mouth span{width:64.8%;height:24%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) var(--transform, );background:#b1d6c5;top:2%;left:calc(50% + var(--looking)*1%)}.squidward .head .bottom .mouth .lips{width:85%;height:70%;border-top:.2em solid #000;border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) var(--transform, );top:60%}.squidward .head .bottom .mouth .lips::before,.squidward .head .bottom .mouth .lips::after{position:absolute;content:"";width:.7em;height:.9em;border-right:.2em solid #000;border-width:.1em !important;top:12%;left:-5%;transform:rotate(-15deg);background:#b1d6c5}.squidward .head .bottom .mouth .lips::after{border-right:none;border-left:.2em solid #000;left:initial;right:-5%;transform:rotate(15deg)}.squidward .neck{width:5.5%;height:31%;--transform: rotate(calc(var(--looking) * 3deg));position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) var(--transform, );top:95%;background:#b1d6c5;border-right:.2em solid #000;border-left:.2em solid #000;z-index:10}