:root{
    --black: #000000;
    --white: #ffffff;

    /* colors HEX */
    --color1HEX: #ba3f3f;
    --color2HEX: #2948aa;
    --color3HEX: #f2f5f9;
    --color4HEX: #a73939;
    --color5HEX: #e6e2c3;
    --color6HEX: #ffffff;

    /* colors RGB and HSL */
        --blackRGB: 0, 0, 0;
        --whiteRGB: 255, 255, 255;
        --color1RGB: 186, 63, 63;
        --color2RGB: 41, 72, 170;
        --color3RGB: 242, 245, 249;
        --color4RGB: 167, 57, 57;
        --color5RGB: 230, 226, 195;
        --color6RGB: 255, 255, 255;
    /* layout border */
    --border-width: 20px;
    --border-color: #19a3b2;

    /* font families */
    --hed-font: 'Retrokia Caps Rounded', sans-serif;
    --body-font: 'Lexend', sans-serif;
    --btn-font: 'Retrokia Caps Rounded', sans-serif;
    --mono-font: 'Retrokia Caps Rough', sans-serif;
    --script-font: 'Retrokia Caps Textured', sans-serif;

    /* font weights */
    --hed-font-weight: 700;
    --body-font-weight: 400;
    --link-font-weight: 700;
    --btn-font-weight: 400;
    --menu-font-weight: 400;

    /* text transform */
    --hed-transform: uppercase;
    --subhed-transform: uppercase;
    --btn-transform: uppercase;
    --menu-transform: uppercase;

    /* lity */

    .lity{
        background: rgba(var(--color1RGB), 0.85);
    }

    .lity-close{
        color: var(--color1HEX);
    }

    .lity-close:hover,
    .lity-close:focus,
    .lity-close:active,
    .lity-close:visited{
        color: var(--color3HEX);
    }
}