@font-face{font-family:Buy More;src:url(/fonts/BuyMore.ttf) format("truetype");font-weight:400;font-style:normal}:root{--red-rgb: 248 113 113;--blue-rgb: 56 189 248;--green-rgb: 74 222 128;--yellow-rgb: 253 224 71;--background-rgb: 0 0 0}body{height:100vh;width:100%;display:flex;align-items:center;justify-content:center;background:rgb(var(--background-rgb));overflow:hidden;perspective:2000px;font-family:Bad Coma,sans-serif}*{box-sizing:border-box;margin:0;padding:0}#hitbox-container{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:5}#container{width:500rem;aspect-ratio:1;display:grid;grid-template-rows:repeat(80,1fr);grid-template-columns:repeat(80,1fr);position:absolute;z-index:2;opacity:1;transform:translate(calc(-50% + var(--x, 0px)),calc(-50% + var(--y, 0px))) skew(-48deg) skewY(14deg) scaleX(2) scale(.2) rotate(var(--rotate, 0deg));--x: 0px;--y: 0px;--rotate: 0deg}#container:before,#container:after{content:"";position:absolute;inset:0;pointer-events:none}#container:before{z-index:3;background-image:url(https://assets.codepen.io/1468070/plus-pattern-center.png);background-size:5%;background-repeat:repeat;opacity:.25}#container:after{z-index:4;background:radial-gradient(circle,transparent 25%,rgb(var(--background-rgb)) 100%)}.tile{border:1px solid rgba(240,234,234,.15);transition:background-color 1.5s}.tile.active{transition-duration:0ms}.tile:nth-child(4n).active{background-color:rgb(var(--red-rgb))}.tile:nth-child(4n+1).active{background-color:rgb(var(--blue-rgb))}.tile:nth-child(4n+2).active{background-color:rgb(var(--green-rgb))}.tile:nth-child(4n+3).active{background-color:rgb(var(--yellow-rgb))}.tile:nth-child(7n).active{background-color:rgb(var(--blue-rgb))}.tile:nth-child(7n+3).active{background-color:rgb(var(--green-rgb))}.tile:nth-child(7n+5).active{background-color:rgb(var(--yellow-rgb))}.tile:nth-child(7n+6).active{background-color:rgb(var(--red-rgb))}.tile:nth-child(11n+1).active{background-color:rgb(var(--red-rgb))}.tile:nth-child(11n+4).active{background-color:rgb(var(--blue-rgb))}.tile:nth-child(11n+7).active{background-color:rgb(var(--green-rgb))}.tile:nth-child(11n+10).active{background-color:rgb(var(--yellow-rgb))}.skew-container{position:fixed;top:50%;left:50%;z-index:10;pointer-events:none;transform:translate(calc(-50% + var(--x, 0px)),calc(-50% + var(--y, 0px))) skew(-48deg) skewY(14deg) scaleX(2) scale(.2) rotate(var(--rotate, 0deg));transform-origin:center center}.zigzag-text{display:flex;gap:.25em;font-family:Buy More,sans-serif;font-size:clamp(18rem,30vw,30rem);color:#fff;justify-content:center;align-items:center}.zigzag-letter{display:inline-block;transition:transform .3s ease}.zigzag-letter.up{transform:translateY(-80px)}.zigzag-letter.down{transform:translateY(80px)}.zigzag-letter:hover{transform:scale(1.1)}.video-wrapper{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:all}.video-wrapper.flume{transform:translate(-1000px,-40px)}.video-wrapper.stripes{transform:translate(800px,40px)}.hover-video{width:clamp(300px,50vw,700px);height:auto;border-radius:12px;box-shadow:0 0 20px #fff3;pointer-events:none}.video-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) skew(-8deg);color:#fff;font-family:Bad Coma,sans-serif;font-size:4rem;opacity:1;pointer-events:none;text-shadow:0 0 8px rgba(255,255,255,.7);-webkit-user-select:none;user-select:none;display:flex;gap:.1em}.label-letter{opacity:0;transform:translateY(10px);display:inline-block}.video-wrapper:hover .label-letter{animation:fadeInLetter .5s ease forwards}@keyframes fadeInLetter{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media screen and (max-width: 1024px){body{overflow-x:hidden;perspective:1500px}.skew-container{transform:translate(-50%,-50%) skew(-48deg) skewY(14deg) scaleX(2) scale(.2);padding:1rem;perspective:inherit;transform-origin:center}.video-wrapper{transform:none!important;flex-direction:column;margin:2rem 0;perspective:inherit}.hover-video{width:90vw;max-width:100%;transform:perspective(1000px)}.video-label{font-size:6vw;transform:translate(-50%,-50%) skew(-8deg)}#container{transform:translate(calc(-50% + var(--x, 0px)),calc(-50% + var(--y, 0px))) skew(-48deg) skewY(14deg) scaleX(2) scale(.2) rotate(var(--rotate, 0deg));width:500rem}.zigzag-text{font-size:clamp(6rem,20vw,12rem)}.zigzag-letter.up{transform:translateY(-40px)}.zigzag-letter.down{transform:translateY(40px)}}