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

:root {
  color-scheme: dark;

  --color-gainsboro: #d9d9d9;
  --color-black: #000;
  --color-bg: #0E0E10;
  --color-text: #F7FAFC;
  --color-white: #fff;
  --color-white-800: #f7fafc;
  --color-gray-dark: #0e0e10;
  --color-gray-100: #333;
  --color-gray-300: #828282;
  --color-gray-400: #bdbdbd;
  --color-gray-800: #1f1f24;
  --color-purple: #9B51E0;
  --color-purple-700: #9b51e0;
  --color-purple-800: #9C32FF;

  --gap-3xs: 0.63rem;
  --gap-11xl: 1.88rem;

  --padding-xl: 1.25rem;
  --padding-61xl: 5rem;

  /* Border radiuses */
  --br-8xs: 5px;
  --br-9xs: 4px;
  --br-11xs: 2px;


}