:root {
    --primary_color: #132d64;
    --primary_light_color: #516796; /* Start with secondary color... Increase "l" by 10. */
    --primary_dark_color: hsl(201, 100%, 29%); /* Start with secondary color... Decrease "l" by 10. */
    --primary_color_opacity: rgba(0, 130, 201, 0.2); /* Start with secondary color... Set "a" to 0.2. */

    --secondary_color: #710F2D;
    --secondary_light_color: #cf4c75; /* Start with secondary color... Increase "l" by 10. */
    --secondary_dark_color: #a52b51; /* Start with secondary color... Decrease "l" by 10. */
    --secondary_color_opacity: rgba(181, 212, 84, 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. */
    --danger_color_bg_opacity: rgba(220, 53, 69, 0.1); /* Start with danger color... Set "a" to 0.1. */

    --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: 'Lato-Light', sans-serif;
    --heading_font_family: 'Merriweather-Bold', sans-serif;
    --ui_font_family: 'Merriweather', sans-serif;
}