.display{background-color:var(--clr-bg);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:1rem}.display .wrapper{width:100%;min-height:5rem;display:flex;justify-content:space-between;align-items:center;gap:0;padding:0}@property --mx{syntax: "<length>"; inherits: true; initial-value: 100%;}@property --my{syntax: "<length>"; inherits: true; initial-value: 100%;}.display .hover-border{--borderWidth: 4px;position:relative;border-radius:16px}.display .hover-border:after{content:"";position:absolute;inset:calc(-1 * var(--borderWidth));height:calc(100% + var(--borderWidth) * 2);width:calc(100% + var(--borderWidth) * 2);background:radial-gradient(farthest-side at 100% 100%,var(--clr-opbg),var(--clr-accent));border-radius:16px;z-index:-1;transition:--mx .2s ease,--my .2s ease}.display .hover-border:hover:after{background:radial-gradient(farthest-side at var(--mx) var(--my),var(--clr-opbg),var(--clr-accent))}.display .text{animation:slide-in linear forwards;animation-timeline:view();animation-range:1rem;flex:0 0 60%;background-color:var(--clr-accent);border-radius:16px;padding:1rem;color:var(--clr-light)}.display .text a h2,.display .text a h2:hover{color:var(--clr-light)}.display .text p{max-width:60ch;pointer-events:none}.display .text p a{pointer-events:auto}.display .text strong,.display .text a{color:var(--clr-accent2);transition:color .2s}.display .wrapper .text a:hover{color:var(--clr-opbg)}.display .wrapper .geometry{flex:1;position:relative}@property --accent-strength{syntax: "<percentage>"; inherits: false; initial-value: 0%;}@property --color-angle{syntax: "<angle>"; inherits: true; initial-value: 45deg;}@property --tile-dim{syntax: "<length>"; inherits: true; initial-value: 10px}@property --thru-gap{syntax: "<length>"; inherits: true; initial-value: 2px}.display .wrapper .geometry a{--dim: 3rem;position:absolute;left:calc(50% - .5*var(--dim));bottom:calc(50% - .5*var(--dim));width:var(--dim);aspect-ratio:1 / 1}.display .wrapper .geometry .square{position:absolute;overflow:hidden;inset:0;width:100%;aspect-ratio:1 / 1;background-image:linear-gradient(var(--color-angle),var(--clr-accent) var(--accent-strength),var(--clr-accent3),var(--clr-opbg));transition:--accent-strength .5s,--color-angle 1s}.display .wrapper .geometry .square:after{content:"";position:absolute;left:-25%;bottom:-25%;height:150%;width:150%;pointer-events:none;background-image:repeating-linear-gradient(135deg,var(--clr-bg) 0px,var(--clr-bg) calc(var(--tile-dim) - var(--thru-gap)),transparent calc(var(--tile-dim) - var(--thru-gap)),transparent var(--tile-dim)),repeating-linear-gradient(45deg,var(--clr-bg) 0px,var(--clr-bg) calc(var(--tile-dim) - var(--thru-gap)),transparent calc(var(--tile-dim) - var(--thru-gap)),transparent var(--tile-dim));will-change:transform;animation:scrolling 2s linear infinite;transition:--color-angle 1s,--thru-gap 1s}.display .wrapper .geometry .square:hover{--accent-strength: 33%;--color-angle: 75deg;--thru-gap: 4px}.display .wrapper .geometry .icon{--dim: 3rem;pointer-events:none;color:var(--clr-accent);position:absolute;left:calc(50% - .5*var(--dim) + 1rem);bottom:calc(50% - .5*var(--dim) + .75rem);width:var(--dim);aspect-ratio:1 / 1}@keyframes scrolling{0%{transform:translate(0)}to{transform:translate(calc(var(--tile-dim) * cos(-45deg)),calc(var(--tile-dim) * sin(-45deg)))}}@media(min-width:300px){.display .wrapper .geometry a,.display .wrapper .geometry .icon{--dim: 5rem}}@media(min-width:475px){.display .wrapper .geometry a,.display .wrapper .geometry .icon{--dim: 8rem}}@media(min-width:640px){.display .wrapper .geometry a,.display .wrapper .geometry .icon{--dim: 8rem}.display .wrapper .geometry a{left:calc(50% - .5*var(--dim));bottom:calc(50% - .5*var(--dim))}}@media(min-width:1024px){.display{gap:2rem}.display .wrapper .geometry a,.display .wrapper .geometry .icon{--dim: 10rem}.display .wrapper .text{flex:0 0 52%}}