:root {
    --primary_color: #022539;
    --primary_light_color: hsl(202, 93%, 22%); /* Start with secondary color... Increase "l" by 10. */
    --primary_dark_color: hsl(202, 93%, 2%); /* Start with secondary color... Decrease "l" by 10. */
    --primary_color_opacity: rgba(2, 38, 59, 0.2); /* Start with secondary color... Set "a" to 0.2. */

    --secondary_color: #fb991a;
    --secondary_light_color: hsl(34, 97%, 64%); /* Start with secondary color... Increase "l" by 10. */
    --secondary_dark_color: hsl(34, 97%, 44%); /* Start with secondary color... Decrease "l" by 10. */
    --secondary_color_opacity: rgba(251, 153, 26, 0.2); /* Start with secondary color... Set "a" to 0.2. */

    --success_color: #198754;
    --success_light_color: hsl(152, 69%, 41%); /* Start with success color... Increase "l" by 10. */
    --success_dark_color: hsl(152, 69%, 21%); /* Start with success color... Decrease "l" by 10. */
    --success_color_opacity: rgba(25, 135, 84, 0.2); /* Start with success color... Set "a" to 0.2. */

    --danger_color: #dc3545;
    --danger_light_color: hsl(354, 70%, 64%); /* Start with danger color... Increase "l" by 10. */
    --danger_dark_color: hsl(354, 70%, 44%); /* Start with danger color... Decrease "l" by 10. */
    --danger_color_opacity: rgba(220, 53, 69, 0.2); /* Start with danger color... Set "a" to 0.2. */

    --warning_color: #ffc107;
    --warning_light_color: hsl(45, 100%, 61%); /* Start with warning color... Increase "l" by 10. */
    --warning_dark_color: hsl(45, 100%, 41%); /* Start with warning color... Decrease "l" by 10. */
    --warning_color_opacity: rgba(255, 193, 7, 0.2); /* Start with warning color... Set "a" to 0.2. */

    --box_shadow_color: rgba(88, 88, 91, 0.65);

    --body_font_family: 'Roboto', sans-serif;
    --heading_font_family: 'Roboto Condensed', sans-serif;
    --ui_font_family: 'Roboto', sans-serif;
}