:root {
    --primary_color: #5719BC;
    --primary_light_color: hsl(263, 77%, 52%); /* Start with primary color... Increase "l" by 10. */
    --primary_dark_color: hsl(263, 77%, 32%); /* Start with primary color... Decrease "l" by 10. */
    --primary_color_opacity: rgba(87, 25, 188, 0.2); /* Start with primary color... Set "a" to 0.2. */

    --secondary_color: #0EC163;
    --secondary_light_color: hsl(148, 86%, 51%); /* Start with secondary color... Increase "l" by 10. */
    --secondary_dark_color: hsl(148, 86%, 31%); /* Start with secondary color... Decrease "l" by 10. */
    --secondary_color_opacity: rgba(14, 193, 99, 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;
}