:root {
  /* colors */
  --color-primary: #1878f5;
  --color-primary-light: #dbeaff;
  --color-primary-dark: #006eb6;
  --color-primary-darker: #004f84;
  --color-primary-superdark: #26334d;

  --color-secondary: #f50a8f;
  --color-secondary-light: #ffe5f6;
  --color-secondary-dark: #df0380;

  /* body background */
  --body-bg-color: var(--color-gray);
  --body-bg-image: radial-gradient(
      40vw 40vw at top left,
      var(--color-secondary-light),
      transparent 70%
    ),
    radial-gradient(
      40vw 40vw at top right,
      var(--color-primary-light),
      transparent 70%
    ),
    radial-gradient(
      45vw 45vw at bottom left,
      var(--color-primary-light),
      transparent 70%
    ),
    radial-gradient(
      45vw 45vw at bottom right,
      var(--color-secondary-light),
      transparent 70%
    );
}