/* ============================================
   VARIABLES & RESET
   ============================================ */

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

:root {
  /* Colors */
  --cl: #d4d4d8;
  --cm: #a1a1aa;
  --cd: #71717a;
  --bk: #0a0a0a;
  --bs: #111;
  --bc: #1a1a1a;
  --bh: #222;
  --wh: #fafafa;

  /* Gradients */
  --cg: linear-gradient(135deg, #71717a 0%, #d4d4d8 25%, #a1a1aa 50%, #e4e4e7 75%, #71717a 100%);
  --ct: linear-gradient(135deg, #a1a1aa, #e4e4e7, #a1a1aa, #d4d4d8);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bk);
  color: var(--wh);
  font-family: 'Outfit', sans-serif;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--cm);
  color: var(--bk);
}