*,:after,:before{box-sizing:border}header,footer{display:none!important}:root{--bg:#ff8a65;--anime-speed:.2s;font-size:.75vw}body{background:var(--bg);height:100vh;font-family:arial;overflow:hidden}.cow{aspect-ratio:2;z-index:10;transform-origin:100% 150%;width:30rem;animation:jmb var(--anime-speed)linear,move calc(var(--anime-speed)*10)linear;background-color:#fefefe;border-radius:4rem/15%;position:absolute;top:40%;left:38%;transform:translateY(15rem)rotate(90deg)}.cow:before{content:"";color:#000;background:currentColor;border-radius:0 0 100% 50%;width:40%;height:60%;position:absolute;top:0;left:11%;box-shadow:9rem -2rem 0 -2rem,15rem -3rem 0 -3rem}.cow:after{content:"";color:#000;aspect-ratio:1;background:currentColor;border-radius:43% 57% 51% 49%/51% 55% 45% 49%;width:5rem;position:absolute;bottom:6%;left:20%;box-shadow:8rem -4rem 0 -1rem}.cow .head{z-index:1;position:absolute;top:0;left:100%}.cow .head .face{aspect-ratio:12.5/7.5;z-index:10;background:#fff;border-radius:10% 100% 50% 45%/44% 72% 26% 25%;width:11rem;position:relative;transform:rotateX(180deg)rotate(-55deg)translate(-25%,-55%);box-shadow:inset -2rem 4.5rem #000}.cow .head:after,.cow .head:before{content:"";z-index:20;background:#000;border-radius:0% 100% 38% 62%/41% 73% 27% 59%;width:4rem;height:5rem;position:absolute;top:-3.5rem;left:-5.5rem;transform:rotate(-25deg);box-shadow:inset .2rem .1rem 0 .2rem #fff}.cow .head:before{z-index:2;top:-4rem;left:-5rem;transform:rotate(-5deg)}.cow .leg{transform-origin:top;background:#fff;width:1.5rem;height:3rem;position:absolute;top:95%}.cow .leg:after{content:"";background:#fff;border-bottom:1.5rem solid #000;width:100%;height:2.5rem;position:absolute;top:90%;left:0}.cow .leg.b{animation:legMoveB var(--anime-speed)alternate infinite;left:4%}.cow .leg.b.l{left:13%}.cow .leg.b.l:after{background:#fff;top:75%;left:10%;transform:rotate(-5deg)}.cow .leg.b.r{animation-delay:var(--anime-speed)}.cow .leg.b.r:after{background:#fff;top:90%;left:32%;transform:rotate(-15deg)}.cow .leg.f{animation:legMoveF var(--anime-speed)alternate infinite;right:5%}.cow .leg.f.l{animation-delay:var(--anime-speed);right:10%}.cow .leg.f.l:after{background:#fff;top:75%;left:auto;right:10%;transform:rotate(5deg)}.cow .leg.f.r:after{background:#fff;top:90%;left:auto;right:20%;transform:rotate(10deg)}.cow .tail{transform-origin:0 0;border-top:.5rem solid #fff;border-left:.5rem solid #fff;border-radius:100% 0% 51% 49%/42% 100% 0% 58%;width:2rem;height:10rem;animation:.75s infinite alternate tail;position:absolute;top:12%;right:98%}.cow .tail:after{content:"";background:#000;border-radius:70% 30% 100% 0%/100% 30% 70% 0%;width:1.5rem;height:1.75rem;position:absolute;top:100%;left:7%;transform:rotate(-60deg)}.well{background:#000;border-radius:50%;width:30rem;height:2rem;position:absolute;top:calc(40% + 19rem);left:60%}.well:before{content:"";z-index:110;border-radius:50%;width:100%;height:100%;position:absolute;top:0%;left:0;box-shadow:inset 0 -1.2rem .25rem #000}.well:after{content:"";background:var(--bg);z-index:100;width:100%;height:24rem;position:absolute;top:50%;left:0}.home-btn{color:#000;transform-origin:45rem 45rem;animation:btnAnim calc(var(--anime-speed)*20)linear;background:#ffd600;border-radius:1rem;padding:1.5rem 3rem;font-size:2.5rem;font-weight:700;text-decoration:none;transition:background .3s ease-in;display:inline-block;position:absolute;top:2rem;left:-190%}.home-btn:hover{background:#fbc02d}.text-box{color:#fff;text-align:center;animation:textAnim calc(var(--anime-speed)*18)linear;font-family:Cabin Sketch,serif;font-weight:700;position:absolute;top:28%;left:10%}.text-box h1{margin:0;font-size:19rem;line-height:18rem}.text-box p{width:42rem;margin:0;font-size:4rem;line-height:1}@keyframes btnAnim{0%,48%{transform:translate(-10rem)rotate(95deg)}55%,to{transform:translate(0)rotate(0)}}@keyframes textAnim{0%,60%{opacity:0;top:0%;transform:translateY(0)}70%,76%,85%{opacity:1;top:28%;transform:translateY(5%)}73%,79%{opacity:1;top:28%;transform:translateY(-15%)}to{top:28%;transform:translateY(0)}}@keyframes move{0%{left:0%;transform:translateY(0)rotate(0)}85%{left:38%;transform:translateY(0)rotate(0)}90%{left:40%;transform:translateY(0)rotate(5deg)}95%{left:38%;transform:translateY(0)rotate(90deg)}to{left:38%;transform:translateY(15rem)rotate(90deg)}}@keyframes jmb{0%,to{transform:translateY(0)}50%{transform:translateY(5px)}}@keyframes legMoveB{0%{transform:rotate(2deg)translateY(0%)}to{transform:rotate(-5deg)translateY(-5%)}}@keyframes legMoveF{0%{transform:rotate(0)translateY(0%)}to{transform:rotate(-15deg)translateY(-5%)}}@keyframes tail{0%{height:10rem;transform:rotate(3deg)}to{height:8rem;transform:rotate(-3deg)}}