/*********************************************************************

    ██████╗ ██╗   ██╗████████╗████████╗ ██████╗ ███╗   ██╗███████╗
    ██╔══██╗██║   ██║╚══██╔══╝╚══██╔══╝██╔═══██╗████╗  ██║██╔════╝
    ██████╔╝██║   ██║   ██║      ██║   ██║   ██║██╔██╗ ██║███████╗
    ██╔══██╗██║   ██║   ██║      ██║   ██║   ██║██║╚██╗██║╚════██║
    ██████╔╝╚██████╔╝   ██║      ██║   ╚██████╔╝██║ ╚████║███████║
    ╚═════╝  ╚═════╝    ╚═╝      ╚═╝    ╚═════╝ ╚═╝  ╚═══╝╚══════╝

 *********************************************************************/



    button,
    .button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        color: var(--color-white);
        background: var(--color-blue);
        transition: 0.2s background ease-in, 0.2s color ease-in;
        line-height: auto;
        border-radius: 0.4rem;
    }

    button:hover,
    .button:hover,
    input[type="button"]:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover {
        color: var(--color-gray);
        background: var(--color-gray-light);
    }

    button:active,
    .button:active,
    input[type="button"]:active,
    input[type="submit"]:active,
    input[type="reset"]:active,
    button:focus,
    .button:focus,
    input[type="button"]:focus,
    input[type="submit"]:focus,
    input[type="reset"]:focus {
        color: var(--color-black);
    }

    button:active:hover,
    .button:active:hover,
    input[type="button"]:active:hover,
    input[type="submit"]:active:hover,
    input[type="reset"]:active:hover,
    button:focus:hover,
    .button:focus:hover,
    input[type="button"]:focus:hover,
    input[type="submit"]:focus:hover,
    input[type="reset"]:focus:hover {
        color: var(--color-black);
    }