*{box-sizing:border-box}body{align-items:center;background:#2c3e50;display:flex;justify-content:center;min-height:100vh}:root{--b: #22a7f0;--c: rgba(255,255,255,.3);--g: #2ecc71;--s: 100}.earth{background:var(--b);border-radius:calc(var(--s) * .5px);cursor:pointer;height:calc(var(--s) * 1px);overflow:hidden;position:relative;width:calc(var(--s) * 1px)}.earth__face{--size: calc((var(--s) * .1) * 1px);height:20%;left:50%;position:absolute;top:50%;transform:translate(-50%,-75%);width:45%}.earth__face--straining:after{background:#fff;border-radius:0 100% 100%;content:"";height:var(--size);left:85%;opacity:.65;position:absolute;top:-65%;transform:rotate(45deg);width:var(--size)}.earth__eye{background:#000;border-radius:100%;height:var(--size);position:absolute;top:0;width:var(--size)}.earth__eye--blinking{animation:blink 10s infinite linear}.earth__eye:after,.earth__eye:before{background:#fff;border-radius:100%;content:"";position:absolute}.earth__eye:after{height:30%;left:20%;top:15%;width:30%}.earth__eye:before{height:15%;left:25%;top:55%;width:15%}.earth__eye:nth-of-type(1){left:0}.earth__eye:nth-of-type(2){right:0}.earth__eye--straining{background:transparent}.earth__eye--straining:nth-of-type(2){transform:rotate(180deg)}.earth__eye--straining:after,.earth__eye--straining:before{background:#000;border-radius:0;height:calc((var(--s) * .025) * 1px);left:50%;position:absolute;top:50%;transform-origin:right;width:var(--size)}.earth__eye--straining:after{transform:translate(-50%,-50%) rotate(20deg)}.earth__eye--straining:before{transform:translate(-50%,-50%) rotate(-20deg)}.earth__eye--spinning{background:transparent}.earth__eye--spinning:after,.earth__eye--spinning:before{background:#000;border-radius:0;height:calc((var(--s) * .025) * 1px);left:50%;position:absolute;top:50%;transform-origin:center;width:var(--size)}.earth__eye--spinning:after{transform:translate(-50%,-50%) rotate(45deg)}.earth__eye--spinning:before{transform:translate(-50%,-50%) rotate(-45deg)}@keyframes blink{0%,73%,75%,to{transform:scaleY(1)}74%{transform:scaleY(.1)}}.earth__mouth{-webkit-clip-path:circle(50% at 50% 0);background:#000;bottom:0;clip-path:circle(50% at 50% 0);height:var(--size);left:40%;position:absolute;width:var(--size)}.earth__mouth--extended,.earth__mouth--dizzy{clip-path:circle(50% at 50%)}.earth__mouth--straining{-webkit-clip-path:polygon(0 0,100% 0,100% 15%,0 15%);border-radius:0;clip-path:polygon(0 0,100% 0,100% 15%,0 15%)}.earth__map{--starter: calc(var(--s) * .05);background:var(--g);border-radius:calc(var(--starter) * 1px);cursor:pointer;height:calc(var(--starter) * 1px);left:50%;margin:calc(var(--starter) * -1px) 0 0 calc(var(--starter) * -1px);position:absolute;top:30%;width:calc(var(--starter) * 1px);box-shadow:calc(var(--s) * -1px) 0 0 calc((var(--s) * .2) * 1px) var(--g),calc((var(--s) * .825) * -1px) 0 0 calc((var(--s) * .175) * 1px) var(--g),calc((var(--s) * .75) * -1px) calc((var(--s) * .4) * 1px) 0 calc((var(--s) * .15) * 1px) var(--g),calc((var(--s) * .15) * 1px) 0 0 calc((var(--s) * .075) * 1px) var(--g),calc((var(--s) * .075) * 1px) calc((var(--s) * .3) * 1px) 0 calc((var(--s) * .125) * 1px) var(--g),calc((var(--s) * .6) * 1px) calc((var(--s) * .15) * 1px) 0 calc((var(--s) * .25) * 1px) var(--g),calc((var(--s) * 1.1) * 1px) calc((var(--s) * .4) * 1px) 0 calc((var(--s) * .2) * 1px) var(--g),calc((var(--s) * 2) * 1px) 0 0 calc((var(--s) * .2) * 1px) var(--g),calc((var(--s) * 2.175) * 1px) 0 0 calc((var(--s) * .175) * 1px) var(--g),calc((var(--s) * 2.25) * 1px) calc((var(--s) * .4) * 1px) 0 calc((var(--s) * .15) * 1px) var(--g),calc((var(--s) * 3) * 1px) 0 0 0 var(--g),calc((var(--s) * 3.15) * 1px) 0 0 calc((var(--s) * .075) * 1px) var(--g),calc((var(--s) * 3.075) * 1px) calc((var(--s) * .3) * 1px) 0 calc((var(--s) * .125) * 1px) var(--g),calc((var(--s) * 3.6) * 1px) calc((var(--s) * .15) * 1px) 0 calc((var(--s) * .25) * 1px) var(--g),calc((var(--s) * 4.1) * 1px) calc((var(--s) * .4) * 1px) 0 calc((var(--s) * .2) * 1px) var(--g)}.earth__clouds{--starter: calc(var(--s) * .05);animation:rotate 60s infinite linear;background:var(--c);border-radius:100%;height:calc(var(--starter) * 2px);left:50%;margin:calc(var(--starter) * -1px) 0 0 calc(var(--starter) * -1px);position:absolute;top:60%;transform:translate(-50%,-50%,0);width:calc(var(--starter) * 4px);box-shadow:calc((var(--s) * 1) * -1px) calc((var(--s) * .1) * -1px) 0 calc((var(--s) * .05) * 1px) var(--c),calc((var(--s) * .5) * -1px) calc((var(--s) * .05) * 1px) 0 calc((var(--s) * .15) * 1px) var(--c),calc((var(--s) * .6) * -1px) calc((var(--s) * .425) * -1px) 0 calc((var(--s) * .1) * 1px) var(--c),calc((var(--s) * .05) * 1px) calc((var(--s) * .375) * -1px) 0 calc((var(--s) * .2) * 1px) var(--c),calc((var(--s) * .7) * 1px) calc((var(--s) * .15) * -1px) 0 calc((var(--s) * .15) * 1px) var(--c),calc((var(--s) * 1.1) * 1px) calc((var(--s) * .4) * -1px) 0 calc((var(--s) * .1) * 1px) var(--c),calc((var(--s) * .3) * 1px) calc((var(--s) * .1) * 1px) 0 calc((var(--s) * .05) * 1px) var(--c),calc((var(--s) * 1.2) * -1px) calc((var(--s) * .4) * -1px) 0 calc((var(--s) * .1) * 1px) var(--c),calc((var(--s) * 1.25) * -1px) calc((var(--s) * .2) * 1px) 0 calc((var(--s) * .125) * 1px) var(--c),calc((var(--s) * 1.1) * 1px) calc((var(--s) * .15) * 1px) 0 calc((var(--s) * .15) * 1px) var(--c),0 0 0 calc((var(--s) * .025) * 1px) var(--c),calc((var(--s) * 3) * 1px) 0 0 calc((var(--s) * .025) * 1px) var(--c),calc((var(--s) * 2) * 1px) calc((var(--s) * .1) * -1px) 0 calc((var(--s) * .05) * 1px) var(--c),calc((var(--s) * 2.5) * 1px) calc((var(--s) * .05) * 1px) 0 calc((var(--s) * .15) * 1px) var(--c),calc((var(--s) * 2.4) * 1px) calc((var(--s) * .425) * -1px) 0 calc((var(--s) * .1) * 1px) var(--c),calc((var(--s) * 3.05) * 1px) calc((var(--s) * .375) * -1px) 0 calc((var(--s) * .2) * 1px) var(--c),calc((var(--s) * 3.7) * 1px) calc((var(--s) * .15) * -1px) 0 calc((var(--s) * .15) * 1px) var(--c),calc((var(--s) * 4.1) * 1px) calc((var(--s) * .4) * -1px) 0 calc((var(--s) * .1) * 1px) var(--c),calc((var(--s) * 3.3) * 1px) calc((var(--s) * .1) * 1px) 0 calc((var(--s) * .05) * 1px) var(--c),calc((var(--s) * 1.8) * 1px) calc((var(--s) * .4) * -1px) 0 calc((var(--s) * .1) * 1px) var(--c),calc((var(--s) * 1.75) * 1px) calc((var(--s) * .2) * 1px) 0 calc((var(--s) * .125) * 1px) var(--c),calc((var(--s) * 4.1) * 1px) calc((var(--s) * .15) * 1px) 0 calc((var(--s) * .15) * 1px) var(--c)}@media(min-width:768px){.earth{--s: 200}}@keyframes rotate{to{transform:translate(calc(var(--s) * -3px))}}