@layer normalize{html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}}*{box-sizing:border-box}body{align-items:center;background:#333;display:flex;font-family:Oswald,sans-serif;justify-content:center;margin:0;min-height:100vh;overflow:hidden;padding:0}:root{--size: 300;--color: rgba(197,239,247,.5);--puddle: rgba(197,239,247,.75);--cube: rgba(197,239,247,.25);--sign: #f62459}.header{position:absolute;top:50%;left:50%;display:grid;font-size:2rem;grid-gap:10px;grid-template-columns:auto auto;transform:translate(-100%,-200%) rotate(-25deg) translate(20%)}h1{margin:0;display:inline-block;color:var(--sign);z-index:3;filter:drop-shadow(0 0 5px var(--sign))}h1:nth-of-type(1){animation:blinkers 3s .8s infinite steps(1);filter:none;color:#efefef;opacity:.1}@keyframes blinkers{2%,4%,6%{color:var(--sign);filter:drop-shadow(0 0 5px var(--sign));opacity:1}0%,3%,5%,7%,to{color:#efefef;filter:none;opacity:.1}}.base{height:calc(var(--size) * 1px);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) rotateX(-30deg) rotateY(40deg) translate(-10%);transform-style:preserve-3d;width:calc(var(--size) * 1px)}input{cursor:pointer;height:500px;left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);width:500px;z-index:2}input:checked~.base .cube{transform:translate(-50%,-50%) rotateX(90deg) translateY(50%) rotateX(-90deg) translate3d(0,-50px,0) scaleY(0);transition:transform .5s ease}input:checked~.base .cube__side{box-shadow:none;background:none}input:checked~.base .surface .puddle{border-radius:100%;background:var(--color);transform:translate(-50%) scale(2.75);transition:background .1s ease,border-radius .5s ease,transform .5s ease}input:checked~.base .surface .edge__puddle{transform:translate(-50%)}input:checked~.base .surface .face{opacity:1;transition:opacity .2s .8s}input:checked~.base .droplet{animation-name:drop}input:checked~.header h1:nth-of-type(1){color:var(--sign);animation:none;filter:drop-shadow(0 0 5px var(--sign));opacity:1}.droplet{animation-delay:calc(var(--delay) * 1s);animation-duration:5s;animation-iteration-count:infinite;animation-timing-function:linear;background:var(--color);bottom:100%;border-radius:100%;height:10px;left:calc(var(--left) * 1%);position:absolute;width:10px}@keyframes drop{5%,to{opacity:0;transform:translateY(calc((var(--size) / 3) * 1px))}}.droplets{height:calc((var(--size) / 3) * 1px);left:0;overflow:hidden;position:absolute;top:100%;transform:rotateX(-90deg) translateY(calc((var(--size) / 6) * 1px));transform-origin:top;width:100%}.puddle{background:transparent;border-radius:0;height:calc((var(--size) / 3) * 1px);left:50%;position:absolute;top:50%;transform:translate(-50%) scale(1);transition:background .1s 1.3s,border-radius .5s .8s ease,transform .5s .8s ease;width:calc((var(--size) / 3) * 1px)}.surface{height:100%;left:0;overflow:hidden;position:absolute;top:0;transform:rotateX(90deg);transform-style:preserve-3d;width:100%}.surface--clone{overflow:visible}.edge{height:calc((var(--size) / 6) * 1px);left:0;overflow:hidden;position:absolute;top:100%;transform:rotateX(-90deg);transform-origin:top;width:100%}.edge__puddle{background:var(--puddle);height:200%;left:50%;opacity:.6;position:absolute;top:0;transform:translate(-50%,-100%);transition:transform .5s .3s ease;width:63%}.surface .face{opacity:0;transform:translate(-50%) scale(.5);transition:opacity .2s}.surface .mouth{-webkit-clip-path:none;border-radius:100%;clip-path:none}.face{height:35%;left:50%;position:absolute;top:20%;transform:translate(-50%);width:80%}.eye{animation:blink 10s infinite linear;background:#000;border-radius:100%;height:20px;position:absolute;top:0;width:20px}.eye:after,.eye:before{background:#fff;border-radius:100%;content:"";position:absolute}.eye:after{height:30%;left:20%;top:15%;width:30%}.eye:before{height:15%;left:25%;top:55%;width:15%}.eye:nth-of-type(1){left:0}.eye:nth-of-type(2){right:0}@keyframes blink{0%,73%,75%,to{transform:scaleY(1)}74%{transform:scaleY(.1)}}.mouth{-webkit-clip-path:circle(50% at 50% 0);background:#000;bottom:0;clip-path:circle(50% at 50% 0);height:20px;left:40%;position:absolute;width:20px}.cube{height:calc((var(--size) / 3) * 1px);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) rotateX(90deg) translateY(50%) rotateX(-90deg) translate3d(0,-50px,0) scaleY(1);transform-origin:bottom;transform-style:preserve-3d;transition:transform .5s .8s ease,opacity .1s .5s ease;width:calc((var(--size) / 3) * 1px)}.cube__face{height:100%;width:100%}.cube__side{background:var(--cube);border-radius:5px;box-shadow:inset 0 0 10px 5px var(--color);height:100%;left:0;opacity:1;position:absolute;top:0;transition:background .1s .5s,box-shadow .1s .5s;transform-style:preserve-3d;width:100%}.cube__side:nth-of-type(1){opacity:1;transform:translateZ(50px)}.cube__side:nth-of-type(2){transform:rotateX(90deg) translateZ(50px)}.cube__side:nth-of-type(3){transform:rotateX(180deg) translateZ(50px)}.cube__side:nth-of-type(4){background:transparent;transform:rotateX(270deg) translateZ(50px)}.cube__side:nth-of-type(5){transform:rotateY(90deg) translateZ(50px)}.cube__side:nth-of-type(6){transform:rotateY(-90deg) translateZ(50px)}