@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{background:#111;display:flex;min-height:100vh;align-items:center;justify-content:center}.trick-or-treat{border-radius:100px;overflow:hidden;height:100px;position:relative;width:200px;border:6px solid #eee}@media(min-width:768px){.trick-or-treat{border:10px solid #eee;height:200px;width:400px}}.trick-or-treat input{cursor:pointer;height:100%;width:100%;opacity:0;left:0;top:0;position:absolute;z-index:2}.trick-or-treat input:checked~.trick-or-treat__toggle{transform:translate(100%)}.trick-or-treat input:checked~.trick-or-treat__toggle .toggle__body{clip-path:polygon(-100% -100%,-100% -100%,-100% 200%,-100% 200%,-100% 200%,200% 200%,200% 200%,200% 200%,200% -100%,200% -100%);-webkit-clip-path:polygon(-100% -100%,-100% -100%,-100% 200%,-100% 200%,-100% 200%,200% 200%,200% 200%,200% 200%,200% -100%,200% -100%);transform:translate(-50%,-50%) rotate(585deg) scale(.5,.4);background:#f62459;border-radius:50%/45%;transition:transform .35s,clip-path .35s,background .35s,border-radius .35s}.trick-or-treat input:checked~.trick-or-treat__toggle .toggle__eye,.trick-or-treat input:checked~.trick-or-treat__toggle .toggle__eye:after,.trick-or-treat input:checked~.trick-or-treat__toggle .toggle__nose,.trick-or-treat input:checked~.trick-or-treat__toggle .toggle__mouth,.trick-or-treat input:checked~.trick-or-treat__toggle .toggle__mouth:after,.trick-or-treat input:checked~.trick-or-treat__toggle .toggle__mouth:before{background:#f62459}.trick-or-treat input:checked~.trick-or-treat__toggle .toggle__wrapper-shine{opacity:1}.trick-or-treat input:checked~.trick-or-treat__backdrop{background:#1e90ff}.trick-or-treat input:checked~.trick-or-treat__backdrop .eyes:after,.trick-or-treat input:checked~.trick-or-treat__backdrop .eyes:before{background:#1e90ff}.trick-or-treat input:checked~.trick-or-treat__backdrop .spot{animation-name:scale;background:#fff}.trick-or-treat__backdrop{background:#3a0e9d;height:100%;position:absolute;width:100%;transition:background .35s}.trick-or-treat__toggle{height:100%;left:0;position:absolute;width:50%;transition:transform .35s}.toggle__body{position:absolute;height:75%;width:75%;background:#f0e2c8;border-radius:100%;top:50%;left:50%;transition:border-radius .35s,background .35s,clip-path .35s,transform .35s;transform:translate(-50%,-50%) rotate(0) scale(1);clip-path:polygon(0 0,0 60%,12.5% 70%,25% 70%,25% 100%,75% 100%,75% 70%,87.5% 70%,100% 60%,100% 0)}.toggle__eye{height:20%;width:20%;background:#000;position:absolute;border-radius:50%;top:40%;left:50%;transition:background .35s}.toggle__eye:after{content:"";position:absolute;height:5px;width:5px;background:orange;border-radius:100%;transform:translate(-50%,-50%);transition:background .35s}@media(min-width:768px){.toggle__eye:after{height:10px;width:10px}}.toggle__eye--left{height:40%;width:30%;transform:translate(-50%,-50%) translate(-65%)}.toggle__eye--left:after{bottom:15%;left:65%}.toggle__eye--right{height:30%;width:25%;transform:translate(-50%,-50%) translate(60%)}.toggle__eye--right:after{bottom:10%;left:45%}.toggle__nose{height:10%;width:10%;background:#000;position:absolute;top:60%;left:50%;transform:translate(-50%,-50%);transition:background .35s;clip-path:polygon(0 100%,50% 0,100% 100%);-webkit-clip-path:polygon(0 100%,50% 0,100% 100%)}.toggle__mouth{width:35%;background:#000;height:5%;border-radius:4px;position:absolute;bottom:15%;left:50%;transform:translate(-50%,-50%);transition:background .35s}.toggle__mouth:after,.toggle__mouth:before{content:"";position:absolute;width:35%;height:100%;border-radius:4px;background:#000;top:50%;transform:translate(-50%,-50%) rotate(90deg);transition:background .35s}.toggle__mouth:after{left:30%}.toggle__mouth:before{left:70%}.toggle__wrapper{position:absolute;top:50%;background:#f0e2c8;width:50%;height:120%;transform:translateY(-50%);clip-path:polygon(0 45%,100% 0,55% 35%,100% 50%,55% 65%,100% 100%,0 55%)}.toggle__wrapper--right{left:100%}.toggle__wrapper--left{right:100%;transform:translateY(-50%) rotate(180deg)}.toggle__wrapper-shine{height:100%;width:100%;position:absolute;opacity:0;border-radius:50%/45%;overflow:hidden;transition:opacity .35s}.toggle__wrapper-shine:after,.toggle__wrapper-shine:before{border-radius:50%;content:"";position:absolute;height:100%;width:100%;bottom:6%;right:2%}.toggle__wrapper-shine:before{background:#fff}.toggle__wrapper-shine:after{background:#f62459;bottom:10%;right:2%;height:110%;width:110%}.eyes{height:6px;width:6px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scaleY(1);transform-origin:center;animation:blink 4s infinite linear}@media(min-width:768px){.eyes{height:10px;width:10px}}.eyes:nth-of-type(1){top:15%;left:65%;opacity:.1;animation-delay:1s}.eyes:nth-of-type(2){top:80%;left:60%;opacity:.4;animation-delay:3s}.eyes:nth-of-type(3){top:60%;left:85%;opacity:.25;animation-delay:2s}.eyes:after,.eyes:before{content:"";background:#f0e2c8;border-radius:100% 0;position:absolute;height:100%;width:100%;opacity:.8;top:50%;left:50%;transition:background .35s}.eyes:after{transform:translate(-50%,-50%) translate(90%) rotate(45deg)}.eyes:before{transform:translate(-50%,-50%) translate(-90%) rotate(45deg)}.spot{height:50px;width:50px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);transform-origin:center;background:#3a0e9d;border-radius:100%;animation-duration:4s;animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:both}.spot:nth-of-type(4){top:15%;left:35%;opacity:.1;animation-delay:1s}.spot:nth-of-type(5){top:80%;left:40%;opacity:.4;animation-delay:3s}.spot:nth-of-type(6){top:60%;left:15%;opacity:.25;animation-delay:2s}@keyframes blink{9%{transform:translate(-50%,-50%) scaleY(1)}10%{transform:translate(-50%,-50%) scaleY(0)}11%{transform:translate(-50%,-50%) scaleY(1)}12%{transform:translate(-50%,-50%) scaleY(0)}13%{transform:translate(-50%,-50%) scaleY(1)}}@keyframes scale{0%{transform:translate(-50%,-50%) scale(0)}to{opacity:0;transform:translate(-50%,-50%) scale(1)}}