body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #000; 
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(45deg, #000000, #aa33ff); 
  z-index: -2;
}

body::before {
  content: "";
  position: fixed;
  top: -20%; 
  left: -20%;
  width: 140%; 
  height: 140%;
  --s: 30px; 
  --c1: #1a0d1b; 
  --c: #0000, var(--c1) .5deg 119.5deg, #0000 120deg;
  --g1: conic-gradient(from 60deg at 56.25% calc(425%/6), var(--c));
  --g2: conic-gradient(from 180deg at 43.75% calc(425%/6), var(--c));
  --g3: conic-gradient(from -60deg at 50% calc(175%/12), var(--c));
  background: var(--g1), var(--g1) var(--s) calc(1.73*var(--s)),
              var(--g2), var(--g2) var(--s) calc(1.73*var(--s)),
              var(--g3) var(--s) 0, var(--g3) 0 calc(1.73*var(--s));
  background-size: calc(2*var(--s)) calc(3.46*var(--s));
  will-change: transform;
  animation: movePattern 30s linear infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes hueShift {
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(120deg); }
}

@keyframes movePattern {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-4 * var(--s)), calc(-6.92 * var(--s)), 0); }
}