@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  font-family: 'Lato', sans-serif;
}

*::selection {
  @apply bg-violet-500 text-white; 
}

.pattern-1 {
  width: 100%;
  height: 100%;
  --s: 222px;
  --c1: #e4e4e7;
  --c2: #f4f4f5;
  --c3: #fafafa;

  --_g: var(--c1) 10%, var(--c2) 10.5% 19%, #0000 19.5% 80.5%,
    var(--c2) 81% 89.5%, var(--c3) 90%;
  --_c: from -90deg at 37.5% 50%, #0000 75%;
  --_l1: linear-gradient(145deg, var(--_g));
  --_l2: linear-gradient(35deg, var(--_g));
  background: var(--_l1), var(--_l1) calc(var(--s) / 2) var(--s), var(--_l2),
    var(--_l2) calc(var(--s) / 2) var(--s),
    conic-gradient(var(--_c), var(--c1) 0) calc(var(--s) / 8) 0,
    conic-gradient(var(--_c), var(--c3) 0) calc(var(--s) / 2) 0,
    linear-gradient(
      90deg,
      var(--c3) 38%,
      var(--c1) 0 50%,
      var(--c3) 0 62%,
      var(--c1) 0
    );
  background-size: var(--s) calc(2 * var(--s) / 3);
}

.dark .pattern-1 {
  width: 100%;
  height: 100%;
  --s: 82px;
  --c1: #09090b;
  --c2: #18181b;
  --c3: #27272a;

  --_g: var(--c3) 0 120deg, #0000 0;
  background: conic-gradient(from -60deg at 50% calc(100% / 3), var(--_g)),
    conic-gradient(from 120deg at 50% calc(200% / 3), var(--_g)),
    conic-gradient(
      from 60deg at calc(200% / 3),
      var(--c3) 60deg,
      var(--c2) 0 120deg,
      #0000 0
    ),
    conic-gradient(from 180deg at calc(100% / 3), var(--c1) 60deg, var(--_g)),
    linear-gradient(
      90deg,
      var(--c1) calc(100% / 6),
      var(--c2) 0 50%,
      var(--c1) 0 calc(500% / 6),
      var(--c2) 0
    );
  background-size: calc(1.732 * var(--s)) var(--s);
}