* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* -------------------------
   ROOT
-------------------------- */

:root {
  --bg-main: #020617;
  --bg-secondary: #0b1120;

  --cyan: #67e8f9;
  --purple: #c084fc;

  --text: #cbd5e1;
}

/* -------------------------
   HTML / BODY
-------------------------- */

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;

  background:
    radial-gradient(
      circle at top,
      rgba(103,232,249,0.06),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom,
      rgba(192,132,252,0.05),
      transparent 40%
    ),
    var(--bg-main);

  font-family: Inter, sans-serif;

  color: var(--text);

  user-select: none;

  -webkit-font-smoothing: antialiased;
}

/* -------------------------
   CANVAS
-------------------------- */

#neural-canvas {
  display: block;

  width: 100vw;
  height: 100vh;

  cursor: grab;
}

#neural-canvas:active {
  cursor: grabbing;
}