body{position:relative}main{overflow:hidden;background:var(--black);display:flex;align-items:center;justify-content:center;position:relative;user-select:none;-moz-user-select:none;-webkit-user-select:none}canvas{position:absolute;margin:0}main ul{padding:0;font-size:4vw;margin:3em 0 0;white-space:nowrap;position:relative;list-style:none}@keyframes rainbow{0%,100%{transform:translatey( 0)}50%{transform:translatey(-2em)}}main li{display:block;text-shadow:-1px -1px 0 var(--black),1px -1px 0 var(--black),-1px 1px 0 var(--black),1px 1px 0 var(--black),4px 4px 0 rgba(0,0,0,.2);animation:rainbow 1.5s ease-in-out infinite}main li:nth-child(1){animation-delay:calc(7/10 * 1s);color:#debf40;left:12px}main li:nth-child(2){animation-delay:calc(6/10 * 1s);color:#5acb3c;left:10px}main li:nth-child(3){animation-delay:calc(5/10 * 1s);color:#44a3f7;left:8px}main li:nth-child(4){animation-delay:calc(4/10 * 1s);color:#cf52eb;left:6px}main li:nth-child(5){animation-delay:calc(3/10 * 1s);color:#d14b3d;left:4px}main li:nth-child(6){animation-delay:calc(2/10 * 1s);color:#d49c3d;left:2px}main li:nth-child(7){animation-delay:calc(1/10 * 1s);color:#fff}main li:not(:last-child){position:absolute}main button{position:absolute;top:1em;right:1em;width:3em;height:3em;margin:0;border:none;cursor:pointer;border-radius:10%}main button:active{transform:scale(.95)}main button:active::before{transform:scale(1.1)}@keyframes glowing{0%{background-position:0 0}100%{background-position:400% 0}}main button::before{content:'';background:linear-gradient(45deg,#ff0000,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,#ff0000);background-size:400%;border-radius:10%;filter:blur(5px);position:absolute;top:-2px;left:-2px;width:calc(100% + 4px);height:calc(100% + 4px);animation:glowing 10s linear infinite;transition:opacity .3s ease-in-out}main button::after{content:'';background:var(--dark);border-radius:10%;width:3em;height:3em;display:block;position:absolute;top:0;right:0}#bar1,#bar2{position:absolute;display:block;width:.25em;height:2em;border-radius:.125em;background-color:#fff;transform-origin:center;transition:transform .2s ease-in-out;z-index:1}#bar1{transform:translate(1.4em,-1.5em)rotate( -55deg)}#bar2{transform:translate(1.4em,-1.5em)rotate(-125deg)}.pause #bar1{transform:translate(.8em,-1em)rotate( 0)}.pause #bar2{transform:translate(1.9em,-2em)rotate( 0)}p{display:block;max-width:47em;margin:2em;color:var(--white)}@media print{main::before{position:absolute;top:0;right:0}main{height:100dvh}}