/* pattern4.css - Fourth background style */

/* Light Mode Variables */
:root {
  --s: 150px; /* control the size */
  --c1: #f9f9f9;
  --c2: #eeeeee;
  --c3: #f4f4f4;
}

/* Dark Mode Variables */
html.dark {
  --c1: #0e0e0e;
  --c2: #181818;
  --c3: #141414;
}

/* Solid background for overscroll areas */
html {
  background-color: var(
    --c1
  );
}

/* Fixed background applied to pseudo-element */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;

  --_l: #0000 calc(25% / 3), var(--c1) 0 25%, #0000 0;
  --_g: conic-gradient(from 120deg at 50% 87.5%, var(--c1) 120deg, #0000 0);

  background: var(--_g), var(--_g) 0 calc(var(--s) / 2),
    conic-gradient(from 180deg at 75%, var(--c2) 60deg, #0000 0),
    conic-gradient(from 60deg at 75% 75%, var(--c1) 0 60deg, #0000 0),
    linear-gradient(150deg, var(--_l)) 0 calc(var(--s) / 2),
    conic-gradient(
      at 25% 25%,
      #0000 50%,
      var(--c2) 0 240deg,
      var(--c1) 0 300deg,
      var(--c2) 0
    ),
    linear-gradient(-150deg, var(--_l)) var(--c3);
  background-size: calc(0.866 * var(--s)) var(--s);
  background-attachment: fixed;
}