{"code":{"html":"\n","css":":root {\n --stroke: #0A1C20;\n --text: #FEDC0C;\n --bg: #6FBFD9;\n --duration: 550ms;\n --easing: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\nhtml, body {\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\nbody {\n background-image: radial-gradient(rgba(0, 0, 0, 0.1) 20%, transparent 20%), radial-gradient(rgba(0, 0, 0, 0.1) 20%, transparent 20%);\n background-color: var(--bg);\n background-position: 0 0, 20px 20px;\n background-size: 40px 40px;\n}\n\n.content {\n position: absolute;\n top: 10%;\n left: 50%;\n -webkit-transform: translate(-90px, -50%);\n transform: translate(-90px, -50%);\n}\n\nh1,\nh2 {\n position: relative;\n margin: 0;\n color: var(--text);\n -webkit-text-stroke-color: var(--stroke);\n text-align: center;\n font-family: 'Luckiest Guy', cursive;\n line-height: 1;\n white-space: nowrap;\n -webkit-text-stroke-width: 0px;\n}\n\nh1 span {\n position: absolute;\n left: 0;\n top: 0;\n display: inline-block;\n margin-top: 60px;\n opacity: 0;\n font-size: 0px;\n height: 1000px;\n transition: all calc( var(--duration) * 0.7 ) var(--easing) 300ms;\n -webkit-transform-origin: bottom center;\n transform-origin: bottom center;\n -webkit-text-stroke-width: 4px;\n}\nh1 span.animate-in {\n margin-top: 0px;\n opacity: 1;\n font-size: 160px;\n}\nh1 span.animate-in.capital {\n font-size: 200px;\n}\nh1 span:nth-child(1) {\n z-index: 8;\n -webkit-transform: rotate(-19deg);\n transform: rotate(-19deg);\n}\nh1 span:nth-child(2) {\n z-index: 7;\n -webkit-transform: rotate(-13deg);\n transform: rotate(-13deg);\n}\nh1 span:nth-child(3) {\n z-index: 6;\n -webkit-transform: rotate(-8deg);\n transform: rotate(-8deg);\n}\nh1 span:nth-child(4) {\n z-index: 5;\n -webkit-transform: rotate(-3deg);\n transform: rotate(-3deg);\n}\nh1 span:nth-child(5) {\n z-index: 4;\n -webkit-transform: rotate(2deg);\n transform: rotate(2deg);\n}\nh1 span:nth-child(6) {\n z-index: 3;\n -webkit-transform: rotate(13deg);\n transform: rotate(13deg);\n}\nh1 span:nth-child(7) {\n -webkit-text-stroke-width: 8px;\n -webkit-transform: rotate(20deg);\n transform: rotate(20deg);\n z-index: 2;\n}\nh1 span:nth-child(8) {\n z-index: 1;\n -webkit-transform: rotate(23deg);\n transform: rotate(23deg);\n}\n\nh2 {\n position: absolute;\n top: 160px;\n left: 50%;\n font-size: 50px;\n letter-spacing: -4px;\n -webkit-transform: translateX(-120px);\n transform: translateX(-120px);\n -webkit-text-stroke-width: 2px;\n}\nh2 span {\n display: inline-block;\n opacity: 0;\n transition: all var(--duration) ease 750ms;\n -webkit-transform: translateX(5px);\n transform: translateX(5px);\n}\nh2 span.animate-in {\n opacity: 1;\n -webkit-transform: translateX(0px);\n transform: translateX(0px);\n}\nh2 span.capital {\n margin-left: 10px;\n font-size: 65px;\n}","js":"var spans = document.getElementsByTagName('span')\n\nfunction doSetTimeout(i) {\n setTimeout(function(){ \n\t\tspans[i].classList += ' animate-in'\n\t}, 120 * i)\n}\n\nwindow.addEventListener('load', function() {\n for (var i = 0; i < spans.length; i++) {\n\t\tdoSetTimeout(i)\n\t}\n})"},"options":{"activeKey":"player","hide":{"html":false,"css":false,"js":false},"name":{"html":"HTML","css":"CSS","js":"JavaScript"},"layout":"top","profile":{"html":"","css":"type=\"text/css\"","js":""},"mode":{"html":"htmlmixed","css":"css","js":"javascript"}}}