:root{font-family:Michroma,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;overflow:hidden}#canvas-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}#ui{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;pointer-events:none;width:100%}h1.glitch{font-size:4rem;font-weight:900;margin:0;letter-spacing:.2em;position:relative;text-transform:uppercase;color:#fff}@media(max-width:600px){h1.glitch{font-size:2rem}.sub-glitch{font-size:1.2rem}}.sub-glitch{font-size:2rem;font-weight:200;margin:0;letter-spacing:.1em;position:relative;color:#aaa}.glitch:before,.glitch:after,.sub-glitch:before,.sub-glitch:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%}.glitch:before,.sub-glitch:before{left:2px;text-shadow:-1px 0 red;clip:rect(44px,450px,56px,0);animation:glitch-anim-1 5s infinite linear alternate-reverse}.glitch:after,.sub-glitch:after{left:-2px;text-shadow:-1px 0 blue;clip:rect(44px,450px,56px,0);animation:glitch-anim-2 5s infinite linear alternate-reverse}@keyframes glitch-anim-1{0%{clip:rect(20px,9999px,80px,0)}20%{clip:rect(60px,9999px,10px,0)}40%{clip:rect(40px,9999px,90px,0)}60%{clip:rect(90px,9999px,10px,0)}80%{clip:rect(10px,9999px,50px,0)}to{clip:rect(70px,9999px,30px,0)}}@keyframes glitch-anim-2{0%{clip:rect(90px,9999px,10px,0)}20%{clip:rect(10px,9999px,50px,0)}40%{clip:rect(60px,9999px,20px,0)}60%{clip:rect(20px,9999px,80px,0)}80%{clip:rect(80px,9999px,10px,0)}to{clip:rect(50px,9999px,40px,0)}}