:root {
    /** NOTE - Rotary International Brand Colors
     * Learn more at —
     * https://brandcenter.rotary.org/en-us/our-brand/brand-elements/colors
     * and https://rotary.blue
     * 
     * USAGE: 
     * 1. Use these color variables in your CSS to build your own Rotary-branded webpages.
     * 
     * 2. Copy and paste the following snippet in your custom CSS: 

        :root {
            --primary-color: var(--rotary-royal-blue);
            --secondary-color: var(--azure);
            --tertiary-color: var(--cranberry);
            --highlight-color: var(--rotary-gold);

            --button-color: var(--cranberry);
            --button-color-hover: var(--cranberry);

            --headline-color: var(--storm);
            --ui-border-color: var(--cloud);
            --ui-border-focus-color: var(--azure);
        }
        * Modify the colors as needed using filters, e.g.:
        * You can change the primary color slightly by applying a
        * filter to make it transparent on hover:

        .element:hover {
            background-color: rgba(var(--primary-color), 0.8);
        }

    *
    */

    --rotary-royal-blue: rgba(23, 69, 143, 1);
    --rotary-gold: rgba(247, 168, 27, 1);
    --azure: rgba(0, 105, 200, 1);
    --sky-blue: rgba(0, 162, 224, 1);
    --cranberry: rgba(212, 19, 103, 1);
    --cardinal: rgba(224, 41, 39, 1);
    --turquoise: rgba(0, 173, 187, 1);
    --orange: rgba(255, 118, 0, 1);
    --violet: rgba(144, 31, 147, 1);
    --grass: rgba(1, 151, 57, 1);
    --powder-blue: rgba(185, 217, 235, 1);
    --moss: rgba(167, 172, 162, 1);
    --lavender: rgba(198, 188, 208, 1);
    --taupe: rgba(217, 200, 158, 1);
    --mist: rgba(155, 164, 180, 1);
    --slate: rgba(101, 127, 153, 1);
    --charcoal: rgba(84, 86, 90, 1);
    --pewter: rgba(137, 138, 141, 1);
    --smoke: rgba(177, 177, 177, 1);
    --silver: rgba(208, 207, 205, 1);
    --white: rgba(255, 255, 255, 1);
    --black: rgba(0, 0, 0, 1);
    --storm: rgba(122, 110, 102, 1);
    --ash: rgba(150, 139, 131, 1);
    --platinum: rgba(191, 183, 176, 1);
    --cloud: rgba(214, 209, 202, 1);
}