/*Logo Color*/
/* CSS HEX */
--charcoal: #384357ff;
--beaver: #977f73ff;
--prussian-blue: #152434ff;
--french-gray: #cfd6e1ff;
--persian-red: #cf3624ff;

/* CSS HSL */
--charcoal: hsla(219, 22%, 28%, 1);
--beaver: hsla(20, 15%, 52%, 1);
--prussian-blue: hsla(211, 42%, 14%, 1);
--french-gray: hsla(217, 23%, 85%, 1);
--persian-red: hsla(6, 70%, 48%, 1);

/* SCSS HEX */
$charcoal: #384357ff;
$beaver: #977f73ff;
$prussian-blue: #152434ff;
$french-gray: #cfd6e1ff;
$persian-red: #cf3624ff;

/* SCSS HSL */
$charcoal: hsla(219, 22%, 28%, 1);
$beaver: hsla(20, 15%, 52%, 1);
$prussian-blue: hsla(211, 42%, 14%, 1);
$french-gray: hsla(217, 23%, 85%, 1);
$persian-red: hsla(6, 70%, 48%, 1);

/* SCSS RGB */
$charcoal: rgba(56, 67, 87, 1);
$beaver: rgba(151, 127, 115, 1);
$prussian-blue: rgba(21, 36, 52, 1);
$french-gray: rgba(207, 214, 225, 1);
$persian-red: rgba(207, 54, 36, 1);

/* SCSS Gradient */
$gradient-top: linear-gradient(
  0deg,
  #384357ff,
  #977f73ff,
  #152434ff,
  #cfd6e1ff,
  #cf3624ff
);
$gradient-right: linear-gradient(
  90deg,
  #384357ff,
  #977f73ff,
  #152434ff,
  #cfd6e1ff,
  #cf3624ff
);
$gradient-bottom: linear-gradient(
  180deg,
  #384357ff,
  #977f73ff,
  #152434ff,
  #cfd6e1ff,
  #cf3624ff
);
$gradient-left: linear-gradient(
  270deg,
  #384357ff,
  #977f73ff,
  #152434ff,
  #cfd6e1ff,
  #cf3624ff
);
$gradient-top-right: linear-gradient(
  45deg,
  #384357ff,
  #977f73ff,
  #152434ff,
  #cfd6e1ff,
  #cf3624ff
);
$gradient-bottom-right: linear-gradient(
  135deg,
  #384357ff,
  #977f73ff,
  #152434ff,
  #cfd6e1ff,
  #cf3624ff
);
$gradient-top-left: linear-gradient(
  225deg,
  #384357ff,
  #977f73ff,
  #152434ff,
  #cfd6e1ff,
  #cf3624ff
);
$gradient-bottom-left: linear-gradient(
  315deg,
  #384357ff,
  #977f73ff,
  #152434ff,
  #cfd6e1ff,
  #cf3624ff
);
$gradient-radial: radial-gradient(
  #384357ff,
  #977f73ff,
  #152434ff,
  #cfd6e1ff,
  #cf3624ff
);