.animated-header{--grid-height:max(10vmin,4px);--grid-width:max(10vmin,4px);--line-colour:#9ca3af;--point-gap-width:calc(3*var(--grid-width));--point-gap-height:calc(3*var(--grid-height));background-image:linear-gradient(124deg,#f97316,#f59e0b,#84cc16,#10b981,#14b8a6,#6366f1,#d946ef,#f43f5e);background-size:1600% 1600%;background-position-x:calc(var(--progress)*-1%);transition:background-position-x 1s linear;transform:skewY(-3deg)}@media only screen and (max-width:640px){.animated-header{--grid-height:max(20vmin,4px);--grid-width:max(20vmin,4px)}}.animated-header:before,.animated-header:after{content:"";mix-blend-mode:overlay;position:absolute;inset:0;transform:skewY(3deg)}.animated-header:before{background-image:linear-gradient(var(--line-colour),transparent 2px),linear-gradient(90deg,var(--line-colour),transparent 2px);background-size:100% var(--grid-height),var(--grid-width)100%;animation:8s linear infinite move}@keyframes move{0%{background-position:calc(var(--point-gap-width)/-2)calc(var(--point-gap-height)/-2)}to{background-position:calc(var(--point-gap-width)/2)calc(var(--point-gap-height)/2)}}