:root {
  /*Primary*/
  --light-red: hsl(0, 100%, 67%);
  --orange-yellow: hsl(39, 100%, 56%);
  --green-teal: hsl(166, 100%, 37%);
  --cobalt-blue: hsl(234, 85%, 45%);

  /*Backgrounds*/
  --bg-light-red: hsl(0, 100%, 97%);
  --bg-orange-yellow: hsl(38, 100%, 95%);
  --bg-green-teal: hsl(166, 100%, 93%);
  --bg-cobalt-blue: hsl(232, 85%, 97%);

  /*Gradients*/
  --gradient-bg-light-slate-blue: hsl(252, 100%, 67%);
  --gradient-bg-light-royal-blue: hsl(241, 81%, 54%);
  --gradient-circle-violet-blue: hsla(256, 72%, 46%, 1);
  --gradient-circle-persian-blue: hsla(241, 72%, 46%, 0);

  --gradient-result-bg: linear-gradient(
          var(--gradient-bg-light-slate-blue),
          var(--gradient-bg-light-royal-blue)
  );
  --gradient-result-circle: linear-gradient(
          var(--gradient-circle-violet-blue),
          var(--gradient-circle-persian-blue)
  );

  /*Neutral*/
  --light-lavander: hsl(241, 100%, 89%);
  --dark-gray-blue: hsl(224, 30%, 27%);

  /*Font*/
  --paragraphe: 15px;
}