/* CSS HEX */
:root {
--charcoal: #344550ff;
--gunmetal: #233543ff;
--gunmetal-2: #1b2d3cff;
--rich-black: #00111fff;
--paynes-gray: #5f717aff;
}

/* CSS HSL */
--charcoal: hsla(204, 21%, 26%, 1);
--gunmetal: hsla(206, 31%, 20%, 1);
--gunmetal-2: hsla(207, 38%, 17%, 1);
--rich-black: hsla(207, 100%, 6%, 1);
--paynes-gray: hsla(200, 12%, 43%, 1);

/* SCSS HEX */
$charcoal: #344550ff;
$gunmetal: #233543ff;
$gunmetal-2: #1b2d3cff;
$rich-black: #00111fff;
$paynes-gray: #5f717aff;

/* SCSS HSL */
$charcoal: hsla(204, 21%, 26%, 1);
$gunmetal: hsla(206, 31%, 20%, 1);
$gunmetal-2: hsla(207, 38%, 17%, 1);
$rich-black: hsla(207, 100%, 6%, 1);
$paynes-gray: hsla(200, 12%, 43%, 1);

/* SCSS RGB */
$charcoal: rgba(52, 69, 80, 1);
$gunmetal: rgba(35, 53, 67, 1);
$gunmetal-2: rgba(27, 45, 60, 1);
$rich-black: rgba(0, 17, 31, 1);
$paynes-gray: rgba(95, 113, 122, 1);

/* SCSS Gradient */
$gradient-top: linear-gradient(0deg, #344550ff, #233543ff, #1b2d3cff, #00111fff, #5f717aff);
$gradient-right: linear-gradient(90deg, #344550ff, #233543ff, #1b2d3cff, #00111fff, #5f717aff);
$gradient-bottom: linear-gradient(180deg, #344550ff, #233543ff, #1b2d3cff, #00111fff, #5f717aff);
$gradient-left: linear-gradient(270deg, #344550ff, #233543ff, #1b2d3cff, #00111fff, #5f717aff);
$gradient-top-right: linear-gradient(45deg, #344550ff, #233543ff, #1b2d3cff, #00111fff, #5f717aff);
$gradient-bottom-right: linear-gradient(135deg, #344550ff, #233543ff, #1b2d3cff, #00111fff, #5f717aff);
$gradient-top-left: linear-gradient(225deg, #344550ff, #233543ff, #1b2d3cff, #00111fff, #5f717aff);
$gradient-bottom-left: linear-gradient(315deg, #344550ff, #233543ff, #1b2d3cff, #00111fff, #5f717aff);
$gradient-radial: radial-gradient(#344550ff, #233543ff, #1b2d3cff, #00111fff, #5f717aff);